从异步存储中获取 initialRouteName 时出现问题

Question

我是 React 的新手，希望您能多多包涵。

我想在用户第一次打开应用程序时向他们展示引导屏幕。第二次，我想显示登录屏幕。

我的做法是更改OnboardingStack.Navigator中的initialRouteName。在第一次启动时它应该是 'Onboarding' 在第二次启动时 'Login'。我正在使用 asycnStorage 来存储这些值。

应用程序打开后，'Login' 将添加到 LaunchStatusKey。在第二次打开时，它应该注册 LaunchStatusKey 实际上是 'Login'，这应该继续并将 initialRouteName 设置为 'Login'。但这是行不通的。

我怀疑在等待和启动我的应用程序之间存在时间延迟，在它可以获取 LaunchStatusKey 并将 initialRouteName 设置为 'Login' 之前，它启动并使用默认值 'Onboarding'

关于如何解决这个问题有什么想法吗？

感谢阅读！

const OnboardingStack = createStackNavigator();

const App = ({ navigation }) => {

  const [initialRouteName, setInitialRouteName] = useState('')

  const save = async () => {
    try {
      await AsyncStorage.setItem("launchStatusKey", initialRouteName)
    } catch (err) {
      alert(err);
    }
  };
  save();

  const load = async () => {
    try {
      let key = await AsyncStorage.getItem("launchStatusKey")
      if (key === null) {
        console.log('It is empty')
        setInitialRouteName('Login')
      } else {
        console.log('It is not empty')

      }
    } catch (err) {
      alert(err);
    }
  }; 

  useEffect(() => {
    load();
  },);

  return (
    <NavigationContainer>
      <OnboardingStack.Navigator initialRouteName={initialRouteName}>
        <OnboardingStack.Screen name="Onboarding" component=         {OnboardingScreen} />
        <OnboardingStack.Screen
          name="Login"
          component={LoginScreen}
          options={{ header: () => null }}
        />
        <OnboardingStack.Screen
          name='SignUp'
          component={SignUpScreen}
        />
        <OnboardingStack.Screen
          name='Home'
          component={AppTabsScreen}
        />
        <OnboardingStack.Screen
          name={'Loading'}
          component={LoadingScreen}
        />
      </OnboardingStack.Navigator>
    </NavigationContainer>
  );
}

Answer 1

您可以使用您的状态来检查存储中的密钥是否已加载：

const [statusKeyLoaded, setStatusKeyLoaded] = useState(false)

加载密钥后，将此状态设置为 true：

let key = await AsyncStorage.getItem("launchStatusKey")
setStatusKeyLoaded(true)

然后仅当您知道您的密钥已加载时才呈现视图：

return (
   <>
    {statusKeyLoaded && (
    <NavigationContainer>
       ....
    </NavigationContainer> )}
   </>

从异步存储中获取 initialRouteName 时出现问题

Problems fetching initialRouteName from Async Storage

javascript

react-native

asyncstorage

react-navigation