[react-native]mobx (react中全局数据管理库, 可以简单的实现数据的跨组件共享,类似于vue中的vuex)

651 阅读1分钟

这是我参与更文挑战的第15天,活动详情查看:更文挑战

使用步骤

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来挂载和传递

人懒,不想配图,都是自己的博客内容(干货),望能帮到大家

公众号:小何成长,佛系更文,都是自己曾经踩过的坑或者是学到的东西

有兴趣的小伙伴欢迎关注我哦,我是:何小玍。 大家一起进步鸭