React Native外部AppNavigator导航异常及用户校验跳转需求

问题核心 #

• AppNavigator中错误地将<AppStack.Screen>嵌套使用，导航器的正确结构应为<AppStack.Navigator>作为容器，内部放置各个子导航器对应的<AppStack.Screen>。
• SplashScreen未实现用户校验后的导航跳转逻辑，无法根据用户状态切换到Auth或Main导航器。

修正后的代码实现 #

1. 修复AppNavigator结构 #

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// 假设已提前创建对应Stack：SplashStack、AuthStack、MainStack
const AppStack = createStackNavigator();

function SplashNavigator() {
  return (
    <SplashStack.Navigator>
      <SplashStack.Screen name="Splash" component={SplashScreen} />
    </SplashStack.Navigator>
  )
}

function AuthNavigator(){
  return(
    <AuthStack.Navigator>
      <AuthStack.Screen name="Login" component={LoginScreen} />
      <AuthStack.Screen name="Register" component={RegisterScreen} />
      <AuthStack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
    </AuthStack.Navigator>
  )
}

function MainNavigator(){
  return(
    <MainStack.Navigator>
      <MainStack.Screen name="OrderPlaced" component={orderPlaced} />
      <MainStack.Screen name="ProductDescription" component={ProductDescriptionScreen} />
      <MainStack.Screen name="CartegoryProductListing" component={CategoryProductScreen} />
      <MainStack.Screen name="Delivery" component={DeliveryScreen} />
      <MainStack.Screen name="OrderHistory" component={OrderHistoryScreen} />
      <MainStack.Screen name="CancelledOrderHistory" component={CancelledOrderHistory} />
      <MainStack.Screen name="FinishedOrderHistory" component={FinishedOrderHistory} />
      <MainStack.Screen name="EditProfileScreen" component={EditProfileScreen} />
      <MainStack.Screen name="Payment" component={Payment} />
      <MainStack.Screen name="HistoryDetails" component={HistoryDetails} />
      <MainStack.Screen name="CustomerCareSupport" component={CustomerCareSupport} />
      <MainStack.Screen name="Address" component={Address} />
      <MainStack.Screen name="AddEditAddress" component={AddEditAddress} />
      <MainStack.Screen name="Cart" component={CartScreen} />
    </MainStack.Navigator>
  )
}

function AppNavigator(){
  return(
    <NavigationContainer>
      {/* 用AppStack.Navigator作为容器，设置初始路由为闪屏导航器 */}
      <AppStack.Navigator initialRouteName="SplashNavigator" screenOptions={{ headerShown: false }}>
        <AppStack.Screen name='SplashNavigator' component={SplashNavigator}/>
        <AppStack.Screen name="AuthNavigator" component={AuthNavigator} />
        <AppStack.Screen name='MainNavigator' component={MainNavigator} />
      </AppStack.Navigator>
    </NavigationContainer>
  )  
}

export default AppNavigator

2. 在SplashScreen中实现用户校验与跳转 #

import React, { useEffect } from 'react';
import { View, ActivityIndicator } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const SplashScreen = ({ navigation }) => {
  useEffect(() => {
    checkUserAuthentication();
  }, []);

  const checkUserAuthentication = async () => {
    // 模拟校验逻辑：从本地存储获取用户凭证
    const userToken = await AsyncStorage.getItem('userToken');
    
    // 根据校验结果跳转，用replace避免返回闪屏页
    if (userToken) {
      navigation.replace('MainNavigator');
    } else {
      navigation.replace('AuthNavigator');
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ActivityIndicator size="large" color="#0000ff" />
    </View>
  );
};

export default SplashScreen;

关键注意事项 #

• 导航器嵌套时，必须将子导航器作为component传递给外层导航器的<Screen>，外层容器必须是<Navigator>而非<Screen>。
• 使用navigation.replace()跳转，防止用户通过返回键回到闪屏页面。
• 确保已安装并导入所有依赖包：@react-navigation/native、@react-navigation/stack、@react-native-async-storage/async-storage等。

内容的提问来源于stack exchange，提问作者Deepak babu