最近在研究react native的字体。想把阿里的字体库放到RN里使用,网上找了很多文章都觉得不合适。所以自己经过多次实践总结了一个亲测可用的方法:
我最开始百度出来的文章,不少都推荐借用 react-native-vector-icons,但是我觉得这一步还是增加了不少无用代码。 其实使用 iconfont,本质上就是使用一种“图标形状的字体”,所以没必要使用react-native-vector-icons。
这个不用细说,用过阿里图标库的人都知道怎么下载。实在不知道请自行百度。
在根目录下创建文件夹并把字体库文件iconfont.ttf 复制到建好的文件夹下。如图:
注:如果项目刚刚初始化还没有启动过,请先启动一次项目。然后再往下继续 把下面的代码复制到package.json文件里。这是一个把配置都交给 react-native 的一个简单方法。 在
"rnpm": { "assets": [ "./assets/fonts/" ] }然后运行react-native link 你就可以在 plist 文件(iOS)或 android/app/src/main/assets/fonts(安卓)中看到对应配置。如图: 安装后需要重启 react-native。
打开在 iconfont 下载的图标集会有这个文件 里面可以看到对应图标的 unicode 把你使用的图标放到标签中。例子中用的是第一个图标其中选用e697,然后在前面加上\u组成最后需要的unicode\ue679
<Text style={{ fontFamily: "iconfont", fontSize: 46, color: 'red' }}>{'\ue679'}</Text>有一点需要注意,写在 fontFamily 的字体名称要使用全名(而不是文件名)
