使用 Mobx 装饰器响应本机会引发错误

Question

我构建了反应原生应用程序（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 

那是我的包.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"
    ]
}

}

Answer 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"]
}