一、自定义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