[英]Importing custom icons into React Native 0.62
I'm trying to import and use my own custom icons in my React Native 0.62.2
app.我正在尝试在我的
React Native 0.62.2
应用程序中导入和使用我自己的自定义图标。
I followed the steps outlined here https://github.com/oblador/react-native-vector-icons#custom-fonts but so far the icons are not showing up.我按照此处概述的步骤https://github.com/oblador/react-native-vector-icons#custom-fonts但到目前为止图标没有出现。
Here are the steps I followed:以下是我遵循的步骤:
IcoMoon
and placed the ttf
file into ./src/assets/fonts
folderIcoMoon
下载 zip 文件并将ttf
文件放入./src/assets/fonts
文件夹react-native-config.js
file and placed in the root.react-native-config.js
文件并放在根目录中。 The code in this file is down belowCustomIcon.js
-- see code belowCustomIcon.js
见下面的代码selection.json
file that was included in the zip
file I downloaded from IcoMoon
in the same folder as CustomIcon.js
IcoMoon
下载的zip
文件中包含的selection.json
文件放在与CustomIcon.js
相同的文件夹中CustomIcon
as shown belowCustomIcon
,如下所示So here what the codes look like:所以这里的代码是什么样的:
The react-native-config.js
file looks like this: react-native-config.js
文件如下所示:
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./src/assets/fonts/']
};
The CustomIcon.js
file looks like this: CustomIcon.js
文件如下所示:
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
export default createIconSetFromIcoMoon(icoMoonConfig, 'StreamLine', '../../../assets/fonts/streamline-icon-set-1.ttf');
And here's how I use the icon:这是我使用图标的方式:
import CustomIcon from '../common_components/fonts/CustomIcon';
<CustomIcon name="home-outline" />
When I run the app in Android Emulator
, I see the missing icon symbol ie a box with an X in it.当我在
Android Emulator
中运行该应用程序时,我看到缺少的图标符号,即一个带有 X 的框。
Any idea what the issue is here?知道这里有什么问题吗?
There is always issue with custom icons.自定义图标总是存在问题。 When I personally bump into such condition I do these:
当我个人遇到这种情况时,我会这样做:
Rename the
react-native-config.js
toreact-native.config.js
将
react-native-config.js
重命名为react-native.config.js
Re-run the app by restarting metro
通过重新启动 Metro 重新运行应用程序
Make sure I have correct path to my assets in
react-native.config.js
确保我在
react-native.config.js
中有正确的资产路径
react-native link
and restart.react-native link
并重启。 It copies your assets to corresponding ios and android folders它将您的资产复制到相应的 ios 和 android 文件夹
If neither do not help I copy the assets manually to folder: Project/android/app/src/main/assets/fonts
如果两者都没有帮助我手动将资产复制到文件夹:
Project/android/app/src/main/assets/fonts
There is a really good article which helped me with this problem.有一篇非常好的文章帮助我解决了这个问题。
Custom icon fonts with React Native 带有 React Native 的自定义图标 fonts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.