在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) }
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
在javascript中详细解读Function函数(详细教程)
使用AngularJS2与D3.js集成如何实现自定义可视化
以上是在react-navigation中如何判断用户是否登录跳转到登录页的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

当你在自己电脑上登过别人steam账号之后,恰巧这个别人的账号也有wallpaper软件,切换回自己账号之后steam就会自动下载别人账号订阅的壁纸,用户可以通过关闭steam云同步解决。wallpaperengine登录别的号后下载别人的壁纸怎么办1、登陆你自己的steam账号,在设置里面找到云同步,关闭steam云同步。2、登陆你之前登陆的别人的steam账号,打开wallpaper创意工坊,找到订阅内容,然后取消全部订阅。(以后防止找不到壁纸,可以先收藏再取消订阅)3、切换回自己的stea

随着社交媒体的迅速发展,小红书已经成为许多年轻人分享生活、探索新产品的热门平台。在使用过程中,有时用户可能会遇到登录以前账号的困难。本文将详细探讨如何解决小红书登录旧账号的问题,以及如何应对更换绑定后可能遗失原账号的情况。一、小红书怎么登录以前的账号?1.找回密码登录如果长时间未登录小红书,可能导致账号被系统回收。为了恢复访问权限,你可以尝试通过找回密码的方式重新登录账号。操作步骤如下:(1)打开小红书App或官网,点击“登录”按钮。(2)选择“找回密码”。(3)输入你注册账号时所使用的手机号码

Discuz后台登录问题解决方法大揭秘,需要具体代码示例随着互联网的快速发展,网站建设变得越来越普遍,而Discuz作为一款常用的论坛建站系统,受到了许多站长的青睐。然而,正是因为其功能强大,有时候我们在使用Discuz的过程中会遇到一些问题,比如后台登录问题。今天,我们就来大揭秘Discuz后台登录问题的解决方法,并且提供具体的代码示例,希望能帮助到有需要

山野间万鬼嘶鸣,隐没兵刃交接之声,越岭奔赴而来的鬼将,心中战意汹涌,以炎火为号,率百鬼冲锋迎战。【炽焱百炼•茨木童子典藏皮肤上线】鬼角炽焰怒燃,鎏金眼眸迸发桀骜战意,白玉甲片装点战袍,彰显大妖不羁狂放的气势。雪白飘扬的袖摆上,赤焰攀附交织,金纹烙印其中,燃点一片绯艳妖异色彩。妖力凝聚而成的鬼火咆哮而至,烈焰令群峦为之震动,炼狱间归来的妖鬼啊,一同惩戒进犯之人吧。【专属动态头像框•炽焱百炼】【专属插画•焰火将魂】【传记鉴赏】【获取方式】茨木童子典藏皮肤·炽焱百炼将于12月28日维护后上架皮肤商店,

近日有一些小伙伴咨询小编快手电脑版怎么登录?下面就为大家带来了快手电脑版的登录方法,有需要的小伙伴可以来了解了解哦。第一步:首先在电脑的浏览器上百度搜索快手官网。第二步:在搜索结果列表里面选取第一条。第三步:进入到快手官网主页面后,点击视频的选项。第四步:点击右上角的用户头像。第五步:在弹出的登录菜单里面点击二维码登录。第六步:之后打开手机上的快手,点击左上角的图标。第七步:点击二维码标志。第八步:在我的二维码界面点击右上角的扫描图标之后,扫描电脑上的二维码即可。第九步:最后电脑版的快手就登录成

如何利用React和RabbitMQ构建可靠的消息传递应用引言:现代化的应用程序需要支持可靠的消息传递,以实现实时更新和数据同步等功能。React是一种流行的JavaScript库,用于构建用户界面,而RabbitMQ是一种可靠的消息传递中间件。本文将介绍如何结合React和RabbitMQ构建可靠的消息传递应用,并提供具体的代码示例。RabbitMQ概述:

ReactRouter使用指南:如何实现前端路由控制随着单页应用的流行,前端路由成为了一个不可忽视的重要部分。ReactRouter作为React生态系统中最受欢迎的路由库,提供了丰富的功能和易用的API,使得前端路由的实现变得非常简单和灵活。本文将介绍ReactRouter的使用方法,并提供一些具体的代码示例。安装ReactRouter首先,我们需

夸克怎么登录两个设备?夸克浏览器是支持同时登陆两个设备的,但是多数的小伙伴不知道夸克浏览器如何登陆两个设备,接下来就是小编为用户带来的夸克登陆两个设备方法图文教程,感兴趣的用户快来一起看看吧!夸克浏览器使用教程夸克怎么登录两个设备1、首先打开夸克浏览器APP,主页面点击【夸克网盘】;2、接着进入到夸克网盘界面,选择【我的备份】服务功能;3、最后选择其中的【切换设备】即可更换新设备登陆两个。
