将自定义图标导入 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. 从下载zip文件IcoMoon并将ttf文件放入./src/assets/fonts文件夹
3. 然后我创建了react-native-config.js文件并放置在根目录中。这个文件中的代码在下面
4. 在我的组件文件夹下，我创建了CustomIcon.js- 请参阅下面的代码
5. 我还将下载的selection.json文件中包含的zip文件放置在IcoMoon与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

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

重命名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