在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文件夾，輸入與上面同樣的內容即可。