React Native 使用自定义的Font Icon

Posted by zhulinpinyu on June 1, 2017

添加字体

字体文件path:

字体文件放入./assets/fonts/font_name.ttf

package.json添加配置

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

此处./assets/fonts为字体所在文件夹的路径

运行命令使字体生效

react-native link

使用自定义的字体文件

安装工具

yarn add react-native-vector-icons

使用

import { createIconSet } from 'react-native-vector-icons'

const glyphMap = { 'ICON-NAME': 65 };
const MyIcon = createIconSet(glyphMap, '字体名称');

<MyIcon
  name="ICON-NAME"
  size={45}
  color="#ff0000"
/>

备注:

  • glyphMap 中的 65是字体中对应图标的十进制数值。也就是字体中 \u0041就是此处的65。字体中数值采用的是十六进制。

  • 注意createIconSet的第二个参数是字体名称不是字体文件的文件名

实际效果

Alt text

Thanks:
https://blog.bam.tech/developper-news/add-custom-icons-to-your-react-native-application
https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4