react native项目中使用阿里iconfont字体图标的终极方案，无它！

最新推荐文章于 2024-08-29 09:10:21 发布

qq_37284484

最新推荐文章于 2024-08-29 09:10:21 发布

阅读量646

点赞数

文章标签： react native 图标设计

本文链接：https://blog.csdn.net/qq_37284484/article/details/104798260

版权

一、配置
在项目根下面创建目录assets/fonts/，并将下载的.ttf字体文件放入之；

在项目根下面创建文件react-native.config.js，里面内容如下：
module.exports = {
assets: ['./assets']
};

执行react-native link即可（这步实际上是可选的）。

二、使用
通过Text组件使用（结合unicode码使用，可在下载的字体包里面的unicode.html中查看各个图标的unicode码）：
<Text style={{fontFamily:'iconfont'}}></Text>

三、字体文件更新问题
需要换两个位置：
一个是原始的assets/fonts/下面的字体文件，它是IOS引用的（IOS引用的就是原始文件）；
另一个是android/app/src/main/assets/fonts下面的那个字体文件，它是安卓引用的，安卓是拷贝过去了的。

注意：看到许多人在基于react-native-vector-icons使用，甚至有人采用的方案是修改项目下面node_modules下面的react-native-vector-icons相关文件，这是极不可取的。node_modules是依赖目录，里面的内容并不是稳定的，很有可能某天会删掉后再yarn install，如此对下面的修改就会全部丢失。