React-Native配置自定义字体文件

从阿里巴巴矢量图标库中选择适合的图标,并打包下载

React-Native配置自定义字体文件_第1张图片

下载后得到如下文件,iconfont.tff
即为所需文件


React-Native配置自定义字体文件_第2张图片

在根工程目录下创建assets/fonts/
文件夹,导入iconfont.ttf
文件


React-Native配置自定义字体文件_第3张图片
  1. iOS
    把fonts
    文件夹拖到iOS工程目录下

    React-Native配置自定义字体文件_第4张图片

    React-Native配置自定义字体文件_第5张图片

    注意最终得到的是蓝色的文件夹

修改Info.plist
在info.plist文件中添加key为Fonts provided by application
的Array中添加itemfonts/iconfont.ttf
,到此为止,已经可以在RN项目(iOS端)中使用对应fontFamily
:iconfont
中的字体图标了如下图所示:

React-Native配置自定义字体文件_第6张图片

  1. Android
    之所以在工程目录下创建assets/fonts
    这样的路径,就是为了iOS和Android统一,因为Android必须要把字体文件放在[project root]/android/app/src/main/assets/fonts/
    文件夹下才能生效,好吧,我们把工程目录下的assets
    拷贝一份(可以通过编写脚本自动执行)到Android/app/src/main
    目录下


    React-Native配置自定义字体文件_第7张图片
  2. 使用

fontFamily可以设置好几个字体库在文件里面,选择你需要的来添加。

当然,在RN,还可以用react-native-vector-icons
这个插件。

你可能感兴趣的:(React-Native配置自定义字体文件)