添加反应原生矢量图标以反应原生与反应原生网络时出错
Error while adding react native vector icons to react native with react native web
我按照这个 tutorial 将 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'
],
};
但还是有问题。
我该怎么办?
通过添加
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'],
},
};
我按照这个 tutorial 将 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'
],
};
但还是有问题。
我该怎么办?
通过添加
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'],
},
};