ReactNative集成MobX教程——2019年最新版

公司最近开了一个新项目，继续采用ReactNative，作为项目负责人，博主正好有机会从头搭建一个项目。

在集成MobX的时候，出现了一些问题，主要是因为使用了 0.57.+ 的ReactNative版本，在0.56版本的ReactNative更新中，采用了Babel7，网上老的教程有些过时了，会报错。还用了5.8.0版本的MobX和5.4.3版本的MobX-React，都是最新的版本，也遇到了一些坑，解决时也费了一些功夫，写篇教程总结一下，也给大家分享分享。

1.安装mobx依赖

执行

yarn add mobx

或者

npm install mobx --save

个人觉得yarn命令比较好一些，不知道的可以看一下补充内容，知道的就可以跳过了。

补充内容：

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

安装完 yarn 后需要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

2.安装mobx-react依赖

执行

yarn add mobx-react

或者

npm install mobx-react --save

3.测试mobx是否可用

安装完上面的依赖后，可以先测试一下mobx是否可用，运行项目，在自己工程中，新建一个js文件，或者用以前的js文件测试也可以。

添加代码

import {observable}  from  'mobx'；

之后reload，看是否报错，不报错的话，就比较顺利，跳过步骤4，直接看步骤5。

如果提示“can't find variable:symbol”，而且是android版本的话，看步骤4，如果是iOS版本的话，请自行解决。

4.升级项目JavaScriptCore

①，修改RN项目package.json文件，添加新的依赖

"dependencies": {
 // ........... 省略其他依赖，代码  
+  "jsc-android": "236355.x.x"
}

命令行中输入yarn(或者npm install)，执行命令。不懂得看上面的补充内容

②，修改android/build.gradle文件

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
     +   maven {
     +       // Local Maven repo containing AARs with JSC library built for Android
     +          url "$rootDir/../node_modules/jsc-android/dist"
     +      }
    }
}

③，修改android/app/build.gradle文件

android{

         //....省略之前代码

+  configurations.all {
+       resolutionStrategy {
+                force 'org.webkit:android-jsc:r236355'
+           }
+    }

}

重新编译项目，运行

5，安装装饰器插件，方便使用mobx，如@observable，@observer，@action等

一般来说，安装完mobx和mobx-react依赖，就可以使用mobx了，但为了写代码方便，通常会选择这种注解的方式来使用，所以需要安装插件

执行

yarn add --dev @babel/plugin-proposal-decorators 

 或者 

npm install --save-dev @babel/plugin-proposal-decorators 

 修改.babelrc文件，一般都有该文件，找不到的，自己创建一个，和package.json文件同级。

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [["@babel/plugin-proposal-decorators",
    {
      "legacy": true
    }]]
}“

"presets"这行保持你项目中的不动就可以，主要看"plugins”中的改变。

6.配置完毕，重新运行项目，测试

在代码中添加@observable，@observer等注解，reload查看是否报错

具体mobx的用法，自行参考其他文章，对于配置环境有什么的问题的，可以在文章下评论。

 

 

参考文章： 

https://cn.mobx.js.org/ MobX中文文档

https://github.com/mobxjs/mobx-react/issues/498

https://github.com/react-native-community/jsc-android-buildscripts#how-to-use-it-with-my-react-native-app

https://stackoverflow.com/questions/53230930/react-mobx-error-the-decorators-plugin-requires-a-decoratorsbeforeexport-op

ReactNative中文网