如何修复三元导航中呈现的两个页面 return

Question

我正在尝试实现持久登录会话以与 firebase 做出反应，它工作得很好，但我在初始状态和组件的重新呈现方面有问题， currentUser 它是 null 然后来自 useAuth 组件的 useEffect 呈现并检查它是否是登录用户，并将 currentUser 设置为真实值。

useAuth 组件：

  useEffect(() => {
    console.log("Rerendered useAuth");

    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        console.log("We are authenticated now!");
        setCurrentUser(user);
      } else {
        console.log("The user is not logged!");
        setCurrentUser(null);
      }
    });
    // Cleanup subscription on unmount
    return () => unsubscribe();
  }, []);

导航中的三元return：

function MainNavigator() {
  const { currentUser } = useAuth();
  const Stack = createNativeStackNavigator();

  return (
    <Stack.Navigator
      screenOptions={{ headerShown: false }}
      initialRouteName={RoutesEnum.landing}
    >
      {currentUser ? (     // null at first, then truthy
        <>
          <Stack.Screen
            name={RoutesEnum.tabNavigator}
            component={TabNavigator}
          />
          <Stack.Screen name={RoutesEnum.stories} component={Stories} />
        </>
      ) : (
        <>
          <Stack.Screen name={RoutesEnum.landing} component={Landing} />
          <Stack.Screen name={RoutesEnum.login} component={Login} />
          <Stack.Screen name={RoutesEnum.register} component={Register} />
          <Stack.Screen name={RoutesEnum.myAccount} component={MyAccount} />
          <Stack.Screen
            name={RoutesEnum.forgotPassword}
            component={ResetPassword}
          />
        </>
      )}
    </Stack.Navigator>
  );
}

问题：

首先呈现登录页面（几毫秒），因为初始状态是 null，然后呈现 useAuth 并使用 useEffect 记录用户，然后导航到主页。

我该如何解决这个渲染两个屏幕的问题

Answer 1

检查您的“useAuth”挂钩 returns 是否是 loading 道具，通常应该如此。然后你会得到这样的东西：

const { currentUser, loading } = useAuth();
const Stack = createNativeStackNavigator();

if (loading) return null;

return (
// ... rest of your code

你也可以if (loading) return <LoadingPage/>如果你构建一个这样的组件

如何修复三元导航中呈现的两个页面 return

How fix two pages render in ternary navigation return

persistent

conditional-statements

rerender

firebase

reactjs