在react-native中dva的使用

在最近这半年的工作中接触和使用了react native，先不谈react native本身的存在的一些问题，只谈谈在工作中遇到的一些问题。

在前期的react native项目开发过程中，对一些功能，静态文件，通用组件的文件划分，包括一些常用的工具函数，接口请求函数，分辨率适配等文件的编写，安装react常用的划分体系进行开发工作。在项目的具体开发过程中，发现接口的文件请求过于分散，接口查找等都不是很方便，中间的数据管理也都不是很方便，经常需要在多个组件件进行状态的传递，导致了容易出现一些问题。因此，在项目中引入了dvajs作为项目的数据流管理工具(不要问我为什么不直接用redux，干嘛要用二次封装的dva。这么选择时因为根据团队的使用情况与开发周期来选择的。在公司之前的web项目中，基本都是选择的react+dva+antd来开发的，在使用react-native对一些之前的web项目进行迭代，为了在追求开发效率，团队的技术能力，产品的可维护性之间保持一个平衡，才选择了同学都比较熟悉的dva，复制一时爽，一直复制一直爽)。

 

在引入dva的过程中，遇到了几个文件，在这里说明一下。

1.需要引入dva相关的什么文件，需要安装那些包？

2.使用过程中遇到了什么问题？

问题1：只需要安装dva-core和react-redux两个相关的依赖包就可以。版本信息："dva-core": "^1.4.0", "react-redux": "^6.0.1"。

问题2: 当你安装了上面的两个依赖后，编写servers文件和modal文件后，在项目中引用会发现会有一个报错，对修饰符@不支持

应该怎么解决修饰符不支持的问题呢？

安装依赖

@babel/plugin-transform-flow-strip-types

@babel/plugin-proposal-decorators

@babel/plugin-proposal-class-properties

然后在package.json文件中引入相关依赖信息。

{
  "name": "app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@babel/plugin-transform-flow-strip-types": "^7.3.4",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "dva-core": "^1.4.0",
    "prop-types": "^15.6.2",
    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-navigation": "^2.18.2",
    "react-redux": "^6.0.1"
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.4.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "23.6.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  },
  "babel": {
    "presets": [
      "module:metro-react-native-babel-preset"
    ],
    "plugins": [
      [
        "@babel/plugin-transform-flow-strip-types"
      ],
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  }
}

如果你对项目文件夹下面有.babelrc文件，需要在该文件下填入下面内容

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["@babel/plugin-transform-flow-strip-types"],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose" : true }],
  ]
}

如果没有.babelrc文件夹，就在项目根目录下面新建babel.config.js文件夹，输入与上面同样的内容即可。

 github查看更多好文：[https://github.com/xccjk/x-blog](https://github.com/xccjk/x-blog)