在堆栈屏幕上显示底部标签栏 React Native

Question

我的 React 应用程序中有一个嵌套导航

有一些堆栈屏幕，我也想在其中显示底部标签栏

像第一个堆栈屏幕一样清晰，第二个在其中有一个底部标签

代码

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

    //Screen Names
    const homeName = "Home";
    const manage = "Manage";
    const stats = "Stats";
    const profile = "Profile";
    const live = "Live";


    //Bottom Tab Navigation
    function TabsNav() {
        return (
            <Tab.Navigator
                initialRouteName={homeName}
                screenOptions={({ route }) => ({
                     ...
                    },
                })}
            >
                <Tab.Screen
                    name="Home"
                    ...
                />
                ...
            </Tab.Navigator>
        );
    };

        function MyStack() {
        return (
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen name="Search_Teams" component={Search_Teams} options={{ headerShown: false }} />
                    <Stack.Screen name="Select_Match" component={Select_Match} options={{ headerShown: false }} />
                    ...
                </Stack.Navigator>
            </NavigationContainer>
        );
    }

Answer 1

请参阅此文档：(https://reactnavigation.org/docs/tab-based-navigation/#a-stack-navigator-for-each-tab) 请参阅此文档：(https://reactnavigation.org/docs/tab-based-navigation/#a-stack-navigator-for-each-tab)

为每个选项卡制作堆栈 React Navigation 版本 6