如何将@ babel / plugin-transform-flow-strip-typeshttps://git.io/vb49g添加到Babel配置的“插件”部分以启用转换？

问题描述

am使用react native web并想将react导航5添加到项目中。但是，当我尝试在添加react-navigation时构建Web版本时，我得到了

./node_modules/react-native-gesture-handler/DrawerLayout.js
SyntaxError: D:\Parentlane\ReactNativeWeb\node_modules\react-native-gesture-handler\DrawerLayout.js: Support for the experimental Syntax 'flow' isn't currently enabled (30:8):

  28 | const SETTLING = 'Settling';
  29 | 
> 30 | export type PropType = {
     |        ^
  31 |   children: any,32 |   drawerBackgroundColor?: string,33 |   drawerPosition: 'left' | 'right',Add @babel/plugin-transform-flow-strip-types (https://git.io/vb49g) to the 'plugins' section of your Babel config to enable transformation.

我添加了plugin-transform-flow-strip-types作为开发依赖项，但这无济于事。

下面是我的package.json

{
  "name": "ReactNativeWeb","version": "0.0.1","private": true,"scripts": {
    "android": "react-native run-android","ios": "react-native run-ios","web": "react-scripts start","start": "react-native start","test": "jest","lint": "eslint ."
  },"dependencies": {
    "@react-native-community/masked-view": "^0.1.10","@react-navigation/native": "^5.7.6","axios": "^0.20.0","babel-loader": "^8.1.0","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","qs": "^6.9.4","react": "16.13.1","react-dom": "^16.13.1","react-native": "0.63.2","react-native-gesture-handler": "^1.8.0","react-native-reanimated": "^1.13.1","react-native-safe-area-context": "^3.1.8","react-native-screens": "^2.11.0","react-native-vector-icons": "^7.1.0","react-native-web": "^0.13.12"
  },"devDependencies": {
    "@babel/core": "^7.11.6","@babel/plugin-proposal-class-properties": "^7.10.4","@babel/plugin-transform-flow-strip-types": "^7.10.4","@babel/preset-env": "^7.11.5","@babel/preset-react": "^7.10.4","@babel/runtime": "^7.11.2","@react-native-community/eslint-config": "^2.0.0","metro-react-native-babel-preset": "^0.63.0","react-scripts": "^3.4.3","react-test-renderer": "16.13.1","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0"
  },"jest": {
    "preset": "react-native"
  },"browserslist": {
    "production": [
      ">0.2%","not dead","not op_mini all"
    ],"development": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ]
  }
}

babel.config.js如下：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],};

有人可以告诉我如何在babel.config.js中添加插件吗？还是有其他方法可以解决上述错误？

任何建议都是很棒的，如果需要其他详细信息以便更好地理解，请告诉我。

解决方法

您可以将其添加到babel配置文件中。将其包含在您的插件中。

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],plugins: ['@babel/plugin-transform-flow-strip-types'],};

并像这样用npm安装

npm install --save-dev @babel/plugin-transform-flow-strip-types

---

在此处检查文档-> https://babeljs.io/docs/en/babel-plugin-transform-flow-strip-types