登录屏幕在跳过之前呈现

Question

用户登录到我的应用程序后，我在 ComponentWillMount 中的每个启动时使用 AsyncStorage 加载登录令牌，并且屏幕始终在跳到下一个屏幕之前呈现屏幕。有没有办法在登录完成后在登录屏幕上创建自动跳过？我正在使用createStackNavigator来导航我的应用程序。

 async componentWillMount(){
 let res = await AsyncStorage.getItem("token");
 if (res !== null ){
        this.props.navigation.navigate("nextScreen");
}

}

Answer 1

首先，您必须使用 createSwitchNavigator 在堆栈导航中添加一些代码尝试为登录/注册屏幕创建堆栈导航，例如调用它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');
    }
}

在其渲染方法中，您可能希望添加一个微调器或只是"正在加载..."。或任何你想要的。