Question

用户登录到我的应用程序后，在每次启动ComponentWillMount时，我都会使用AsyncStorage加载登录令牌，并且该屏幕始终呈现该屏幕，然后再跳至下一个屏幕。登录完成后，是否可以在登录屏幕上创建自动跳过？我正在使用createStackNavigator导航我的应用程序。

 async componentWillMount(){
 let res = await AsyncStorage.getItem("token");

 if (res !== null ){
        this.props.navigation.navigate("nextScreen");
}

}

Answer 1

首先，您必须使用createSwitchNavigator在堆栈导航中添加一些代码尝试为登录/注册屏幕创建StackNavigation，例如将其命名为AuthStack

const AuthStack = createStackNavigator(
   {
      Login: { screen: Login },
      Register: { screen: Register },
   },
   {
      initialRouteName: 'Login',
      headerMode: 'none',
   }
);

然后再次创建AppStack，将其与登录和注册以外的所有其他屏幕堆叠在一起

const AppStack = createStackNavigator(
   {
      ...
   },
   {
      ...
   }
);

然后您将需要一个AuthLoadingScreen，这是您要使用令牌检查代码的地方

现在您要做的就是使用createSwitchNavigator创建一个切换导航器，它的工作是首先调用加载屏幕并检查令牌，然后加载应用程序或登录屏幕，就像这样：

const AppNavigator = createSwitchNavigator(
   {
      AuthLoading: AuthLoadingScreen,
      App: AppStack,
      Auth: AuthStack,
   },
   {
      initialRouteName: 'AuthLoading',
   }
);

AuthLoadingScreen的代码应类似于以下内容，请使用componentDidMount而不是componentWillMount

componentDidMount = () => {
    const token = await AsyncStorage.getItem('token');
    // check if token exist or not 
    if (token) {
        this.props.navigation.navigate('App');
    } else {
      this.props.navigation.navigate('Auth');
    }
}

在其渲染方法中，您可能想添加一个微调器或仅添加“正在加载...”或任何您想要的内容。

登录屏幕在跳过之前呈现

1 个答案: