少停 > Mobx与react-navigation的结合使用

Mobx与react-navigation的结合使用

2018-05-27

移动端学习

今天,学习下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
5
{
  "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
10
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
106
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
89
/**
 * 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
54
/**
 * 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