React Native中如何按Tab Navigator页面修改Drawer Navigator的headerStyle

我已经通过将导航组件拆分到不同文件的方式解决了该问题，采用该方案后组件不会再触发重渲染

问题场景 #

我使用的是 React Native，项目导航结构为 DrawerNavigator 中嵌套 TabNavigator。
需求是根据 Material Top Tab Navigator 内的特定页面，同步修改两处样式：

• Drawer Navigator 自带的顶部 Header 颜色
• TabNavigator 自带的底部 tab 栏颜色

原有尝试的问题 #

底部 tab 栏的颜色已经通过 route.name 属性实现了动态切换，代码如下，但父级 Drawer 导航器无法直接访问子 Tab 导航器的 route 属性：

....
screenOptions={({route}) => ({
          tabBarStyle: {
            backgroundColor:
              route.name === '[targetScreen]' ? '#6600A1' : theme.PRIMARY_COLOR,
          },
...

之前尝试通过 TabNavigator 的 screenListeners 配合布尔状态来修改父级 Header 颜色，但是只要调用 setState 更新状态，TabNavigator 就会整体重渲染，自动跳转回首页，完全不符合预期。

最终解决方案 #

直接把不同的导航组件拆分到独立的文件中即可，修改状态后不会再触发导航组件的全局重渲染，也不会出现自动跳转回首页的问题。

内容的提问来源于stack exchange，提问作者Leandro Lescano