react-亚博电竞手机版

这篇文章将为大家详细讲解有关react-navigation怎么判断用户是否登录跳转到登录页，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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

新建一个index.js

importreact,{component}from'react'; import{appregistry,text,view,button,image,stylesheet,backhandler,toastandroid}from'react-native'; import{stacknavigator,tabnavigator,navigationactions}from'react-navigation';    //全局存储 importstroagefrom'./storageutil'; import'./global'  importindexscreenfrom'./index' importmescreenfrom'./me' importloginfrom'./login'   //底部菜单栏设置 constmainscreennavigator=tabnavigator({ indexscreen:{ screen:indexscreen, navigationoptions:{ tabbarlabel:'亚博vip888首页', headerleft:null,//去除返回按钮 tabbaricon:({tintcolor})=>(  ), onnavigationstatechange:(()=>alert("亚博vip888首页")) //initialroutename:'indexscreen' }, },  mescreen:{ screen:mescreen, navigationoptions:{ tabbarlabel:'我的', tabbaricon:({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(亚博vip888首页)，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 }, } });  //跳转路由设置 constfirstapp=stacknavigator({ indexscreen:{ screen:mainscreennavigator, //initialroutename:'indexscreen' }, mescreen:{screen:mescreen}, login:{screen:login},  },{ initialroutename:'indexscreen',//默认显示界面 navigationoptions:{//屏幕导航的默认选项,也可以在组件内用staticnavigationoptions设置(会覆盖此处的设置) 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('导航栏切换结束');}//回调 }); // constdefaultgetstateforaction=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, }; } returndefaultgetstateforaction(action,state); };   exportdefaultclassfirstappdemoextendscomponent{ render(){ return(  ); } }  appregistry.registercomponent('firstapp',()=>firstappdemo);   conststyles=stylesheet.create({ icon:{ width:26, height:26, }, });

新建一个全局存储storageutil.js

importreact,{component}from'react'; import{asyncstorage}from'react-native'; importstoragefrom'react-native-storage';  varstorage=newstorage({ //最大容量，默认值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;  //对于reactnative //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怎么判断用户是否登录跳转到登录页”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。