如何根据 Tab Navigator 更改 Drawer Navigator 的 headerStyle

Question

我解决了这个将导航组件分隔在不同文件中的特定问题，这样组件就不会再重新呈现了

首先：我使用的是 React Native。我有一个嵌套在 DrawerNavigator 中的 TabNavigator

我正在尝试根据特定屏幕将抽屉标题的颜色更改为 Material Top Tab Navigator。

我尝试使用具有布尔状态的 TabNavigator 的 screenListeners 来执行此操作，但是当我设置 setState 时，TabNavigator 被重新渲染并再次跳转到主屏幕。

PD：应用程序有一个来自抽屉的顶部标题和来自 tabNavigator 的底部选项卡。我需要当 X 屏幕成为焦点时它们都改变颜色。 为此，我使用了 route.name 的底部选项卡，但我无法从父导航器访问此属性。

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

Answer 1

有多种选项可以双向提供状态，Redux、Recoil、Context Provider。如果您还没有使用其中之一，我认为 Context Provider 是最简单的。基本上它是您外部导航器周围的容器，您可以在内部访问和更改状态。