在reactNative中使用mobx

一、安装mobx

yarn add mobx mobx-react babel-preset-mobx
1

二、开启装饰器

// tsconfig.json文件中
{
	"compilerOptions":{
		...
		"experimentalDecorators": true,
		"emitDecoratorMetadata": true
		...
	}
}
1
2
3
4
5
6
7
8
9

三、设置babel

// babel.config.js
module.exports = {
  presets: [..., 'mobx'],
};
1
2
3
4

四、基本使用

创建mobx文件夹，文件夹下创建index.ts

import {observable, action, makeObservable} from 'mobx'; // 注意引用的包是mobx
class RootStore {
  @observable num = 1; // 数据源
  // @observable num2 = 2; // 多个数据源的情况，方法也一样，这里不再演示
  constructor() {
    makeObservable(this); // 视图更新必须要调用
  }
  @action addNum() { // 改变数据的方法
    this.num++;
  }
}
export type RootStoreType = InstanceType<typeof RootStore>; // 给指定界面的ts类型使用
export default new RootStore(); // 导出实例化
1
2
3
4
5
6
7
8
9
10
11
12
13

App.ts文件中设置

import rootStore from './src/mobx'; // mobo文件夹下的index.ts，路径可能不一样，自行修改
import {Provider} from 'mobx-react'; // 注意引用的包
import BtnCom from 'xxx'; // 这个是我自己写的组件，具体内容参考下文

const App = () => {
  return (
    <Provider rootStore={rootStore}>
      <View>
        <Text>Agwenbi</Text>
        <BtnCom />
      </View>
    </Provider>
  );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在utils文件夹中新建一个useStore.ts文件，注意：路径与位置均不做强制要求

import {useContext} from 'react';
import {MobXProviderContext} from 'mobx-react'; // 注意引用的包
import {RootStoreType} from '../mobx/index';

export const useStore = <T = RootStoreType>(name: string): T => { // 通过useContext获取对应的值
  return useContext(MobXProviderContext)[name];
};
1
2
3
4
5
6
7

BtnCom的自定义组件中使用

import React from 'react';
import {View, Text, Button} from 'react-native';
import {useStore} from '../../utils';
import {observer} from 'mobx-react';

const BtnCom = () => {
  const store = useStore('rootStore'); // 注意不要解构
  const changeNum = () => {
    store.addNum();
  };
  return (
    <View>
      <Text>{store.num}</Text>
      <Button title="点击我" onPress={changeNum} />
    </View>
  );
};
export default observer(BtnCom); // 注意这里
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18