React Native 自定义图标无法显示答案

【问题标题】：React native customized icon can't not be shownReact Native 自定义图标无法显示
【发布时间】：2021-08-12 11:22:30
【问题描述】：

我正在尝试添加自定义图标，我按照以下教程进行操作： https://www.reactnative.guide/12-svg-icons-using-react-native-vector-icons/12.1-creating-custom-iconset.html

我将 icomoon.tff 文件放在 ./assets/fonts 中，所以在我的 package.json 中，我添加了：

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

然后在我的 HomePage.js 中：

import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
import icoMoonConfig from '../selection.json';
const CustomIcon = createIconSetFromIcoMoon(icoMoonConfig);
CustomIcon.loadFont();
<CustomIcon name='aaa' 
   color = {color}
   size = {size}
/>

然后我跑了：

yarn add react-native-vector-icons
yarn react-native link react-native-vector-icons

但是，它仍然显示无法识别的字体系列 Icomoon，并且屏幕显示的是问号而不是图标。

【问题讨论】：

您是否重新启动了应用程序？重启时应用不应处于后台状态。

标签： react-native react-native-android font-awesome react-native-ios icomoon

【解决方案1】：

首先在 "./assets/fonts" 中使用你的 font.ttf 或 font.otf 运行 npx react-native link 以自动链接 IOS 和 Android 文件夹中的字体。

您可以创建一个函数来翻译图标的“unicode”名称。

/* 
  just configure your unicodeTranslate to your 
  custom icons, changing the key and value
*/

export const unicodeTranslate = {
  ['yourNameIcon1']: '\uf015', 
  ['yourNameIcon2']: '\uf023',
};

const convertFont = (value: string) => {
  // Removing all accents and converting to lowercase
  let valueManipulated = value..toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")

  let translated = unicodeTranslate[valueManipulated]

  return translated
}

return (
  <Text style={{
      /* 
        fontFamily need be the same name of the file in 
        assets but without the extensions (otf or ttf) 
      */
      fontFamily: "yourCustomFontName", 
  }}>
      {convertFont(item.name)}
  </Text>
)
```

【讨论】：