React Native 嵌套导航的标题

Question

我目前正在开发一个 React Native 项目，并面临导航标题的一些挑战。我的目标是创建一个类似于 X 的导航结构。默认情况下，我使用抽屉式导航（以及 BottomBarNavigation），但我还需要一个堆栈导航器来处理打开帖子或个人资料等场景，类似于您在应用程序 X 中看到的情况。我的目标是保留堆栈导航器出现时显示其标题，并在堆栈导航器处于活动状态时隐藏默认抽屉式导航。

我的导航组件：

1. 抽屉式导航位于顶部

<Drawer.Navigator>
  <Drawer.Screen name={lang.t('Dashboard.Dashboard')} component={BottomTabNavigator}/>
  <Drawer.Screen name={lang.t('Settings.Settings')} component={Settings}/>
</Drawer.Navigator>

2. 抽屉导航内部我有一个 BottomBarNavigation

<BottomTab.Navigator screenOptions={{ headerShown:false }}>
  <BottomTab.Screen name={lang.t('Dashboard.BottomBar.Home')} component={HomeScreen}/>
  <BottomTab.Screen name={lang.t('Dashboard.BottomBar.Order_list')} component={OrderListScreen}/>
</BottomTab.Navigator>

3. 最后在 BottomBarNavigator 中我有一个 Stack Navigator

<Stack.Navigator screenOptions={{ headerShown: false }}>
  <Stack.Screen name="List" component={List}></Stack.Screen>
  <Stack.Screen name="Create" component={Create}></Stack.Screen>
  <Stack.Screen name="Shop List" component={ShopList}></Stack.Screen>
</Stack.Navigator>

到目前为止我尝试的是：

1. 将 Drawer Navigator 作为道具传递给他们的孩子，一直到 Stack Navigator，所以我可以使用

   setOption()

   函数更改它的选项，但我遇到了无法将对象作为参数传递的问题，至少我得到了警告
2. 创建一个上下文，这样我可以获得一个全局状态来控制应显示哪个标题，但问题是，当我更改每个导航选项时，项目会重新加载，这会导致一些不需要的动画，而且您还必须向下推按两次按钮有点烦人

目前我认为问题出在导航结构上

我花了一天多的时间思考和尝试，但似乎没有任何效果，任何帮助或想法都会有帮助。这是我想要做的一个小但有用的功能，但我无法让它工作，这有点烦人

Answer 1

使用 onStateChange 监听导航状态变化，并更新应用程序状态以隐藏/显示组件。像这样的东西可以工作：

const [showHeader, setShowHeader] = useState(true);

return (
  <NavigationContainer
    onStateChange={(state) =>
      setShowHeader(!['Create'].includes(getCurrentRoute(state).name))
    }>
    <Drawer.Navigator
      screenOptions={{ headerShown: showHeader }}>
...
    </Drawer.Navigator>
  </NavigationContainer>
);