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

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

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

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

二、使用
通过Text组件使用(结合unicode码使用,可在下载的字体包里面的unicode.html中查看各个图标的unicode码):
<Text style={{fontFamily:'iconfont'}}>&#xe617;</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,如此对下面的修改就会全部丢失。

发布了5 篇原创文章 · 获赞 1 · 访问量 6705

猜你喜欢

转载自blog.csdn.net/qq_37284484/article/details/104798260