在前端开发中,经常会用到iconfont图标库来管理图标,在RN开发中有时候同样需要如此。在百度上搜索过RN相关的图标管理方案,发现都较为复杂。于是写下了本篇博客,为大家介绍另外两种更优化的图标应用的方案,供大家学习参考。
该方案同样适用于字体变更。从iconfont库下载好图标脚本,结构如下:
打开iconfont.ttf文件,我们看一下字体全称是什么?正常情况下都是iconfont,先记下。
在app根目录中创建新目录src/assets/fonts用来存放字体文件,将 iconfont.ttf 拷贝到该目录下
打开package.json文件,配置字体路径
"rnpm": {
"assets": [
"./src/assets/fonts/"
]
}
执行以下命令,执行完成后,重启编辑器
react-native link
重启后会发现该字体文件已经自动拷贝到 android/app/src/main/assets/fonts目录
和配置到Info.plist文件中
此处要比对一下字体名称是否与开始的字体名称相一致,如例子中为iconfont字体
至此,已经完成了全部配置,那么开始使用图标吧。打开iconfont的浏览页面:
这里用到的是后4位字母为标记,引用时使用{'\u'+后4位字母},通过style中的fontSize来调整大小。
贴上代码
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
class IconfontComp extends Component {
render(){
return(
iconfont引用:
{'\ueb61'}
{'\ueb62'}
{'\ueb63'}
{'\ueb64'}
{'\ueb65'}
);
}
}
const styles = StyleSheet.create({
viewStyle: {
flexDirection: 'row',
marginTop: 10
},
iconStyle: {
fontFamily: 'iconfont',
fontSize: 24,
marginTop: 10,
marginLeft: 10
},
svgStyle: {
marginTop: 10,
marginLeft: 30
}
});
export default IconfontComp;
效果:
如果有疑问可以也可以参考一下这篇文章(需要):https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e
除了上面通过字体文件的方式引用图标外,还可以通过svg的方式引用图标。
首先需要安装react-native-svg插件
npm install react-native-svg --save
react-native link react-native-svg
引入react-native-svg插件之后,就可以在react-native中编写svg图标了。将iconfont上的图标以svg的格式下载,会得到后缀名为.svg的文件。用记事本打开.svg文件,内容格式如下:
记住,我们只需要svg标签部分,将红框部分拷贝下来,并将这部分代码粘贴到渲染容器中,如例子中黏贴至View容器下。
贴上代码:
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Svg, { Path } from 'react-native-svg';
class IconfontComp extends Component {
render(){
return(
SVG引用:
);
}
}
const styles = StyleSheet.create({
viewStyle: {
flexDirection: 'row',
marginTop: 10
},
iconStyle: {
fontFamily: 'iconfont',
fontSize: 24,
marginTop: 10,
marginLeft: 10
},
svgStyle: {
marginTop: 10,
marginLeft: 30
}
});
export default IconfontComp;
粘贴后,有三处需要更改
重新启动服务,效果: