React Native - 升级 0.56 错误 [已编辑]

Question

我正在尝试将 mobx 集成到我的 react native 应用程序中，但有一些问题我认为是因为 0.56 react native-update。当我使用 store-prop 或 @observer-decorator 时发生错误（见下面的代码）。

错误提示：_$$_REQUIRE(..) is not a function

我安装了最新的 react native (0.56)，并安装了 Babel Core 7 (Beta 47)。 我也有“@babel/plugin-proposal-decorators”（v7，Beta 47）。我还测试了安装：“@babel/plugin-transform-runtime”（v7，Beta 47）。首先我安装了 babel core beta-version 52，但是这给了我这个错误：

Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null

经过一番搜索，它看起来需要 beta-version 47，所以我安装了它，它看起来好像可以工作，直到我将装饰器重新添加到代码中。然后我得到了“要求”错误。 我在 StackOverflow 或其他任何地方都找不到有关此错误的任何信息。

没有丢失 peerDependencies。

这是我的 package.js：

"dependencies": {
    "adm-zip": "^0.4.11",
    "mobx": "^5.0.3",
    "mobx-react": "^5.2.3",
    "plist": "^3.0.1",
    "react": "^16.4.1",
    "react-native": "^0.56.0",
    "react-native-elements": "^0.19.1",
    "react-native-fbsdk": "^0.7.0",
    "react-native-fontawesome": "^5.7.0",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^2.3.1",
    "xcode": "^1.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.47",
    "@babel/core": "^7.0.0-beta.47",
    "@babel/plugin-external-helpers": "^7.0.0-beta.47",
    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.47",
    "@babel/plugin-proposal-decorators": "^7.0.0-beta.47",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0-beta.47",
    "@babel/plugin-syntax-typescript": "^7.0.0-beta.47",
    "@babel/plugin-transform-arrow-functions": "^7.0.0-beta.47",
    "@babel/plugin-transform-classes": "^7.0.0-beta.47",
    "@babel/plugin-transform-runtime": "^7.0.0-beta.47",
    "@babel/preset-env": "^7.0.0-beta.47",
    "@babel/preset-react": "^7.0.0-beta.47",
    "@babel/runtime": "^7.0.0-beta.47",
    "babel-cli": "^6.26.0",
    "babel-jest": "23.0.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-native": "^5.0.2",
    "babel-preset-react-native-typescript": "^1.0.0-rc.1",
    "jest": "23.1.0",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  },

还有.babelrc：

{
  "presets": ["react-native-typescript", "@babel/preset-env", "@babel/preset-react" ],
  "plugins": [
    [
    "transform-class-properties", { "loose": true },
    ],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-transform-runtime", {
      "helpers": true,
      "polyfill": false,
      "regenerator": false
    }]
  ]
}

这里是商店：

import { observable } from 'mobx';

export class UserStore {
  @observable test = 2;
}

这里是使用 store 的组件：

import { observer } from 'mobx-react';
import store from './../mobx/UserStore'

@observer
class NavMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {   
    };
  }
  render() {
    const { userStore } = this.props;
    return (
      <View style={{flex: 1}}>
        {userStore.test}
      </View>
    );
  }
}

所以当我使用 store-prop 或 @observer-decorator 时会出现错误。 @observable-decorator 在商店中运行良好。

编辑： 事实证明，这不是因为 mobx。在我更新了 react native-version 的 npm install 之后，有些东西丢失/错误。我实际上无法编辑我的任何组件。一旦我编辑它们，我就会得到一种错误。 “要求”错误就是其中之一。 “_typeof 不是函数”也是我现在看到的一个错误。请帮忙，我目前无法对我的应用程序执行任何操作。我的包裹里有什么问题吗？

Answer 1

使用这些版本更新您的依赖项。

在 package.json 中设置依赖项

{
  "name": "mobxdemo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "lodash": "^4.17.10",
    "prop-types": "^15.6.1",
    "mobx": "^5.0.3",
    "mobx-react": "^5.2.3",
    "mobx-state-tree": "^3.0.0",
    "react": "16.3.2",
    "react-native": "^0.55",
    "react-navigation": "2.2.5"
  },
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-eslint": "^8.2.5",
    "babel-jest": "22.4.3",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-react-native": "^3.0.2",
    "jest": "22.4.3",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native",
    "plugins": [
      "transform-decorators-legacy"
    ]
  }
}

在.babelrc中设置

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