react-native - React Native 自定义图标无法显示

Question

我正在尝试添加自定义图标，我按照以下教程进行操作： 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 并且屏幕显示一个问号而不是图标。

Answer 1

首先使用你的 font.ttf 或 font.otf 在里面"./assets/fonts" 运行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>
)
```