在 React Native 中使用 StackNav 时 TabNav 消失

Question

function TabNav() {
    return (
        <Tab.Navigator
            initialRouteName='home'
            screenOptions={({ route }) => ({
                tabBarIcon: ({ color }) => screenOptions(route, color),

                tabBarActiveTintColor: '#1579ac',
                tabBarInactiveTintColor: '#000',
                tabBarShowLabel: false,
                tabBarStyle: [
                    {
                        display: 'flex',
                    },
                    null,
                ],
            })}
        >
            <Tab.Screen name='home' component={Main} options={{ headerShown: false }} />
            <Tab.Screen name='camera' component={Camera} options={{ headerShown: false }} />
            <Tab.Screen name='base' component={Base} options={{ headerShown: false }} />
            <Tab.Screen name='settings' component={Settings} options={{ headerShown: false }} />
        </Tab.Navigator>
    );
}

const RootNavigator = () => {
    return (
        <NavigationContainer>
            <Stack.Group initialRouteName='TabNav'>
                <Stack.Screen name='TabNav' component={TabNav} options={{ headerShown: false }} />
                <Stack.Screen name='Apparaten' component={Apparaten} options={{ headerShown: true }} />
                <Stack.Screen name='Automation' component={Automation} options={{ headerShown: true }} />
                <Stack.Screen name='News' component={News} options={{ headerShown: true }} />
                <Stack.Screen name='Logout' component={Logout} options={{ headerShown: true }} />
                <Stack.Screen name='Users' component={Users} options={{ headerShown: true }} />
                <Stack.Screen name='EditApparaat' component={EditApparaat} options={{ headerShown: true }} />
            </Stack.Group>
        </NavigationContainer>
    );
};
export default RootNavigator;

每当我交换 Stack.screen 时，底部导航就会消失。我知道这是因为包含 TabNav 的 stack.screen 被停用了，但我该如何解决这个问题？任何帮助将不胜感激。

Answer 1

如果您想让 Tabbar 始终可见，则需要以相反的方式组织您的导航结构。每个选项卡都包含一个堆栈（或单个屏幕），Tab.Navigator 是导航容器中的根导航器。

剩下您要决定的是当前 Stack.Group 中的哪个屏幕包含在哪个选项卡中。

为了简单起见，我将所有屏幕移动到一个名为 Main 的堆栈中，这是您的选项卡导航器中的第一个选项卡。所有选项卡的工作流程都相同。

const Stack = createStackNavigator()

export const Main = () => {
    return (
         <Stack.Navigator>
                <Stack.Screen name='Apparaten' component={Apparaten} options={{ headerShown: true }} />
                <Stack.Screen name='Automation' component={Automation} options={{ headerShown: true }} />
                <Stack.Screen name='News' component={News} options={{ headerShown: true }} />
                <Stack.Screen name='Logout' component={Logout} options={{ headerShown: true }} />
                <Stack.Screen name='Users' component={Users} options={{ headerShown: true }} />
                <Stack.Screen name='EditApparaat' component={EditApparaat} options={{ headerShown: true }} />
            </Stack.Navigator>
    );
}

const Tab = createBottomTabNavigator()

export const RootNavigator = () => {
    return (
            <Tab.Navigator
            initialRouteName='home'
            screenOptions={({ route }) => ({
                tabBarIcon: ({ color }) => screenOptions(route, color),

                tabBarActiveTintColor: '#1579ac',
                tabBarInactiveTintColor: '#000',
                tabBarShowLabel: false,
                tabBarStyle: [
                    {
                        display: 'flex',
                    },
                    null,
                ],
            })}
        >
            <Tab.Screen name='home' component={Main} options={{ headerShown: false }} />
            <Tab.Screen name='camera' component={Camera} options={{ headerShown: false }} />
            <Tab.Screen name='base' component={Base} options={{ headerShown: false }} />
            <Tab.Screen name='settings' component={Settings} options={{ headerShown: false }} />
        </Tab.Navigator>
    );
};

const App = () => {

   return <NavigationContainer>
         <RootNavigator />
     </NavigationContainer>
}

export default App;

在 React Native 中使用 StackNav 时 TabNav 消失

TabNav disappears when using StackNav within it in React Native

react-native

react-native-navigation