教你轻松在React Native中使用自定义iconfont

  • Z时代
  • 2024-01-10
  • 分类：综合

react

在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中

四、使用

import MyIcon from "../../common/CustomizeIcon";
.....
<MyIcon name={'qiuchang'} size={50} style={{
             color: '#f33'
           }}></MyIcon>
........

五，加入你的产品的图标全部都是原创的，那么你就需要你们ui给你制作对应.ttf文件，步骤和上面一直，还有就是，可以使用脚本自动对应json的映射关系........

以上是 教你轻松在React Native中使用自定义iconfont 的全部内容， 来源链接： utcz.com/z/383786.html

回到顶部