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) 

  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。