从 Promise（securestore）获取值以确定要渲染哪些组件

Question

我将用户 ID 存储在 Expo 的 SecureStore 中，当用户打开应用程序时，我需要检查该 ID 是否存在。如果存在则说明该用户已经注册并可以进入主页，否则该用户是新用户，需要先注册。我认为这个想法非常简单，但我无法从承诺中正确获取任何价值来确定用户应该看到哪个流程。

当我执行 console.log(id !== null) 时，我得到“false”，这是正确的，因为用户是新用户。但随后它渲染了错误的组件。所以我觉得使用“doesIdExist() ? () : ()”可能是问题所在，或者我实际上并没有在检查中返回 id !== null 。

  const getId = async () => {
    return await SecureStore.getItemAsync('userId');
  }

  const doesIdExist = async () => {
    const id = await getId();
    console.log(id !== null);
    return id!== null;
  }

  return (
      <View style={styles.container}>
        {doesIdExist() ? (
            <BottomTabNavigator style={styles.tab}/>
        ) : (
            <NavigationContainer>
              <OnboardingNavigator/>
            </NavigationContainer>
        )}
      </View>
  );

Answer 1

最好的解决方案是使用SplashScreen。初始屏幕保持可见，直到被明确告知隐藏为止。

一个简单的解决方案：

const App = () => {
  const [appReady, setAppReady] = useState(false)
  const [exist, setExist] = useState(false)

  useEffect(() => {
    (async () => {
      const id = await SecureStore.getItemAsync('userId')
      setExist(id !== null)
      setAppReady(true)
    })()
  }, [])

  const onLayout = useCallback(async () => {
    if (appReady) {
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appReady) return null

  return (
    <View style={styles.container} onLayout={onLayout}>
      {exist ? (
        <BottomTabNavigator style={styles.tab} />
      ) : (
        <NavigationContainer>
          <OnboardingNavigator />
        </NavigationContainer>
      )}
    </View>
  )
}