将路由添加到 NavigationContainer答案

【问题标题】：Add route to NavigationContainer将路由添加到 NavigationContainer
【发布时间】：2020-10-23 11:02:57
【问题描述】：

如何在不添加新 Tab.Screen 的情况下将导航路由添加到 Tab Navigator 或通常在 NavigationContainer 中。尝试在子组件中添加导航。

Her is my Navigation Container in App.js

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        <Tab.Screen name="ScreenOne" component={HomeScreen} />
        <Tab.Screen name="ScreenTwo" component={ShoppingScreen} />
        <Tab.Screen name="ScreenThree" component={RecipeScreen} />
        <Tab.Screen name="ScreenFour" component={DiscoverScreen} />
      </Tab.Navigator>
    </NavigationContainer>

【问题讨论】：

您的确切意思，例如。 HomeScreen 有 HomeScreen/x, HomeScreen/y ?
目前我有一个导航，每个主要路线类别都有 4 个底部选项卡。现在我想在应用程序的更深部分的每个选项卡屏幕中导航，但不展开主底部选项卡导航。这么好理解吗？

标签： javascript reactjs react-native jsx

【解决方案1】：

试试这个Screen options with nested navigators

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function HomeStackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="A"
        component={A}
      />
      <Stack.Screen
        name="B"
        component={B}
      />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        <Tab.Screen name="ScreenOne" component={HomeStackScreen} />
        .....
      </Tab.Navigator>
    </NavigationContainer>
 )
}

【讨论】：