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

前端之家收集整理的这篇文章主要介绍了react-navigation 如何判断用户是否登录跳转到登录页的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了react-navigation 如何判断用户是否登录跳转登录页的方法分享给大家,也给自己留个笔记,具体如下:

新建一个index.js

//全局存储
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,// 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 (

); } }

AppRegistry.registerComponent('FirstApp',() => FirstAppDemo);

const styles = StyleSheet.create({
icon: {
width: 26,height: 26,});

新建一个全局存储StorageUtil.js

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

setTimeout(()=>{ this.props.navigation.navigate('UserScreen')//<a href="https://www.jb51.cc/tag/tiaozhuan/" target="_blank" class="keywords">跳转</a>到<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a><a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a> },2000)

}

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

原文链接:https://www.f2er.com/js/34914.html

猜你在找的JavaScript相关文章