react-native-vector-icons添加自定义字体

react

首先我们得保证自己已经添加了react-native-vector-icons这个库,至于怎么添加请自行查看官方文档
react-native-vector-icons文档链接

react-native-vector-icons官方添加自定义字体一共有三种方法

我们现在已第三种方法作为示范(android为例)

1. 首先我们可以到阿里的图标库下载自己要用到的图标(记得是要以svg的格式下载)

2. 把下载下来的svg图标上传到IcoMoon上

3. IcoMoon的地址链接

点击Import lcons上传图标

添加完后点击下方的 Generate Font

跳转到另一个页面

在这里你可以把图标的名字进行修改然后我们再按下方的download按钮下载字体

3. 下载完字体后打开压缩包可以看到有一个selection.json文件,把这个文件和fonst文件夹里的.ttf文件拷贝下来

弄完以上步骤后我们的重头戏要来了

1. 在项目中创建一个assets文件夹,在assets文件夹里在创建一个fonts文件夹把之前拷贝下来的.ttf文件放进去,把selection.json文件放进assets文件夹里。

2. 在assets文件夹中创建一个js文件,文件名最好是以字体的名字命名。
比如:字体名字叫icomoon,所以我的js文件就叫Icomoon.js

3. 在js文件中添加如下代码

icoMoonConfig 这个的json路径是你自己的selection.json路径。

4.我们还要把之前的.ttf文件在拷贝一份出来放到android–>src–>main–>assets–>fonts里面(如果没有assets文件夹和fonts文件夹话自己建一个就好了)

做完以上操作之后我们开始进行使用

1.导入之前创建好的字体文件(路径是看你们自己的js文件放置的位置)

2.编写代码

3.react-native run-android 一下就行了

PS:如果还不行的话就react-native link 一下然后在react-native run-android 一下应该就可以了

以上是 react-native-vector-icons添加自定义字体 的全部内容, 来源链接: utcz.com/z/383183.html

回到顶部