React Navigation 6配置身份验证流后出现屏幕不存在报错如何解决

问题原因&修复方案 #

核心错误点 #

• 导航组件结构混用：Drawer.Navigator的直接子元素只能是Drawer.Screen，你错误地把只能用于Stack.Navigator的Stack.Group套在了Drawer.Screen外层，导致屏幕没有被正确注册到导航树。
• 条件逻辑写反+导航路由不存在：你当前的判断逻辑是验证通过时才渲染AuthScreen、StartUp，验证不通过时渲染业务页面，逻辑完全倒置。而且当你触发登出操作后，验证状态变为未通过，AuthScreen已经被你从导航树中移除，此时调用navigation.navigate("AuthScreen")当然找不到对应的屏幕。
• 初始路由配置错误：你固定设置initialRouteName="StartUp"，但验证通过的分组里根本没有StartUp这个屏幕，导航初始化时找不到目标路由直接报错。
• 组件类型混用：你在Drawer.Navigator下混用Stack.Screen和Drawer.Screen，Drawer.Navigator只会识别Drawer.Screen，你写的Stack.Screen不会被注册。
• 状态取值错误：你直接用authActions.AUTHENTICATE作为判断条件，这个是Action的类型常量，不是实际的登录状态值，需要从Redux store中取真实的验证状态。

修复后的代码 #

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { useSelector } from 'react-redux';
// 其余组件、图标引入自行保留

const Drawer = createDrawerNavigator();

function ShopNavigator() {
    const dispatch = useDispatch();
    // 从store取实际登录状态，替换成你自己的state字段路径
    const isAuth = useSelector(state => state.auth.isAuthenticated);

    return (
        <NavigationContainer>
            <Drawer.Navigator 
                initialRouteName={isAuth ? "ProductsOverviewScreen" : "StartUp"} 
                drawerContent={props => {
                    return (
                        <View style={{ flex: 1, paddingTop: 5 }}>
                            <DrawerContentScrollView {...props}>
                                <SafeAreaView forceInset={{ top: "always", horizontal: "never" }}>
                                    <DrawerItemList {...props} />
                                    {/* 仅登录状态展示登出按钮 */}
                                    {isAuth && <DrawerItem 
                                        {...props}
                                        label="logout"
                                        color="red"
                                        onPress={() => {
                                            dispatch(authActions.logout());
                                            // 不需要手动跳转，状态变更后导航会自动切换到登录页
                                        }}
                                    />}
                                </SafeAreaView>
                            </DrawerContentScrollView>
                        </View>
                    )
                }}
            >
                {/* 未登录时渲染的屏幕 */}
                {!isAuth ? (
                    <>
                        <Drawer.Screen 
                            name="StartUp" 
                            component={StartupScreen}
                            options={{
                                drawerItemStyle: { display: 'none' }
                            }} 
                        />
                        <Drawer.Screen 
                            name="AuthScreen" 
                            component={AuthScreen}
                            options={{
                                drawerItemStyle: { display: 'none' }
                            }} 
                        />
                    </>
                ) : (
                    // 已登录时渲染的业务屏幕
                    <Drawer.Screen 
                        name="ProductsOverviewScreen" 
                        component={ProductOverviewScreen}
                        options={{
                            title: "Home",
                            drawerIcon: drawerConfig => (
                                <Ionicons 
                                    name="md-home"
                                    size={23}
                                    color="green" 
                                />
                            ),
                        }}
                    />
                )}
            </Drawer.Navigator>
        </NavigationContainer>
    )
};

内容的提问来源于stack exchange，提问作者kazim ali