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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 {
"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的使用.
这里不做细说.直接上代码.
下面是基本代码结构.
react-navigation前置登录代码结构
准备工作,先把mobx+react-navigation搭建完毕之后.
我们在点击我的Tab时,对tabBar点击事件做处理即可,在点击事件里面先获取我们存在Store中的登录状态,根据状态做不同的事情,这里我未处理本地数据持久化工作,只是单纯的存在Mobx中的store中,是为了方便其他地方使用.实际开发中,我们还需要对数据进行持久化操作.
主要代码有:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/**
* 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中状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/**
* 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,
},
});

效果如图:
lead_the_login_result
源码