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

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