今天,学习下RN中的另外一个全家桶套餐架构:Mobx+React-Navigation,
本文基于react-native:0.55.4,Mbox:^4.3.0,react-navigation:^2.0.1所撸.

Mbox中文文档
另外一个基于Mbox和react-navigation的不错项目

废话不多缩,首先,新建一个项目,添加相应库:
npm i mobx mobx-react --save 引入Mbox

npm i babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 --save-dev 能够使用@标签

npm i react-navigation --save 引入导航库
然后修改一下工程里面的.babelrc:

1
2
3
4
{
"presets": ["react-native"],
"plugins": ["transform-decorators-legacy"]
}

OK,基本的架子已经搭好.
然后新建一个src目录.这里存放基本代码和基本图片之类的.
mobx项目demo结构

然后,在入口文件App.js中,先搭建tabBar和导航条.使用react-navigation
这里,我使用全局注册并注入mobx,其他地方都可以使用store.
import {Provider} from 'mobx-react';
然后在src->Mobx这里新建一个根store的Store.js文件.
Store.js

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
import { observable, computed, action } from 'mobx'
import oneInfo from './OneInfo'
import twoInfo from './TwoInfo'

/**
* 根store
* OneInfo OneInfo数据
* TwoInfo TwoInfo数据
*/
class RootStore {

constructor() {
this.OneInfo = new OneInfo(oneInfo,this)
this.TwoInfo = new TwoInfo(twoInfo,this)
}
}
// One
class OneInfo {
@observable
allDatas = []
constructor(data,rootStore) {
this.allDatas = data
this.rootStore = rootStore
}
//加
@action
add(num) {
this.allDatas.oneNum = num + 1
this.rootStore.TwoInfo.allDatas.twoColor = 'red'
}
//减
@action
sub(num) {
this.allDatas.oneNum = num - 1
this.rootStore.TwoInfo.allDatas.twoColor = 'blue'
}
}

// Two
class TwoInfo {
@observable
allDatas = {}
constructor(data,rootStore) {
this.allDatas = data
this.rootStore = rootStore
}
}


export default new RootStore()

另外:

OneInfo.js

1
2
3
4
5
6
7
8
9
const OneInfo =  {
"data": [

],
"isOne" : true,
"oneNum" : 0
}

export default OneInfo;

TwoInfo.js

1
2
3
4
5
6
7
8
9
const TwoInfo =  {
"data": [

],
"isTwo" : false,
"twoColor":'white'
}

export default TwoInfo;

ok,回到App.js中:

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
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import {StackNavigator, TabNavigator, TabBarBottom} from 'react-navigation';
// 全局注册并注入mobx,其他地方都可以使用store
import {Provider} from 'mobx-react';
// 获取store实例
import store from './src/Mobx/Store';

import One from './src/One/One';
import Two from './src/Two/Two';

export default class TwoDetails extends Component<Props> {
render () {
return (
<Provider rootStore={store}>

<Navigator
onNavigationStateChange={(prevState, currentState) => {
// 只要切换tab,push,pop,这里一定走
console.log (prevState);
console.log (currentState);
}}
/>
</Provider>
);
}

componentDidMount = () => {
console.disableYellowBox = true; //去除黄色弹框警告
};
}

const Tab = TabNavigator (
{
One: {
screen: One,
navigationOptions: ({navigation}) => ({
tabBarLabel: '男孩',
tabBarIcon: ({focused, tintColor}) => (
<Image
source={
focused
? require ('./src/Image/boy_active.png')
: require ('./src/Image/boy.png')
}
style={{width: 25, height: 25}}
/>
),
}),
},
Two: {
screen: Two,
navigationOptions: ({navigation}) => ({
tabBarLabel: '女孩',
tabBarIcon: ({focused, tintColor}) => (
<Image
source={
focused
? require ('./src/Image/girl_active.png')
: require ('./src/Image/girl.png')
}
style={{width: 25, height: 25}}
/>
),
}),
},
},
{
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
swipeEnabled: true,
animationEnabled: true,
lazy: true,
tabBarOptions: {
activeTintColor: '#979797',
inactiveTintColor: '#979797',
style: {backgroundColor: '#ffffff'},
},
}
);

const Navigator = StackNavigator ({
Tab: {
screen: Tab,
},
});

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

然后就是基本的UI界面了:
One.js

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
/**
* 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 One extends Component<Props> {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {};
}


render() {
return (
<View style={styles.container}>
<Text onPress={()=>this.add()}>
+ 红
</Text>
<Text>
One {this.dataSource}
</Text>
<Text onPress={()=>this.sub()}>
- 蓝
</Text>
</View>
);
}

@computed get dataSource() {
return this.props.rootStore.OneInfo.allDatas.oneNum;
}

/**
* +
* */
@action
add() {
this.props.rootStore.OneInfo.add(this.dataSource)
}


/**
* -
* */
@action
sub() {
this.props.rootStore.OneInfo.sub(this.dataSource)
}





}

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

Two.js

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
/**
* 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 Two extends Component<Props> {
render() {
return (
<View style={[styles.container,{backgroundColor:this.bgColor}]}>
<Text>
TWO
</Text>
</View>
);
}

@computed get bgColor() {
return this.props.rootStore.TwoInfo.allDatas.twoColor;
}
}

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

ok,以上就是Mbox+react-navigation的Demo的基本代码了.
效果图:
效果图

源码

另外:redux+react-navigation
另外:dva+react-navigation