react-native - 嵌套时不显示 React Navigation v5 BottomTabNavigator

Question

当这样的代码时， BottomTabNavigator不显示：

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

function Bottom() {
    return (
        <Tab.Navigator>
            <Tab.Screen name="Home" component={HomeScreen}  />
            <Tab.Screen name="Setting" component={SettingsScreen}  />
        </Tab.Navigator>
    );
}

function AppRoot() {
    return (
        <NavigationContainer>
            <Stack.Navigator
            initialRouteName="HomePage"
            screenOptions={{ gestureEnabled: false }}>
            //this is bottom tab navigator, it doesn't show.
            <Stack.Screen name="Bottom" component={Bottom} />
            <Stack.Screen
                name="HomePage"
                component={HomePage}
            />
            <Stack.Screen
                name="Page1"
                component={Page1}
            />
        </Stack.Navigator>
        </NavigationContainer>
    );
}


AppRegistry.registerComponent(appName, () => AppRoot);

但是当我不使用嵌套堆栈时，BottomTabNavigator工作正常。

像这样：

function AppRoot() {
    return (
        <NavigationContainer>
            <Bottom />
        </NavigationContainer>
    );
}

如何在一页中同时使用普通导航器和底部标签导航器。

标签： react-nativereact-navigation

Answer 1

根据您的代码，“主页”是初始屏幕，底部选项卡添加到名为“底部”的屏幕上。使用 DrawerNavigator 添加侧边菜单，您可以在其中一个屏幕上添加底部选项卡，如下所示：

    const Drawer = createDrawerNavigator();
    const Tab = createBottomTabNavigator();

   function HomeScreen({navigation}) {
    return (
    <View style={{flex: 1}}>
     <View style={{alignSelf:'flex-start'}}> 
       <Button
         onPress={() => navigation.toggleDrawer() }
          title="Menu"
       />
     </View> 
   <View style={{alignSelf:'center',justifyContent:'space-around'}}> 
    <Button
      onPress={() => navigation.navigate('Notifications')}
       title="Go to notifications"
     />
    </View>
   </View>
   );
  }

  function Tab1() {
   return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Tab1!</Text>
     </View>
    );
  }

  function Tab2() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
     <Text>Tab2!</Text>
    </View>
   );
  }

   function NotificationsScreen({navigation}) {
   return (

   <Tab.Navigator>
    <Tab.Screen name="Tab1" component={Tab1} />
    <Tab.Screen name="Tab2" component={Tab2} />
   </Tab.Navigator>

   );
   }

  function SettingsScreen({navigation}) {
  return (
   <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
     <Button
      onPress={() => navigation.navigate('Home')}
        title="Go back home"
      />
   </View>
  );
 }

 export default function App() {
 return (
   <NavigationContainer>
    <Drawer.Navigator initialRouteName="Home" drawerPosition="left" 
       drawerType="slide">
   <Drawer.Screen
     name="Home"
      component={HomeScreen}/>
    <Drawer.Screen name="Notifications" component={NotificationsScreen} />
    <Drawer.Screen name="Settings" component={SettingsScreen} />
   </Drawer.Navigator>
   </NavigationContainer>
  );
}