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 }) => (
                    
                ),
                onNavigationStateChange:(()=> alert("首页"))
               // 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(首页), 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

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)
        
    }








你可能感兴趣的:(React,Native)