与 mobx 装饰器反应本机引发错误答案

【问题标题】：react native with mobx decorators throws error与 mobx 装饰器反应本机引发错误
【发布时间】：2018-04-19 16:18:14
【问题描述】：

我构建了 React Native 应用程序（0.49 版）。我安装 mobx react 和 babel-plugin-transform-decorators-legacy 来使用装饰器。然后，它向我显示了一些错误，它无法识别装饰器，因此我将其添加到 jsconfig.json 中

  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true // I added this line

},

它没有显示错误，但是当我想在我的组件中使用它并且我在 @inject 和 @observer 装饰器中使用时，如您在示例中看到的那样

@inject("userStore")
@observer
class UserDetails extends Component {
    constructor(props){
        super(props);
        this.state = { 
            user:null

         }

    }

in 在 @inject 的行中抛出 n 个错误

unexpected token

这是我的 package.json

{
"name": "app_name",
"version": "0.0.1",
"private": true,
"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
},
"dependencies": {
    "mobx-react": "^4.3.4",
    "react": "16.0.0-beta.5",
    "react-native": "0.49.3",
    "react-native-branch": "^2.1.1",
    "react-native-camera": "^0.10.0",
    "react-native-country-picker-modal": "^0.3.0",
    "react-native-datepicker": "^1.6.0",
    "react-native-device-info": "^0.12.1",
    "react-native-fbsdk": "^0.6.3",
    "react-native-i18n": "^2.0.8",
    "react-native-nfc-manager": "0.0.3",
    "react-native-onesignal": "^3.0.6",
    "react-native-qrcode-scanner": "0.0.22",
    "react-native-swiper": "^1.5.13",
    "react-native-vector-icons": "^4.4.2",
    "react-navigation": "^1.0.0-beta.14",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "uuid": "^3.1.0"
},
"devDependencies": {
    "babel-jest": "21.2.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-react-native": "4.0.0",
    "jest": "21.2.1",
    "react-test-renderer": "16.0.0-beta.5"
},
"jest": {
    "preset": "react-native"
},
"babel": {
    "plugins": [
        "babel-plugin-transform-decorators-legacy"
    ],
    "presets": [
        "react-app"
    ]
}

}

【问题讨论】：

标签： react-native mobx mobx-react

【解决方案1】：

添加到jsconfig.json是不够的。

安装这些依赖项：

npm install babel-preset-react-native --save-dev
npm install babel-plugin-transform-decorators-legacy --save-dev

.babelrc 文件告诉 babel 编译器要做什么，而不是 jsconfig.json。所以创建.babelrc 文件并添加以下内容：

{
  "presets": ["react-native"],
  "plugins": ["transform-decorators-legacy"]
}

【讨论】：