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

Question

我用来为纸张提供者实现的这个链接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

Answer 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'
      ],
    },
  },
},