react-navigation怎么判斷用戶是否登錄跳轉到登錄頁

這篇文章將為大家詳細講解有關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) 
     
  }

關于“react-navigation怎么判斷用戶是否登錄跳轉到登錄頁”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。