将自定义图标导入 React Native 0.62

Question

我正在尝试在我的React Native 0.62.2 应用程序中导入和使用我自己的自定义图标。

我按照https://github.com/oblador/react-native-vector-icons#custom-fonts 此处列出的步骤进行操作，但到目前为止，这些图标还没有显示出来。

以下是我遵循的步骤：

1. 创建了我的图标集并将其转换为https://icomoon.io 上的字体
2. 从IcoMoon 下载压缩文件并将ttf 文件放入./src/assets/fonts 文件夹中
3. 然后我创建了react-native-config.js 文件并放置在根目录中。此文件中的代码在下面
4. 在我的组件文件夹下，我创建了CustomIcon.js -- 见下面的代码
5. 我还将从IcoMoon 下载的zip 文件中包含的selection.json 文件放在与CustomIcon.js 相同的文件夹中
6. 然后我使用了CustomIcon，如下所示

所以这里的代码是什么样子的：

react-native-config.js 文件如下所示：

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

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');

这是我使用图标的方式：

import CustomIcon from '../common_components/fonts/CustomIcon';

<CustomIcon name="home-outline" />

当我在 Android Emulator 中运行应用程序时，我看到了缺少的图标符号，即一个带有 X 的框。

知道这里有什么问题吗？

Answer 1

有一篇非常好的文章帮助我解决了这个问题。

Custom icon fonts with React Native

Answer 2

自定义图标总是存在问题。当我个人遇到这种情况时，我会这样做：

将react-native-config.js 重命名为react-native.config.js

通过重启 metro 重新运行应用

确保我在react-native.config.js 中拥有正确的资产路径

react-native link 并重新启动。它将您的资产复制到相应的 ios 和 android 文件夹

如果两者都没有帮助我手动将资产复制到文件夹：Project/android/app/src/main/assets/fonts