react-navigation 如何判断用户是否登录跳转到登录页的方法


Posted in Javascript onDecember 01, 2017

本文介绍了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) 
     
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。   

Javascript 相关文章推荐
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
jQuery DOM操作实例
Mar 05 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
js微信分享API
Oct 11 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
Vue.use源码学习小结
Jun 20 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 #Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 #Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 #Javascript
浅谈angular4实际项目搭建总结
Dec 01 #Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 #Javascript
微信小程序表单验证功能完整实例
Dec 01 #Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 #Javascript
You might like
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
详解Python 函数如何重载?
2019/04/23 Python
Django实现跨域请求过程详解
2019/07/25 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
浅谈Python中的继承
2020/06/19 Python
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
手术室护士节演讲稿
2014/08/27 职场文书
采购员岗位职责范本
2015/04/07 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
今日说法观后感
2015/06/08 职场文书
在职证明书模板
2015/06/15 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python