react native使用自定义图标iconfont与react-native-vector-icons

一、自定义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的后四位
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

4.使用组件

import Icon from '@com/IconCom';
<Icon name="xjyz" />
// 或者
<Icon name="xjyz" style={{color: "red",...}} />
1
2
3
4

二、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"
1

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