react-native+mobx+typescript 开发

1、正常初始化一个RN项目：

react-native init Test

2、添加typescript组件，具体可以查看官网RN项目添加typescript：

npm install typescript -dev-save

新建typescript的配置文件：touch tsconfig.json 

参开配置：

然后添加react和react-native的d.ts 文件，就能愉快用typescript进行开发。

npm install @types/react @types/react-native -dev-save

在引用第三方库的时候，要安装它的结构声明 d.ts 文件，不然会报类型错。

3、用mobx库管理state状态：

当RN的版本小于0.56时，建议安装mobx 4.5的版本。因为mobx5.0版本，会要求android的native jscore用新版本，就是最新支持的SDK是19。可以先看看：mobx使用配置

1）RN少于0.56：安装"mobx": "^4.5.2" 和 "mobx-react": "^5.3.6"后，在安装 install "babel-plugin-transform-decorators-legacy", 

You must also add the babel plugin to your .babelrc plugins configuration:

// .babelrc

{

  // omitting pre-existing configuration

  "plugins": [

    "transform-decorators-legacy"

  ]

}

2）RN大等于0.56：安装"mobx": "^5.5.1"和"mobx-react": "^5.3.4",

try installing @babel/plugin-proposal-decorators.

You’ll also need to set up your babel configuration in .babelrc a little differently:

{

  "presets": ["react-native"],

  "plugins": [

    [

      "@babel/plugin-proposal-decorators",

      {

        "legacy": true

      }

    ]

  ]

}

在.tsx文件直接引入

import { observable, action } from 'mobx';

import { observer, inject } from 'mobx-react';

就能用了。

4、mobx基本使用方式：

在最顶层的view里，如果有全局使用的store，例如AppStore，可使用mobx的Provider组件：

我的项目用的是react-navigation库，其他页面可以这样获取appStore：

用Mobx的inject 依赖注入方式获取Appstore：

这样子就可以正常开发。 参考项目代码https://github.com/sunny635533/RNTypescriptMobx