在将React Native矢量图标添加到React Native和React Native Web中时出现错误。

Question

我按照这个教程将react-native-web添加到react-native项目中，但是在将react-native-vector-icons添加到项目时出现了错误。

./node_modules/react-native-vector-icons/lib/create-icon-set.js
SyntaxError: /home/hamidreza/Desktop/myApp/node_modules/react-native-vector-icons/lib/create-icon-set.js: Support for the experimental syntax 'classProperties' isn't currently enabled (43:22):

  41 | 
  42 |   class Icon extends PureComponent {
> 43 |     static propTypes = {
     |                      ^
  44 |       allowFontScaling: PropTypes.bool,
  45 |       name: IconNamePropType,
  46 |       size: PropTypes.number,

我也更改了我的babel.config.js文件如下：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      '@babel/plugin-proposal-class-properties',
      {
        loose: true,
      },
    ],
  ],
};

或者

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    '@babel/plugin-proposal-class-properties'
  ],
};

但问题仍然存在。

我应该怎么办？

- BeHappy

Answer 1

通过添加

path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),

已解决 babelLoaderConfiguration 问题。

最终的 web/webpack.config.js 文件：

const path = require('path');
const webpack = require('webpack');

const appDirectory = path.resolve(__dirname, '../');
const babelLoaderConfiguration = {
  test: /\.js$/,
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
    path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
    path.resolve(appDirectory, 'node_modules/react-native-elements'),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets: ['react-native'],
      plugins: ['react-native-web'],
    },
  },
};

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
    },
  },
};

module.exports = {
  entry: [path.resolve(appDirectory, 'index.web.js')],

  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist'),
  },
  module: {
    rules: [babelLoaderConfiguration, imageLoaderConfiguration],
  },

  resolve: {
    alias: {
      'react-native$': 'react-native-web',
    },
    extensions: ['.web.js', '.js'],
  },
};

- BeHappy

---

嘿，我已经添加了webpack.config.js文件。package.json中的脚本是使用"web": "react-scripts start"运行的，我使用了相同的教程。我该如何配置它以使用我的自定义webpack配置？我一直卡在同样的错误上。你能更详细地解释一下你的设置吗？这将非常有帮助，谢谢。 - Rishabh Bhatia

@RishabhBhatia，我刚刚将web/webpack.config.js更改为答案中的内容。 - BeHappy

教程中没有web文件夹？您是否手动在根目录下创建了一个名为web的文件夹并添加了以上的webpack.config.js文件？另外，package.json或babel.config.js文件中有任何更改吗？ - Rishabh Bhatia

@RishabhBhatia 关注这个链接：https://reactnativeelements.com/docs/web_usage - BeHappy

工作正常了，这就是缺失的部分。周末开始得真好，我很开心。谢谢！ - Rishabh Bhatia

@RishabhBhatia 保持愉快 :) 并通过给我的问题和答案点赞来让我开心 :) 谢谢 - BeHappy