react native 使用 iconfont

react native 使用 iconfont

在native中使用iconfont作为图标

iconfont图标库下载

可在 http://www.iconfont.cn 下载

下载完成后的目录中有字体文件：

iconfont.ttf

拷贝字体文件

Android:

在 Android/app/src/main 目录下新建文件夹 assets/fonts/
然后将iconfont.ttf文件拷贝到assets/fonts/目录下

使用

在下载的字体文件夹中有demo_unicode.html文件
打开文件，在界面有显示图标以及对应的unicode码值，如

  • 在Text标签中使用 
  • 并设置style:{fontFamily : 'iconfont'}。如：
1
<Text style={{fontFamily:'iconfont'}}>&#xe697;</Text>

更方便的使用

在Text标签中可以直接写入 &#xe697;
但是如果要使用变量来表示，则不能使用同样的字符串，需要使用对应的unicode字符串。
例如：
&#xe697; 应使用 \ue697来表示。

完整示例：

1
2
let back = '\ue697';
<Text style={{fontFamily:'iconfont'}}>{back}</Text>

本文地址： http://gehaiqing.com/blog/2017/02/22/20170222-react-native-iconfont/