整个应用程序加载后如何导航到其他屏幕？

Question

美好的一天！目前正在学习 Nav 5，到目前为止，这是我尝试过的。我想根据 Firebase 登录检查的结果导航到其他屏幕。 但是会发生什么是应用程序在启动画面中呈现 3 次，我想要的是第三个或最终数据。我怎么知道应用程序何时完成重新渲染内容。 这是我尝试过的，我对 React 导航还很陌生，希望有人能指出我如何正确地做到这一点。谢谢！

APP.JS

useEffect(() => {
    const subscriber = firebase.auth().onAuthStateChanged(user => {
      let logged = false
      if (user) {
        logged = true
        firebase.firestore().collection('users')
          .doc(user.uid)
          .get()
          .then(firestoreDocument => {
            if (!firestoreDocument.exists) {
              return
            }
            const user = firestoreDocument.data()
            console.log("subs data", user)
            setUser(user)
          })
          .catch(error => {
            alert(error)
          })
      } else {
        setUser(null)
        logged = false
      }
      setIsLoggedIn(logged)
      setIsLogIncheckDone(true)
    })
    return subscriber // unsubscribe on unmount
  }, [])  
const getSomething = async () => {
    const data = {
      isLoggedIn, user, isLogInCheckDone
    }
    return data
  }

  if (!isLogInCheckDone) {
    return <SplashScreen />
  }

  return (
    <AppContext.Provider value={{ GetSomething: getSomething }}>
      <ThemeContextProvider>
        <ThemeContextConsumer>
          {context =>
            (
              <NavigationContainer>
                <Stack.Navigator theme={context.theme ? "dark" : "light"} >
                  <Stack.Screen name={"Splash"} component={SplashScreen} options={{ headerShown: false }} />
                  <Stack.Screen name={"Common"} component={CommonStackNav} options={{ headerShown: false }} />
                  <Stack.Screen name={"Auth"} component={AuthStackNav} options={{ headerShown: false }} />
                  <Stack.Screen name={"Dashboard"} component={DashboardStack} options={{ headerShown: false }} />
                  <Stack.Screen name={"Verify"} component={VerificationStackNav} options={{ headerShown: false }} />
                  <Stack.Screen name={"Wizard"} component={ProfileWizardStack} options={{ headerShown: false }} />
                </Stack.Navigator>
                <Toast ref={(ref) => Toast.setRef(ref)} />
              </NavigationContainer>
            )
          }
        </ThemeContextConsumer>
      </ThemeContextProvider>
    </AppContext.Provider>
  )
}

SPLASHSCREEN.JS

export default function SplashScreen({ navigation, route }) {
    const appContext = useContext(AppContext)

    useEffect(() => {
        const newData = appContext?.GetSomething()
        console.log("Splashy", newData)
//TODO Navigate here
    }, [appContext])
    return (
        <View style={styles.container}>
            <LottieView source={newSource} autoPlay loop />
        </View>
    )
}

Answer 1

您可以使用 app.js 中的记录状态来呈现您想要的内容。试试这样的：

 return (
    <NavigationContainer >
      {logged ? <Screens you want to render if the user is logged /> : <SplashScreen />}
    </NavigationContainer>
  );