我有一个 deley 导航到主页反应本机

Question

打开应用程序时有一个令牌，它会显示登录页面一秒钟，然后再转到主页如何阻止它这样做

代码

export default function Navigation() {
  const [userToken, setUserToken] = useState(null);
  // const Token = useSelector((store) => store.userState.userToken);
  const isDarkTheme = useSelector((store) => store.themeState.Theme);
  const dispatch = useDispatch();

  useLayoutEffect(() => {
    let mounted = true;
    firebase.auth().onAuthStateChanged((user) => {
      if (mounted) {
        if (user) {
          setUserToken(JSON.stringify(user.uid));
        } else {
          setUserToken(null);
        }
      }
    });
    dispatch(getTheme());
    // dispatch(getToken());
    return function cleanup() {
      mounted = false;
    };
  }, [userToken]);

  const theme = isDarkTheme ? CustumDarkTheme : CustumDefaultTheme;

  const Stack = createStackNavigator();
  return (
    <Provider theme={theme}>
      <NavigationContainer theme={theme}>
        {userToken ? (
          <Stack.Navigator screenOptions={{ headerTitle: (props) => <Header {...props} /> }}>
            <Stack.Screen name="Home" component={TabNavigation} />
            <Stack.Screen
              name="Profile"
              component={Profile}
              options={({}) => ({
                gestureEnabled: true,
                cardOverlayEnabled: true,
                ...TransitionPresets.ModalPresentationIOS,
                headerShown: false,
              })}
            />
            <Stack.Screen
              name="PatientDetails"
              component={PatientDetails}
              options={({}) => ({
                gestureEnabled: true,
                cardOverlayEnabled: true,
                ...TransitionPresets.ModalPresentationIOS,
                headerShown: false,
              })}
            />
          </Stack.Navigator>
        ) : (
          <Stack.Navigator initialRouteName="Start" screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Start" component={Start} />
            <Stack.Screen name="LogIn" component={LogIn} />
            <Stack.Screen name="Register" component={Register} />
          </Stack.Navigator>
        )}
      </NavigationContainer>
    </Provider>
  );

.................................

我尝试使用 LayoutEffect 并从 asyncStorge 获取令牌，但它允许在更新状态之前使用初始状态值 ..........

Answer 1

这里唯一的解决方案是拥有 3 个状态。

身份验证未定义 - 加载页面空白
auth null - 登录页面
存在身份验证 - 已登录页面

将初始状态更新为未定义 -

const [userToken, setUserToken] = useState(undefined);

然后添加条件，如 -

<NavigationContainer theme={theme}>
  {userToken === undefined     ? /** navigator with loader  **/ : null}
  {userToken === null          ? /** navigator with login   **/ : null}
  {typeof userToken === string ? /** navigator with profile **/ : null}
</NavigationContainer>

您可以使用另一个状态变量来保存更多已定义的值（例如 0, 1, 2 用于 3 个状态）。您可以决定实施细节。

我有一个 deley 导航到主页反应本机

I have a deley navigating to the home page react native

reactjs

react-native

react-navigation