react-navigation前置登录

好多应用都需要涉及到前置登录,今天就来实操一下.所用的库有
react-natigation导航库和mobx状态管理库.

这里贴一下各库的使用版本:

 {
  "name": "lead_the_login",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "mobx": "^4.3.0",
    "mobx-react": "^5.1.2",
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-navigation": "1.5.3"
  },
  "devDependencies": {
    "babel-jest": "23.0.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-react-native": "4.0.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "jest": "23.1.0",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

前置登录主要使用的是react-navigation的tabbar的点击事件.
使用方法可以看 react navigation官方网站 或者 兔佬的简书,至于mbox和react-navigation的使用可以参考之前写的这篇文章:Mobx和react-navigation的使用.
这里不做细说.直接上代码.
下面是基本代码结构.

准备工作,先把mobx+react-navigation搭建完毕之后.
我们在点击我的Tab时,对tabBar点击事件做处理即可,在点击事件里面先获取我们存在Store中的登录状态,根据状态做不同的事情,这里我未处理本地数据持久化工作,只是单纯的存在Mobx中的store中,是为了方便其他地方使用.实际开发中,我们还需要对数据进行持久化操作.
主要代码有:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';
import { observer, inject } from 'mobx-react'
import { action, autorun, computed } from 'mobx'
import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
    index: 0,
    actions: [
        NavigationActions.navigate({routeName: 'Tab', params: {}})
    ]
})



@inject('rootStore')
@observer
export default class TwoView extends Component<Props> {

    static navigationOptions = ({ navigation }) => ({
        header:null,
        tabBarOnPress: (tab) => {    //让tabBar可点击,做前置登录
            // navigation.state.params.navigatePress()
            tab.jumpToIndex(tab.scene.index)
        },
    });

    render() {
        return (
            <View style={styles.container}>
                <Text>
                    登录状态:{this.loginStatus ? '已经登录' : '未登录'}
                </Text>

                <Text onPress={()=>this.loginOutAction()}>
                    注销
                </Text>
            </View>
        );
    }

    @computed get loginStatus() {
        return this.props.rootStore.TwoStore.allDatas.loginStatus;
    }


    componentDidMount() {
        this.props.navigation.setParams({ navigatePress: this.needLogin() })  // 使用这个来调用this
    }

    /**
     * 判断是否需要登录
     * */
    needLogin =() =>{
        //判断登录
        console.log('loginStatus')
        console.log(this.loginStatus)
        if(this.loginStatus){
            //已经登录
            return;
        }else {
            //未登录 跳转至登录界面
            this.props.navigation.navigate('LoginView',{callback:()=>this.getPersonalInfo()})
        }
    }

    /**
     * 登录成功的回调方法
     * */
    getPersonalInfo =() =>{
        // 请求数据赋值即可
    }


    loginOutAction =() =>{
        //注销登录 清空本地化数据 和 重置store中的loginStatus
        this.props.rootStore.TwoStore.allDatas.loginStatus = false
        this.props.navigation.dispatch(resetAction);
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

和登录之后修改store中状态

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';
import { observer, inject } from 'mobx-react'
import { action, autorun, computed } from 'mobx'


@inject('rootStore')
@observer
export default class LoginView extends Component<Props> {
    static navigationOptions = ({ navigation }) => ({
        header:null,
    });

    render() {
        return (
            <View style={styles.container}>
                <Text onPress={()=>this.loginAction()}>
                    登录
                </Text>

            </View>
        );
    }

    /**
     * 登录/注销 可以在store里面执行也可以直接在这里执行,看你习惯
     * */
    loginAction =() =>{
        //登录请求

        //成功之后,修改loginStatus.本地化数据等等
        this.props.rootStore.TwoStore.allDatas.loginStatus = true

        //返回上一个界面,并回调刷新
        this.props.navigation.goBack()
        this.props.navigation.state.params.callback();

    }



}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

效果如图:

源码