在 react-native-web 上实现 react-native-paper 时出现错误答案

【问题标题】：I am getting error, while implementing react-native-paper on react-native-web在 react-native-web 上实现 react-native-paper 时出现错误
【发布时间】：2020-10-02 07:08:51
【问题描述】：

这个链接是我为纸张供应商https://callstack.github.io/react-native-paper/using-on-the-web.html实现的。

<PaperProvider>
  <App />
</PaperProvider>

复制 PaperProvider 后出现这些错误..

./src/index.tsx 中的错误未找到模块：错误：无法解析“D:\Sentia Care\My Project\react-native\hybrid-react-app\packages\web_app\src”中的“MaterialCommunityIcons.ttf” @ ./src/index.tsx 16:106-143

【问题讨论】：

标签： react-native react-native-web react-native-paper react-app-rewired

【解决方案1】：

配置 babel-loader 接下来，我们要告诉 babel-loader 编译 react-native-paper 和 react-native-vector-icons。我们还希望禁用读取 babel 配置文件以防止任何冲突。

首先安装所需的依赖项：

yarn add --dev babel-loader @babel/preset-env @babel/preset-react @babel/preset-flow @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread

现在，在 webpack 配置的 module.rules 数组中添加以下内容：

{
  test: /\.js$/,
  exclude: /node_modules[/\\](?!react-native-vector-icons|react-native-safe-area-view)/,
  use: {
    loader: 'babel-loader',
    options: {
      // Disable reading babel configuration
      babelrc: false,
      configFile: false,

      // The configuration for compilation
      presets: [
        ['@babel/preset-env', { useBuiltIns: 'usage' }],
        '@babel/preset-react',
        '@babel/preset-flow',
        "@babel/preset-typescript"
      ],
      plugins: [
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-object-rest-spread'
      ],
    },
  },
},

【讨论】：