React Native中根据AsyncStorage值修改initialRoute不生效问题

问题根因 #

React Navigation 的 initialRouteName 仅在 <Stack.Navigator> 首次渲染时生效，后续修改该 prop 不会触发导航初始路由的更新。你当前的代码中，首次渲染 Navigator 时 AsyncStorage 的异步读取还未完成，使用的是默认的 AuthChoice 作为初始路由，等读取完成修改 initialRoute 时，Navigator 已经初始化完成，不会再响应这个变化。

解决方案 #

方案1：等待存储读取完成后再渲染导航容器 #

新增加载状态，在异步读取本地存储的过程中展示加载页，读取完成后再渲染导航组件，保证 initialRouteName 首次赋值就是正确值：

// 新增加载状态
const [initialRoute, setInitialRoute] = useState('AuthChoice');
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  async function getStorageValue() {
    let value;
    try {
      value = await AsyncStorage.getItem('isLoggedIn');
    } catch (e) {
      // 异常处理
    } finally {
      setInitialRoute(value === 'true' ? 'Home' : 'AuthChoice');
      // 读取完成关闭加载状态
      setIsLoading(false);
    }
  }
  getStorageValue();
}, []);

// 加载阶段渲染加载组件
if (isLoading) {
  return <ActivityIndicator size="large" style={{flex: 1, justifyContent: 'center'}} />
}

return (
  <Provider store={store}>
    <NavigationContainer>
      <Stack.Navigator initialRouteName={initialRoute}>
        {/* 路由配置保持不变 */}
        <Stack.Screen
          options={{headerShown: false}}
          name="AuthChoice"
          component={AuthChoiceScreen}
        />
        <Stack.Screen
          options={{headerShown: false}}
          name="Home"
          component={HomeScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  </Provider>
);

方案2：动态渲染路由组（更推荐） #

不依赖 initialRouteName，直接根据登录状态渲染对应的路由集合，后续登录/登出状态变化时会自动切换路由，无需手动跳转：

const [isLoggedIn, setIsLoggedIn] = useState(false);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  async function getStorageValue() {
    let value;
    try {
      value = await AsyncStorage.getItem('isLoggedIn');
      setIsLoggedIn(value === 'true');
    } catch (e) {
      // 异常处理
    } finally {
      setIsLoading(false);
    }
  }
  getStorageValue();
}, []);

if (isLoading) {
  return <ActivityIndicator size="large" style={{flex: 1, justifyContent: 'center'}} />
}

return (
  <Provider store={store}>
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        {/* 根据登录状态渲染对应路由 */}
        {isLoggedIn ? (
          <Stack.Screen name="Home" component={HomeScreen} />
        ) : (
          <Stack.Screen name="AuthChoice" component={AuthChoiceScreen} />
        )}
        {/* 其他公共路由可放在此处 */}
      </Stack.Navigator>
    </NavigationContainer>
  </Provider>
);

排查注意事项 #

• 确认存储 isLoggedIn 时写入的是字符串格式的 'true'，不要直接写入布尔值 true，AsyncStorage 会自动将非字符串值转为字符串，布尔值存储后会变成 '[object Boolean]，导致匹配失败
• 确认使用的是官方维护的 @react-native-async-storage/async-storage 包，React Native 自带的 AsyncStorage 早已废弃，可能存在读取异常问题
• 可在读取存储后打印 value 的值，确认是否能正常取到预期的存储内容，排查是否存在key拼写错误的问题

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