Question

我构建反应原生app（版本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

         }

    }

在@inject

的行中引发了错误

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

}

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

与mobx装饰器反应原生抛出错误

1 个答案: