9

我正在尝试在我的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文件中包含的文件放在与zipIcoMoonCustomIcon.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 的框。

知道这里有什么问题吗？

4

2 回答 2

2

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

使用 React Native 自定义图标字体

于 2020-11-07T09:57:30.420 回答
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

于 2020-05-15T17:55:13.870 回答