登录后重定向导致三个 header 和一个底部标签导航

Question

在我的应用程序中，我在启动画面后登录。底部导航工作正常。如果我转到设置并单击“注销”按钮。该应用程序将我导航回登录。太好了。

但是有三个 headers 显示并且底部导航仍然显示。

这个导航中有些东西我不明白。如果你能检查我下面的代码并告诉我我的错误，那就太棒了。

Appnavigator.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import CreateScreen from './screens/CreateScreen';
import HomeScreen from './screens/HomeScreen';
import JoinScreen from './screens/JoinScreen';
import SettingsScreen from './screens/SettingsScreen';
import LoginScreen from './screens/LoginScreen';
import EventScreen from './screens/EventScreen';
import CamScreen from './screens/CamScreen';
import { MaterialIcons } from '@expo/vector-icons';

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

function LoginStack() {
    return (
        <Stack.Navigator _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }} px={4} flex={1}>
            <Stack.Screen options={{ headerShown: true }} name="LoginScreen" component={LoginScreen} />
            <Stack.Screen options={{ headerShown: true }} name="EventStack" component={EventStack} />
            <Stack.Screen name="HomeScreen" component={HomeScreen} />
        </Stack.Navigator>
    )
}

function EventStack() {
    return (

        <Stack.Navigator _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }} px={4} flex={1}>
            <Stack.Screen options={{ headerShown: false }} name="HomeScreen" component={HomeScreen} />
            <Stack.Screen options={{ headerShown: true }} name="EventScreen" component={EventScreen} />
        </Stack.Navigator>
    );
}

// function JoinStack() {
//     <Stack.Navigator _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }} px={4} flex={1}>
//         <Stack.Screen options={{ headerShown: false }} name="Join" component={JoinScreen} />
//         <Stack.Screen options={{ headerShown: true }} name="EventScreen" component={EventScreen} />

//     </Stack.Navigator>
// }

// function CreateStack() {
//     <Stack.Navigator _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }} px={4} flex={1}>
//         <Stack.Screen options={{ headerShown: false }} name="Create" component={CreateScreen} />
//         <Stack.Screen options={{ headerShown: true }} name="HomeScreen" component={HomeScreen} />

//     </Stack.Navigator>
// }

function SettingsStack() {
    return (
        <Stack.Navigator _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }} px={4} flex={1}>
            <Stack.Screen options={{ headerShown: false }} name="SettingsScreen" component={SettingsScreen} />
            <Stack.Screen options={{ headerShown: true }} name="LoginStack" component={LoginStack} />

        </Stack.Navigator>
    )
}

function BottomTabs() {
    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                    let icon;
                    // TODO: Maybe later some different icons
                    if (route.name === 'Events') {
                        icon = focused ? 'list' : 'list';
                    } else if (route.name === 'Join') {
                        icon = focused ? 'login' : 'login';
                    } else if (route.name === 'Cam') {
                        icon = focused ? 'camera' : 'camera';
                    } else if (route.name === 'Create') {
                        icon = focused ? 'edit' : 'edit';
                    } else if (route.name === 'Settings') {
                        icon = focused ? 'settings' : 'settings';
                    }

                    return (
                        <MaterialIcons
                            name={icon}
                            size={size}
                            color={color}
                        />
                    );
                },
                tabBarActiveTintColor: '#22d3ee',
                tabBarHideOnKeyboard: true,
            })
            }
        >
            <Tab.Screen name="Events" component={EventStack} options={{ headerShown: false }} />
            <Tab.Screen name="Join" component={JoinScreen} options={{ headerShown: false }} />
            <Tab.Screen name="Cam" component={CamScreen} options={{ headerShown: false }} />
            <Tab.Screen name="Create" component={CreateScreen} options={{ headerShown: false }} />
            <Tab.Screen name="Settings" component={SettingsStack} options={{ headerShown: false }} />
        </Tab.Navigator>
    )
}

export default () => (
    <NavigationContainer>

        <Stack.Navigator _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }} px={4} flex={1}>
            <Stack.Screen options={{ headerShown: true }} name="LoginScreen" component={LoginScreen} />
            <Stack.Screen options={{ headerShown: true }} name="BottomTabs" component={BottomTabs} />
        </Stack.Navigator>
    </NavigationContainer>
);

单击按钮时的 handleSignOut 函数

const handleSignOut = (navigation) => {
    const auth = getAuth();
    auth.signOut().then(() => { console.log('User signOut success') })
        .catch(error => alert(error.message))
    navigation.navigate("LoginStack")
}

Answer 1

我浪费了很多时间...现在在 Whosebug 上单击发送后我得到了 headers.

的错误

看来我在 Appnavigator.js

中粘贴了错误的代码并传递了 TRUE 选项

但为什么底部导航仍然有效？

登录后重定向导致三个 header 和一个底部标签导航

Redirect after Login causes in three header and a bottom tab nav

react-native

react-navigation

react-navigation-stack

react-navigation-bottom-tab