Question

isSignedIn ? (
  <>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
    <Stack.Screen name="Settings" component={SettingsScreen} />
  </>
) : (
  <>
    <Stack.Screen name="SignIn" component={SignInScreen} />
    <Stack.Screen name="SignUp" component={SignUpScreen} />
  </>
)

如何从signInScreen导航到HomeScreen。

Answer 1

这些问题可以通过启动画面解决。我认为您应该将所有屏幕收集在一个标签下。然后，创建一个初始屏幕。之后，您可以在SplashScreen中控制名为isSignedIn的参数。然后，浏览所需的屏幕。

Answer 2

您可以创建一个上下文来处理身份验证流程，并在应用启动时检查是否已设置令牌或其他内容。

const Index = () => {
  const [authState, dispatch] = useAuthContext();
  useEffect(() => {
    const boostrapAsync = async () => {
      let userToken = null;
      try {
        userToken = await AsyncStorage.getItem('userToken');
      } catch (e) {
        console.log('Restoring token failed');
      }
      restoreToken({ token: userToken }, dispatch);
    };
    boostrapAsync();
  }, []);

  if (authState.isLoading) {
    return (
      <SplashScreen />
    );
  }

  return (
    <Root>
      <NavigationContainer>
        <UIProvider reducer={UIReducer} initialState={initialStateUIReducer}>
          {authState.userToken ? (
            <UserProvider reducer={UserReducer} initialState={initialStateUserReducer}>
              <AppNavigation />
            </UserProvider>
          ) : <AuthNavigation />}
        </UIProvider>
      </NavigationContainer>
    </Root>
  );
};

export default Index;

在react-navigation 5中的不同堆栈屏幕之间导航

2 个答案: