如何将react-native-vector-icons与react-native-web一起使用？
Rut*_*att 7 reactjs react-native react-native-web react-native-vector-icons
我已经使用react-native和设置了 monorepo 项目react-native-web。我正在为 Android、iOS 和 Web 共享相同的代码库。安装react-native-vector-icons后，我在所有三个平台上运行了代码，它在Android和iOS中运行良好，但在Web中运行不佳。在网络上它看起来像下面这样：
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
};
以下是我的文件react-native-vector-icons中的使用App.js
import Icon from 'react-native-vector-icons/dist/FontAwesome';
<Icon name="glass" size={24}/>
我不知道为什么图标没有加载或者我错过了配置。请帮我。先感谢您。
好的。因此，假设您使用 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 并复制所需的所有字体并将它们粘贴到公共文件夹中，就像将自定义字体添加到项目中一样，您需要包含所有这些字体，如下所示你的样式.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" />
瞧！
- 对于 Web，如果性能对 SEO 很重要，则强烈建议不要使用大量图标字体。找到一种图标字体，例如满足大多数需求的 MaterialCommunityIcons，然后使用它。 (2认同)
经过大量研究，我终于找到了解决方案，如下所示：
add the TTF files and your custom font file into the public directory
| 归档时间： |
|
| 查看次数： |
8542 次 |
| 最近记录： |