1

我正在尝试在本机反应中使用自定义字体。使用 Icomoon 在自定义图标集中转换了 SVG，并尝试了https://www.reactnative.guide/12-svg-icons-using-react-native-vector-icons/12.1-creating-custom-iconset.html中的所有步骤。

react-native-vector-icons已经安装了。

用于react-native link react-native-vector-icons设置项目的矢量图标框架。

将 selection.json 和 Icomoon.ttf 文件放在assets/fonts文件夹中。

并添加 "rnpm": { "assets": [ "resources/fonts" ] }到 package.json 文件中

创建 CustomIcon.js 文件并添加

import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
export default createIconSetFromIcoMoon(icoMoonConfig);

在 App.js 文件中添加了以下内容

import CustomIcon from './components/CustomIcon.js'

<CustomIcon name='accounts' size={50} /> //To use the icon

并且图标在图标位置显示☒。

如果有人有解决方案请分享，谢谢。

4

2 回答 2

1

在 Android 平台图标显示我是这样的：

在此处输入图像描述

经过一段时间的故障排除后，我终于找到了解决方案。

因为我使用了自己的图标集，所以我通过 IcoMoon App 从 iconSet.svg 创建了 iconSet.ttf。

事实上，我遵循了本教程：https ://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c

IcoMoon 应用程序创建了 *.ttf 和 selection.json，问题出在 selection.json 中。

我将 *.ttf 文件重命名为 myIcons.ttf 但我必须将文件 selection.json 末尾的fontFamily和名称更改为与我命名 *.ttf 文件相同的名称。在我的情况下myIcons.ttf我在 selection.json中将name 和 fontFamily重命名为myIcons

于 2021-09-02T08:36:46.817 回答
0

我已经尝试了很多但没有得到解决方案，但最终我得到了解决方案，每当我使用react-native link react-native-vector-icons命令时它都无法正常工作。所以我检查了字体文件夹，android/app/src/main/assets/font发现我的 icomoon 字体文件不存在。所以我复制了文件并在该位置手动粘贴它worked。

于 2020-12-22T16:18:06.570 回答