React-Native配置自定义字体文件
2017-05-24 本文已影响410人
以德扶人
从阿里巴巴矢量图标库中选择适合的图标,并打包下载
下载后得到如下文件,iconfont.tff
即为所需文件
在根工程目录下创建assets/fonts/
文件夹,导入iconfont.ttf
文件
- iOS
把fonts
文件夹拖到iOS工程目录下
注意最终得到的是蓝色的文件夹
修改Info.plist
在info.plist文件中添加key为Fonts provided by application
的Array中添加itemfonts/iconfont.ttf
,到此为止,已经可以在RN项目(iOS端)中使用对应fontFamily
:iconfont
中的字体图标了如下图所示:
-
Android
之所以在工程目录下创建assets/fonts
这样的路径,就是为了iOS和Android统一,因为Android必须要把字体文件放在[project root]/android/app/src/main/assets/fonts/
文件夹下才能生效,好吧,我们把工程目录下的assets
拷贝一份(可以通过编写脚本自动执行)到Android/app/src/main
目录下
- 使用
<Text style={{ fontFamily:'iconApp',fontSize:26,color:'gray',marginTop:15}} ></Text>
fontFamily可以设置好几个字体库在文件里面,选择你需要的来添加。
当然,在RN,还可以用react-native-vector-icons
这个插件。