react-native - 将自定义图标导入 React Native 0.62

Question

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

我按照此处概述的步骤操作 https://github.com/oblador/react-native-vector-icons#custom-fonts但到目前为止，图标没有出现。

以下是我遵循的步骤:

创建我的图标集并将其转换为字体 https://icomoon.io

从 IcoMoon 下载 zip 文件并放置了 ttf文件到 ./src/assets/fonts文件夹

然后我创建了 react-native-config.js文件并放置在根目录中。此文件中的代码低于

在我的组件文件夹下，我创建了 CustomIcon.js -- 看下面的代码

我也放了selection.json包含在 zip 中的文件我从 IcoMoon 下载的文件在与 CustomIcon.js 相同的文件夹中

然后我使用了 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

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

Rename the react-native-config.js to react-native.config.js

Re-run the app by restarting metro

Make sure I have correct path to my assets in react-native.config.js

react-native link and restart. It copies your assets to corresponding ios and android folders

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