react-native-vector-icons添加自定义字体
首先我们得保证自己已经添加了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