React Native 导航帐号登录

Question

我正在创建一个带有帐户处理系统的 React Native 应用程序。我正在使用异步存储来存储帐户，并且我有一个布尔值存储 isLoggedIn，我正在访问它以查看是否应该将用户引导到帐户登录页面或 mainContainer 页面，但我很困惑什么是最好的方法这样做。

这是我当前的代码，但无论如何它总是会导致登录屏幕，即使控制台输出 true，表明用户已登录。

useEffect(() => {
    // AsyncStorage.clear();
    async function checkItem() {
      console.log('starting program')
      try {
        const value = await AsyncStorage.getItem('loggedIn');
        if (value == null || JSON.parse(value) == false) {
          setIsLoggedIn(false);
          console.log('found');
          console.log(value);
        } else {
          setIsLoggedIn(true);
          console.log(value);
        }
      } catch (error) {
        console.log(error.message);
      }
    }
    checkItem();
  }, []);
  const Stack = createNativeStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator 
      
      initialRouteName={isLoggedIn ? 'MainContainer' : 'LogIn'}
      screenOptions={{
            headerShown: false
          }}>

        <Stack.Screen name={'MainContainer'} component = {MainContainer}/>
        <Stack.Screen name = {'LogIn'} component = {LogIn}/>
    </Stack.Navigator>
    </NavigationContainer>
  );
}

后续问题：我当前的计划是使用堆栈导航器引导至托管主应用程序或登录屏幕的主容器。主容器有自己的选项卡导航器，它将使用。有更好的方法吗？

Answer 1

您的代码不适用于登录流程，因为您在渲染导航堆栈之后提取登录状态。并且 initialRouteName

 仅在导航器首次加载时才起作用。因此，它将始终使用“登录”页面作为首页。

React Navigation 在其文档中建议了

身份验证流程。您可以按照指南创建登录流程。他们建议按状态使用条件渲染来渲染页面。

return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false
      }}
    >
      {
        isLoggedIn ?
        <Stack.Screen name={'MainContainer'} component = {MainContainer}/>
        :
        <Stack.Screen name = {'LogIn'} component = {LogIn}/>
      }
    </Stack.Navigator>
);