Обработка авторизованных пользователей в React native в StackNavigator

Question

У меня есть код, который выглядит следующим образом:

function RootNavigator() {
  const [isLoggedIn, setIsLoggedIn] = useState(false)

  isUserLoggedIn().then((someBoolean) => {
    setIsLoggedIn(someBoolean)
  })
  
    console.log("LOGEED IN STSTE:", isLoggedIn)
   return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      {isLoggedIn || <Stack.Screen name="Root" component={WelcomeScreen} />}
      {isLoggedIn && <Stack.Screen name="InvestorProfileQuiz" component={InvestorProfileQuizScreen} />}
      {isLoggedIn || <Stack.Screen name="AppTour" component={AppTourScreen} />}
      {isLoggedIn || <Stack.Screen name="Login" component={LoginScreen} />}
      {isLoggedIn || <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />}
    </Stack.Navigator>
  );
}

Итак, проблема в том, что при рендеринге часть состояния isLoggedIn ложна, а затем рендерится первая страница WelcomeScreen. Экран мерцает, затем isLoggedIn изменяется на true, а затем InvestorProfileQuiz отображается правильно. Как убедиться, что метод async / await isUserLoggedIn() разрешается перед рендерингом дочерних элементов StackNavigtor?

Answer 1

Вот как я обычно обрабатываю состояние входа и выхода.

function RootNavigator() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // Passing an empty array as second argument
  // makes useEffect behave like componentDidMount
  useEffect(() => {
    
    // Wrap logic in the async init function
    // since the useEffect callback can't be async
    async function init() {
      const someBoolean = await isUserLoggedIn();
      setIsLoggedIn(someBoolean);
    }
    init();
  }, []);

  // Return null or your logged out screen component here.
  if (!isLoggedIn) {
    return null;
  }

  return (
    <Stack.Navigator screenOptions={{headerShown: false}}>
      <Stack.Screen name="Root" component={WelcomeScreen} />}
      <Stack.Screen
        name="InvestorProfileQuiz"
        component={InvestorProfileQuizScreen}
      />
      <Stack.Screen name="AppTour" component={AppTourScreen} />
      <Stack.Screen name="Login" component={LoginScreen} />(
      <Stack.Screen
        name="NotFound"
        component={NotFoundScreen}
        options={{title: 'Oops!'}}
      />
    </Stack.Navigator>
  );
}