本文介绍了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)
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“react-navigation 如何判断用户是否登录跳转到登录页的方法”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新动态
2026年05月02日
2026年05月02日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]