嵌套导航器

Question

我正在努力弄清楚嵌套导航器的工作原理。我想呈现我的选项卡和我的屏幕堆栈。我尝试了几种不同的方法，包括我最后一次出于困惑和只是尝试的尝试。任何帮助表示赞赏！谢谢。

const Tab = createBottomTabNavigator();

function MyTabs() {
//    const dispatch = useDispatch();
//    const auth = useSelector((state) => state.auth);
  return (
    <Tab.Navigator
      initialRouteName="Home"
      tabBarOptions={{
        activeTintColor: '#F60081',
        style: {
          backgroundColor: '#F1F1F1'
        }
      }}
     
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={maps}
        options={{
          tabBarLabel: 'Maps',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="map-marker-circle" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator>    
        <Stack.Screen name="Home" component= {Home, MyTabs} options={{headerShown: false}}/>        
        <Stack.Screen name="VenueDetails" component= {VenueDetailsScreen} options={{headerShown: false}}/>
      </Stack.Navigator>
  );
}

Answer 1

这是嵌套导航的 example。对于您的示例，您似乎想将选项卡导航器放在堆栈导航器中，因此在您的 App.您可以执行以下操作：

export default function App() {

  return (
    <NavigationContainer>
      <MyTabs />
   </NavigationContainer>
  );
}

上面的顶层有一个堆栈导航器。在该堆栈导航器中，您将看到 3 个屏幕，Home、MyTabs 和 VenueDetails。在 MyTabs 屏幕内，您有一个 Tab 导航器。