一、自定义iconfont的使用

以下讲的都是针对于android的，ios本人没有电脑，所以暂时没有教程

1.下载图标

在阿里图标库中，下载自己所需的图标到本地，注意下载的事项，如下图

2.解压并使用

解压下载后的图标，并将iconfont.ttf文件复制到android/app/src/main/assets/fonts文件夹下，如果不存在的话，则自己新建对应的文件夹

3.封装IconCom组件 import React, {PropsWithChildren} from 'react'; import {TextStyle} from 'react-native'; import {StyleSheet, Text} from 'react-native'; import iconJson from './icon.json'; // 图标与名称对应，详细参考下面 type IconJsonType = keyof typeof iconJson; interface IconType { name: IconJsonType; // icon名称 style?: TextStyle; // icon样式（可选） } const Icon = (props: PropsWithChildren<IconType>) => { return ( <Text style={[styles.text, {...props.style}]}>{iconJson[props.name]}</Text> ); }; // 默认的字体样式 const styles = StyleSheet.create({ text: { fontFamily: 'iconfont', color: '#333', fontSize: 14, }, }); export default Icon; // icon.json { "xjyz": "\ue785" // \u是固定写法，e785是Unicode的后四位 } 4.使用组件 import Icon from '@com/IconCom'; <Icon name="xjyz" /> // 或者 <Icon name="xjyz" style={{color: "red",...}} /> 二、react-native-vector-icons的使用 1.安装react-native-vector-icons

yarn add react-native-vector-icons

2.设置build.gradle，然后重启即可

android/app/build.gradle中添加如下代码

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

更多配置参考：https://github.com/oblador/react-native-vector-icons#installation

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。