使用步骤
1. 安装依赖
- mobx核心库
- mobx-react 方便在react中使用mobx技术的库
- @babel/plugin-proposal-decorators 让rn项目支持es7的装饰器语法的库
# yarn add mobx mobx-react @babel/plugin-proposal-decorators 复制代码
2、在babel.config.js添加以下配置
plugins: [ ['@babel/plugin-proposal-decorators', {'legacy': true}]] ] #结果 module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ ['@babel/plugin-proposal-decorators', {'legacy': true}] ] }; 复制代码
3、新建文件 mobx\index.js 用来存放全局数据
import { observable, action } from 'mobx' class RootStore { // observable 表示数据可监控, 表示是全局数据 @observable name = 'hello' // action 行为 表示changeName是个可以修改全局共享数据的方法 @action changeName(name) { this.name = name } } export default new RootStore() 复制代码
4、在根组件中挂载
通过Provider来挂载和传递