react-native - 如何根据 Tab Navigator 更改 Drawer Navigator 的 headerStyle

Question

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

首先：我正在使用 React Native。我有一个 TabNavigator 嵌套到 DrawerNavigator

我正在尝试根据特定屏幕将抽屉标题的颜色更改为 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 是最简单的。基本上，它是您外部导航器周围的容器，您可以在内部访问和更改状态。