在react-native项目中我们一般使用到 react-native-vector-icons(这里不介绍如何使用react-native-vector-icons按照官方文档即可)但是当react-native-vector-icons里面的默认图标并不能满足我们的日常开发的时候怎么办呢?
那就是只能使用自定义图标来了,这里我们以iconfont为例,(其他图标库引入方式一模一样)
一、在iconfont上选择好你需要的图标,下载并解压如下:
二、将iconfont.tff文件拷贝到android/app/src/main/assets/fonts文件下
三、在你的根目录下新建js/common/MyIcon.js和iconfont.json
编辑Myicon.js
import {createIconSet} from 'react-native-vector-icons';
import glyphMap from './iconfont.json';
const iconSet = createIconSet(glyphMap, 'MyIcon', 'iconfont.ttf');
export default iconSet;
编辑iconfont.json
{ "qiuchang": 59002 }
这里作如下说明,iconfont.json中对应图标名字,和十进制码,我们选择的图标有个Unicode编码,他是十六进制的,而我们要将其转换为十进制,配置在我们的iconfont.json中
四、使用
[](javascript:void(0); "复制代码")
<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">import MyIcon from "../../common/CustomizeIcon";
..... <MyIcon name={'qiuchang'} size={50} style={{
color: '#f33' }}></MyIcon>
........</pre>
](javascript:void(0); "复制代码")