Question

我有一个登录页面，如果没有登录它现在显示问题是当有令牌时它会在进入主页之前显示登录页面一秒钟我如何阻止它这样做

我正在使用 useLayoutEffect 并尝试从 friebase 和 asyncStorge 获取令牌，那里允许延迟

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>
  );
}

Answer 1

您可以添加加载状态并显示一些内容，直到您获得令牌。

const [loading, setLoading] = useEffect(true)

useEffect(()=>{if(userToken){setLoading(false)}},[userToken]

return (
    {loading?<LOADING INDICATION>:{userToken?ect}}
)

我有反应导航身份验证流程的问题

1 个答案: