带有React-native-vector-icons + Icomoon的自定义图标集问题

问题描述

我想将我的自定义图标与react-native-vector-icons和Icomoon一起使用。我使用Icomoon生成了.tff和selection.js，并使用react-native-link将它们放入我的项目中，但是我尝试使用的图标被视为空正方形。

我将与您分享我的代码并进行截图。

这是我的导入代码

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import selectionConfig from "../selection.json"
const Icon = createIconSetFromIcoMoon(selectionConfig,"icomoon","icomon.ttf");
<Icon name="bag" size={64} />

这是我的package.json编辑：

 "rnpm": {
    "assets": [
        "resources/fonts"
    ]
},

这是icon的屏幕截图： Screenshot

注意：我将字体文件放在“ ./resources/fonts”下，并将selection.json放在“ src”文件夹下，并使用“ react-native link react-native-vector-icons”代码链接这些文件”

我该如何解决这个问题？

解决方法

我想您可能忘记运行 react native link，如果您这样做了但仍然没有显示图标，请尝试删除构建文件并重试。

有两种方法可以让您的自定义图标工作，如果链接对您没有帮助，您可以尝试手动方式。

此处引用了此答案：https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c

a) React Native 链接

1. 将 .ttf 放在项目底部的 ./resources/fonts 文件夹中

2. 在 package.json 的第一层添加这段代码：

   "rnpm": { "assets": [ "resources/fonts" ] },

3. 在你的终端中：react-native link

b) 手册

Android：将 .ttf 复制到 RN 项目的 ./android/app/src/main/assets/fonts 文件夹中。

如果还是不显示

删除android build文件夹并重新运行

,

我遇到了类似的问题，这是因为包中的 rnpm 是 depreciated，我通过创建 react-native.config.js 文件解决了它，然后我确实运行了链接命令：

这是 react-native.config.js 文件。

module.exports = {
  project: {
    ios: {},android: {},},assets: ['./resources/fonts'],};

创建文件并添加上述代码片段后，运行以下命令：

react-native link