react-navigation 은 사용자 가 로그 인 할 지 안 할 지 로그 인 페이지 로 이동 하 는 방법 을 어떻게 판단 합 니까?

본 고 는 react-navigation 이 사용자 의 로그 인 여 부 를 판단 하여 로그 인 페이지 로 이동 하 는 방법 을 소개 하고 여러분 에 게 공유 하 며 자신 에 게 도 필 기 를 남 깁 니 다.구체 적 으로 다음 과 같 습 니 다.
index.js 새로 만 들 기

import React, {Component} from 'react'; 
import {AppRegistry, Text, View, Button,Image,StyleSheet,BackHandler,ToastAndroid} from 'react-native'; 
import { StackNavigator,TabNavigator,NavigationActions } from 'react-navigation'; 
 
 
 
//     
import stroage from './StorageUtil'; 
import './Global' 
 
import IndexScreen from './Index' 
import MeScreen from './Me' 
import Login from './Login' 
 
 
//        
const MainScreenNavigator = TabNavigator({ 
    IndexScreen: { 
      screen: IndexScreen, 
      navigationOptions: { 
        tabBarLabel: '  ', 
        headerLeft:null,//       
        tabBarIcon: ({ tintColor }) => ( 
          <Image 
            source={require('./img/ic_image.png')} 
            style={[styles.icon, {tintColor: tintColor}]} 
          /> 
        ), 
        onNavigationStateChange:(()=> alert("  ")) 
        // initialRouteName:'IndexScreen' 
      }, 
    }, 
     
    MeScreen: { 
      screen: MeScreen, 
      navigationOptions: { 
        tabBarLabel:'  ', 
        tabBarIcon: ({ tintColor }) => ( 
          <Image 
            source={require('./img/ic_me.png')} 
            style={[styles.icon, {tintColor: tintColor}]} 
          /> 
        ), 
        // initialRouteName:'MeScreen' 
      } 
    } 
  }, 
  { 
    // trueinitialRouteName:'MeScreen',//          
    // initialRouteName:'MeScreen', 
    lazy:true,//            ，     ，    app               ，  false,   true 
    // order: ['IndexScreen','FindScreen','ListNewScreen','MeScreen'], //order    tab     ，     
    animationEnabled: false, //              
    tabBarPosition: 'bottom', //      ，android             
    swipeEnabled: false, //           tab 
    // backBehavior: 'none', //   back          Tab(  )， none      
    tabBarOptions: { 
      activeTintColor: '#2196f3', //           
      inactiveTintColor: '#999', //            
      showIcon: true, // android       icon,       true      
      indicatorStyle: { 
        height: 0 //  TabBar        ，      0    
      }, 
      style: { 
        backgroundColor: '#fff', // TabBar     
        height: 60 
      }, 
      labelStyle: { 
        fontSize: 14, //      
        marginTop:2 
        // lineHeight:44 
      }, 
    } 
  }); 
 
//       
const FirstApp = StackNavigator({ 
  IndexScreen: { 
    screen: MainScreenNavigator, 
    // initialRouteName: 'IndexScreen' 
  }, 
  MeScreen: {screen: MeScreen}, 
  Login:{screen: Login}, 
   
}, { 
  initialRouteName: 'IndexScreen', //        
  navigationOptions: { //          ,          static navigationOptions   (        ) 
    headerStyle:{elevation: 0,shadowOpacity: 0,height:48,backgroundColor:"#2196f3"}, 
    headerTitleStyle:{color:'#fff',fontSize:16}, //alignSelf:'center'      
    headerBackTitleStyle:{color:'#fff',fontSize:12}, 
    // headerTintColor:{}, 
    gesturesEnabled:true,//          ，iOS    ，       
  }, 
  mode: 'card', //       ,    card(   iOS  push  ),    modal(   iOS  modal  ) 
  headerMode: 'screen', //         , screen:        , float:      , none:       
  onTransitionStart: (Start)=>{console.log('       ');}, //    
  onTransitionEnd: ()=>{ console.log('       '); } //    
}); 
// 
const defaultGetStateForAction = FirstApp.router.getStateForAction; 
 
FirstApp.router.getStateForAction = (action, state) => { 
  //   MeScreen   global.user.loginState = false || ''（   ） 
  if (action.routeName ==='MeScreen'&& !global.user.loginState) { 
    this.routes = [ 
      ...state.routes, 
      {key: 'id-'+Date.now(), routeName: 'Login', params: { name: 'name1'}}, 
    ]; 
    return { 
      ...state, 
      routes, 
      index: this.routes.length - 1, 
    }; 
  } 
  return defaultGetStateForAction(action, state); 
}; 
 
 
export default class FirstAppDemo extends Component { 
  render() { 
    return ( 
      <FirstApp /> 
    ); 
  } 
} 
 
AppRegistry.registerComponent('FirstApp', () => FirstAppDemo); 
 
 
const styles = StyleSheet.create({ 
  icon: { 
    width: 26, 
    height: 26, 
  }, 
}); 

전역 저장 소 를 새로 만 듭 니 다 StorageUtil.js

import React, {Component} from 'react'; 
import {AsyncStorage} from 'react-native'; 
import Storage from 'react-native-storage'; 
 
var storage = new Storage({ 
  //     ，   1000        
  size: 1000, 
 
  //     ：  RN  AsyncStorage，  web  window.localStorage 
  //                 ，       
  storageBackend: AsyncStorage, 
 
  //       ，     （1000 * 3600 * 24   ），  null      
  defaultExpires: 1000 * 3600 * 24, 
 
  //            。    。 
  enableCache: true, 
 
  //   storage       ，      ， 
  //        sync  ，        。 
  // sync              
  //              sync    
  //           ，  require   
  //        ，   storage.sync       
  //sync: require('./sync') //   sync          
}) 
 
//             （     ）storage  ，       
 
//   web 
// window.storage = storage; 
 
//   react native 
// global.storage = storage; 
 
//   ，  **  **            storage 
//   ：          ，    
//         storage      
//    global.storage = storage             
 
//        
global.storage = storage; 

          Global.js，           
 
//       
global.user = { 
  loginState:'',//     
  userData:'',//     
}; 
//               
storage.load({ 
  key: 'loginState', 
}).then(ret => { 
  global.user.loginState = true; 
  global.user.userData = ret; 
}).catch(err => { 
  global.user.loginState = false; 
  global.user.userData = ''; 
}) 

로그 인 구성 요소 Login.js

_login() {//     
    // debugger; 
    ToastUtil.show("    "); 
    //   key     。            ，       。 
    //        ，          ，        。 
    storage.save({ 
      key: 'loginState', //   :    key   _     ! 
      data: { 
        userid: '1001', 
        userName:'userName', 
        token: 'token' 
      }, 
 
      //          ，    defaultExpires   
      //     null，      
      // 8       
      expires: 1000 * 3600 * 8 
    }); 
    global.user.loginState = true;//       
    global.user.userData = { userid: '1001', userName:'userName', token: 'token'};//       
 
    setTimeout(()=>{ 
      this.props.navigation.navigate('UserScreen')//        
    },2000) 
     
  }

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.