React-Native-Web 配置问题 : Module not found: Error: Can't resolve 'react-native-screens'

Question

我正在尝试使用 react-native-web、babel 和 webpack 为 web 呈现一个 react native 应用程序。
当我启动 webpack 时，我收到以下错误。
正如您从我的 web.config.js 中看到的那样，我包含了渲染自定义 react 原生代码所需的 react 原生模块。
react-native-screens 模块已安装，您可以从 package.json 中看到。

我的问题是，如果安装了该模块，为什么编译器会提示 node_modules/react-navigation-stack/dist/views/StackView/StackViewCard.js 中的 react-native-screens 依赖项？

任何指针表示赞赏。

错误:
./node_modules/react-navigation-stack/dist/views/StackView/StackViewCard.js 中的错误
找不到模块:错误:无法解析“~/ReactNative/RNProto1/node_modules/react-navigation-stack/dist/views/StackView”中的“react-native-screens”
@ ./node_modules/react-navigation-stack/dist/views/StackView/StackViewCard.js 1:931-962
@ ./node_modules/react-navigation-stack/dist/index.js
@ ./node_modules/react-navigation/src/react-navigation.js
@ ./mydemo/demo.js
@ ./index.web.js

babel.config.js:

module.exports = {
  presets: ["@babel/env", "module:metro-react-native-babel-preset"],
  plugins: []
};

包.json:

{
  "name": "react-native-demo",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "dayjs": "^1.8.5",
    "lodash": "^4",
    "prop-types": "^15.6.0",
    "react-native-linear-gradient": "2.5.6",
    "react-native-screens": "^1.0.0-alpha.23",
    "react-native-svg": "9.8.4"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.3",
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.0",
    "@babel/runtime": "^7.4.3",
    "@commitlint/cli": "^7.1.1",
    "@commitlint/config-conventional": "^7.1.1",
    "@semantic-release/changelog": "^2.0.2",
    "@semantic-release/git": "^5.0.0",
    "acorn": "6.3.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.7.1",
    "babel-loader": "^8.0.6",
    "babel-plugin-react-docgen": "^3.2.0",
    "babel-preset-env": "^1.6.1",
    "css-loader": "0.28.11",
    "eslint-plugin-flowtype": "^2.50.3",
    "file-loader": "^4.2.0",
    "flow-bin": "^0.92.0",
    "glob": "^7.1.2",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^0.14.3",
    "image-size": "^0.6.2",
    "imagemin": "^5.3.1",
    "jest": "^24.7.1",
    "metro-react-native-babel-preset": "^0.56.4",
    "mkdirp": "^0.5.1",
    "npm-run-all": "^4.1.2",
    "react": "16.8.3",
    "react-art": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-native": "^0.59.4",
    "react-native-web": "^0.11.7",
    "react-navigation": "^2.18.3",
    "react-styleguidist": "^10.2.1",
    "react-test-renderer": "16.8.3",
    "semantic-release": "^15.4.1",
    "standard": "^12.0.1",
    "style-loader": "0.23.1",
    "svgexport": "^0.3.2",
    "url-loader": "^1.0.1",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
    "webpack-node-externals": "^1.7.2"
  },
  "peerDependencies": {
    "react": "16.3.1 || 16.4.1 || 16.8.3 || 16.8.6",
    "react-native": "^0.55.4 || ^0.56.0 || ^0.59.0 || ^0.60.5"
  }
}

web.config.js:

const fs = require('fs');
const isDev = true;
const path = require('path');
const webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
module.exports = {
  entry: './index.web.js',
  output: {
      path: path.join(__dirname, '/web'),
      filename: "bundle.js",
      publicPath: '/'
  },
  devServer: {
      inline: false,
      contentBase: path.join(__dirname, '/web'),
  },
  resolve: {
    alias: {
      'react-native': 'react-native-web'
    },
    // Resolve to iOS-specific components
    extensions: ['.ios.js', '.android.js', '.js', '.json']
  },
  target: 'node', // in order to ignore built-in modules like path, fs, etc. 
  module: {
    rules: [
      // Babel loader config
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          path.join(__dirname, '/index.web.js'),
          path.join(__dirname, '/app'),
          path.join(__dirname, '/demo'),
          path.join(__dirname, '/src'),
          path.join(__dirname, '/node_modules/react-native-dismiss-keyboard'),
          path.join(__dirname, '/node_modules/react-native-drawer-layout'),
          path.join(__dirname, '/node_modules/react-native-drawer-layout-polyfill'),
          path.join(__dirname, '/node_modules/react-native-linear-gradient'),
          path.join(__dirname, '/node_modules/react-native-safe-area-view'),
          path.join(__dirname, '/node_modules/react-native-screens'),
          path.join(__dirname, '/node_modules/react-native-svg'),
          path.join(__dirname, '/node_modules/react-native-tab-view'),
          path.join(__dirname, '/node_modules/react-navigation'),
          path.join(__dirname, '/node_modules/react-navigation-deprecated-tab-navigator'),
          path.join(__dirname, '/node_modules/react-navigation-drawer'),
          path.join(__dirname, '/node_modules/react-navigation-stack'),
          path.join(__dirname, '/node_modules/react-navigation-tabs')
        ],
        options: {
          plugins: [
          ],
          presets: ['@babel/env', 'module:metro-react-native-babel-preset'],
          babelrc: false
        }  
      },
      // Image loader config
      {
        test: /\.(gif|jpe?g|png|svg)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name].[ext]'
          }
        }
      }, 
      // CSS loader config
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

Answer 1

你这样做是命令提示符还是终端:

    npm install react-native-screens
    yarn add react-native-screens

Here is an Image