如何将react-native-vector-icons与react-native-web一起使用？
我已经用react-native和react-native-web设置了monorepo项目。我在Android，iOS和网络上分享了相同的代码库。安装react-native-vector-icons后，我在所有三个平台上都运行了代码，它在安卓和iOS上运行得很好，但在网页上就不行了。在web中，它看起来如下所示：
我已经按照描述here设置了Webpack
下面是我的Webpack配置config-overrides.js
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
// our packages that will now be included in the CRA build step
const appIncludes = [
resolveApp('src'),
resolveApp('../components/src'),
];
//below is the config for react-native-vector-icons
const ttf = {
test: /\.ttf$/,
loader: "file-loader",
include: path.resolve(__dirname, "../../node_modules/react-native-vector-icons"),
};
module.exports = function override(config, env) {
// allow importing from outside of src folder
config.resolve.plugins = config.resolve.plugins.filter(
plugin => plugin.constructor.name !== 'ModuleScopePlugin'
);
config.module.rules[0].include = appIncludes;
config.module.rules[1] = ttf; //add the react-native-vector-icons here
config.module.rules[2].oneOf[1].include = appIncludes;
config.module.rules[2].oneOf[1].options.plugins = [
require.resolve('babel-plugin-react-native-web'),
].concat(config.module.rules[2].oneOf[1].options.plugins);
config.module.rules = config.module.rules.filter(Boolean);
config.plugins.push(
new webpack.DefinePlugin({__DEV__: env !== 'production'})
);
return config
};下面是我的App.js文件中react-native-vector-icons的用法
import Icon from 'react-native-vector-icons/dist/FontAwesome';
<Icon name="glass" size={24}/>我不知道为什么图标没有加载，也不知道我错过了什么配置。请帮帮我。提前谢谢你。
回答 3
Stack Overflow用户
发布于 2021-01-11 20:01:47
经过大量的研究，我终于找到了下面提到的解决方案：
add the TTF files and your custom font file into the public directory Stack Overflow用户
发布于 2020-04-23 16:04:40
我刚刚遇到了这个与react-native-paper不同的矢量图标问题。
在这种情况下，为了正确显示图标，必须在指向ttf文件的全局ccs中定义自定义字体系列。
https://github.com/oblador/react-native-vector-icons#web-with-webpack
Stack Overflow用户
发布于 2021-10-03 15:21:50
好吧。因此，假设您使用的是nextjs和react-native-web。我会给你一步一步的分析，告诉你如何让它在网络上工作。
安装所有这些包yarn add react-native-vector-icons react-native-svg next-compose-plugins next-transpile-modules
更新你的next.config.js
const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['react-native-vector-icons', 'react-native-svg']);
module.exports = withPlugins([withTM], {
images: {
disableStaticImages: true,
},
typescript: {
ignoreBuildErrors: true,
},
webpack: (config) => {
config.resolve.alias = {
...(config.resolve.alias || {}),
// Transform all direct `react-native` imports to `react-native-web`
'react-native$': 'react-native-web',
}
config.resolve.extensions = [
'.web.js',
'.web.ts',
'.web.tsx',
...config.resolve.extensions,
]
config.module.rules.push(
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [ 'url-loader?limit=10000', 'img-loader' ]
},
);
return config
},
});转到node_modules/react-native-vector-icons/Fonts，复制所需的所有字体并将其粘贴到公用文件夹中，就像向项目中添加自定义字体一样，需要在style.css中包含所有这些字体，如下所示
@font-face {
src: url(Ionicons.ttf);
font-family: "Ionicons";
}
@font-face {
src: url(FontAwesome.ttf);
font-family: "FontAwesome";
}
@font-face {
src: url(MaterialIcons.ttf);
font-family: "MaterialIcons";
}
@font-face {
src: url(Feather.ttf);
font-family: "Feather";
}
@font-face {
src: url(MaterialCommunityIcons.ttf);
font-family: "MaterialCommunityIcons";
}在_document.js文件中，确保包含style.css文件，如下所示
<Head>
<link href="/fonts/style.css" rel="stylesheet"/>
</Head>并最终将其导入import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
并将其设置为<Icon name="google-play" size={30} color="#900" />
瞧！
https://stackoverflow.com/questions/60263461
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号