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>
    );
}

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

Answer 1

根据您的代码“首页”是初始屏幕，底部选项卡添加在名为“底部”的屏幕上。使用DrawerNavigator添加侧菜单，然后可以在屏幕之一上添加底部标签，如下所示：

C:\Qt\5.15.0\msvc2019_64

嵌套时不显示React Navigation v5 BottomTabNavigator

1 个答案: