React native 在跳过之前显示登录屏幕_React Native

React native 在跳过之前显示登录屏幕

react-native

React native 在跳过之前显示登录屏幕,react-native,React Native,用户登录到我的应用程序后，我在ComponentWillMount上每次启动时都使用AsyncStorage加载一个登录令牌，屏幕总是在跳转到下一个屏幕之前呈现屏幕。登录完成后，是否有办法在登录屏幕上创建自动跳过？我正在使用createStackNavigator导航我的应用程序 async componentWillMount(){ let res = await AsyncStorage.getItem("token"); if (res !== null ){ th

用户登录到我的应用程序后，我在ComponentWillMount上每次启动时都使用AsyncStorage加载一个登录令牌，屏幕总是在跳转到下一个屏幕之前呈现屏幕。登录完成后，是否有办法在登录屏幕上创建自动跳过？我正在使用createStackNavigator导航我的应用程序

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

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

}

首先，您必须使用

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

在其渲染方法中，您可能需要添加微调器或只是“加载…”或任何您想要的内容。