react-native - React Native Tab 嵌套到 Stack 导航 v5 - 更新标题的最佳实践

Question

我试图了解什么是嵌套 React Native Navigation v5 的最佳方法。

我有一个 TabNavigation 嵌套到 Stack.Navigator 中，如下所示:

const MainNavigation = () => {

  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <StatusBar barStyle="light-content" />
        <Stack.Navigator screenOptions={navStackOptions} >
          <FirstListStack.Screen name="FirstListStack" component={TabNavigation} options={FirstNavOpt} />
          <FirstListStack.Screen name="AnotherView" component={AnotherView} options={AnotherViewNavOpt} />
          <SecondListStack.Screen name="SecondListStack" component={TabNavigation} options={SecondNavOpt} />
          <ThirdListStack.Screen name="ThirdListStack" component={TabNavigation} options={ThirdNavOpt} />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );

  function TabNavigation() {
    return (
      <Tab.Navigator
        initialRouteName="TabOne"
      >
        <Tab.Screen name="TabOne" component={TabOne} options={navTabOptions} />
        <Tab.Screen name="TabTwo" component={TabTwo} options={navTabOptions} />
        <Tab.Screen name="TabThree" component={TabThree} options={navTabOptions} />
      </Tab.Navigator>
    );
  }

};

export default MainNavigation;

现在，在选项卡之间切换时，堆栈导航标题不会更新。

访问 Stack Navigation 状态和更新其状态的最佳方法是什么？特别是更新标题按钮？

如果我的问题不清楚，请告诉我。非常感谢。

Answer 1

我找到了一个解决方案，但我不确定这是一个好的做法。

我更改了导航的逻辑，将 Tab Nav 作为父级，将 Stack Nav 作为子级。

const Tab = createBottomTabNavigator();
const FirstListStack = createStackNavigator();
const SecondListStack = createStackNavigator();
const ThirdListStack = createStackNavigator();

const MainNavigation = () => {

  const navTabOptions = ({ route }) => ({
    tabBarVisible: isTabBarVisible(route)
  });

  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <StatusBar barStyle="light-content" />
        <Tab.Navigator>
          <Tab.Screen name="First" component={FirstListStackScreen} options={navTabOptions} />
          <Tab.Screen name="Second" component={SecondListStackScreen} options={navTabOptions} />
          <Tab.Screen name="Third" component={ThirdListStackScreen} options={navTabOptions} />
        </Tab.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );

  function isTabBarVisible(route) {
    // Check here if the route.state is not undefined
    // and based on the route return true or false
    // to show or hide the tab bar
  }

  function FirstListStackScreen() {
    return (
      <FirstListStack.Navigator>
        <FirstListStack.Screen name="First" component={} />
      </FirstListStack.Navigator>
    );
  }

  function SecondListStackScreen() {
    return (
      <SecondListStack.Navigator>
        <SecondListStack.Screen name="Second" component={} />
      </SecondListStack.Navigator>
    );
  }

  function ThirdListStackScreen() {
    return (
      <ThirdListStack.Navigator>
        <ThirdListStack.Screen name="Third" component={} />
      </ThirdListStack.Navigator>
    );
  }

};

export default MainNavigation;

请发布任何更好的解决方案。谢谢