用户登录React Native后如何更改初始屏幕？

Question

我正在使用react-native router-flux在应用中进行导航。如何更改已登录用户的初始屏幕？当前，成功登录后，用户将定向到firstScreen。但是，在我关闭并重新打开该应用程序之后，初始屏幕将是登录屏幕，因为我已将其设置为Main中的初始屏幕。如果用户退出注销但没有退出应用程序，我想显示firstScreen。如何根据情况进行更改。我正在使用AsyncStorage保存userid。但是在关闭应用程序并再次打开它（未注销）后，AsyncStorage的控制台o / p在未登录的情况下是不确定的。 Main的代码。请帮助我做到这一点。

  

   import React, { Component } from 'react';
    import {KeyboardAvoidingView, View, ActivityIndicator, AsyncStorage} from 'react-native';
    import { Router, Scene, Actions, ActionConst } from 'react-native-router-flux';

    import LoginScreen from './LoginScreen';
    import RegisterScreen from './RegisterScreen';
    import FirstScreen from './FirstScreen';
    import ViewStatus from './ViewStatus';
    import UserVerification from './UserVerification';

    export default class Main extends Component{
    	 constructor() {
    		super();
    		this.state = { hasToken: false, isLoaded: false };
    	}

    	componentDidMount() {
        AsyncStorage.getItem('userid').then((token) => {
          this.setState({ hasToken: token !== null, isLoaded: true })
        });
      }
       async onPressLogout() {
	 try {
		 await AsyncStorage.removeItem('userid');
		 Alert.alert('Logout Success!');
		 Actions.loginScreen();
	 } catch (error) {
		 console.log('AsyncStorage error: ' + error.message);
	 }
 }
    	render(){
    		console.log(this.hasToken);
    		  if (this.state.isLoaded) {

    		       return (
    		              	<Router>
 		 			<Scene key="root">

 		 				 <Scene key="loginScreen"
 		 					 component={LoginScreen}
 		 					 animation='fade'
 		 					 hideNavBar={true}
 		 					 initial={true}
 		 				 />
						 </Scene>
						</Router>
    		      )
    		    }
    	else{
    		return(
    			<Router>

    			  <Scene key="root">

    				<Scene key="firstScreen"
    				component={FirstScreen}
    				hideNavBar= {false}
    				onRight={()=>this.onPressLogout()}
            rightTitle={' Logout'}
    			  renderBackButton={()=>(null)}
    				animation='fade'
    				/>

             <Scene key="viewStatus"
    				 component={ViewStatus}
    				 hideNavBar={false}

    				  />
            <Scene key="userVerification"
    				component={UserVerification}
    				hideNavBar={true}

    				/>
    			 </Scene>
    		 </Router>
    	 );
    	 	}
    	}
    }

Answer 1

如果您有启动画面，则可以在那里轻松控制令牌（或存储的内容以控制用户是否登录）。我不确定是否可以通过路由器执行此操作，但是使用javascript可以很容易地处理它。

这是我存储令牌的方式

AsyncStorage.setItem("token", this.state.token);

路线

<Scene>
   <Scene key="splashScreen" component={SplashScreen}/>
   <Stack key="root" hideNavBar>                       
      <Scene key="login" component={Login} initial/>
      <Scene key="signup" component={Signup}/>
   </Stack>
   <Scene tabs key="tabbar">
      <Stack
         key="tab1"
         initial
      >
      ....
   </Scene>
</Scene>

下面的代码来自我的一个项目。标签栏是我的主屏幕。 （您的情况是firstScreen）

import { NavigationActions } from 'react-navigation';
import {Actions} from 'react-native-router-flux';

let route = ''
    try {
      AsyncStorage.getItem('token').then((token) => {
        if (token !== null){
          axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
          route = 'tabbar'
        }
        else {
          route = 'login'
        }
      }); 
    } catch (error) {
      console.log(error);
    }

   if(route == 'tabbar') {
      Actions.tabbar();
   }
   else { // go to login
      let toHome = NavigationActions.reset({
         index: 0,
         actions: [NavigationActions.navigate({routeName: 'root'})]
      });
      this.props.navigation.dispatch(toHome);
   }