3. RN笔记-icon图标的使用和阿里图标的使用

RN笔记-icon图标的使用和阿里图标的使用

安装react-native-vector-icons

npm i react-native-vector-icons

关联 react-native-vector-icons

react-native link react-native-vector-icons

关联react-native-vector-icons也可以手动关联

找到 android/settings.gradle 添加如下代码

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

关联完毕后 需要去android文件夹下引用

在 android/app/build.gradle 文件中 找到dependencies 在里面添加如下代码

dependencies {
	...
    // 配置图标
	implementation project(':react-native-vector-icons')
    ...
}

使用官方内置图标

import Icon from 'react-native-vector-icons/FontAwesome';
<Icon name="rocket" size={30} color="#900" />

★ 官方图标地址

使用阿里图标库的图标

进入阿里图标库 自己的项目中 并下载文件

得到一个压缩文件 , 解压后得到以下文件

我们需要的就两个 iconfont.ttf字体文件和iconfont.json配置文件

将iconfont.ttf放到 android/app/src/main/assets/fonts/中 , 没有该文件的话自己创建

然后就要用到iconfont.json了

创建一个自己的Icon组件 , 比如: Components/MyIcon

// 如果是TS 要install @types/react-native-vector-icons
import {createIconSet} from 'react-native-vector-icons'; 
// 引入json
import iconfont from './iconfont.json';
// 图标对象
// 图标对象的格式为: 
// { 图标名:图标值(十进制) }
let icons:any = {};
(iconfont as any).glyphs.forEach((item:any) => {
    // icon- 是前缀
  	icons["icon-"+item.font_class] = item.unicode_decimal;
})
const Icon = createIconSet(icons, 'iconfont', 'iconfont.ttf');
export default Icon;

自定义前缀

更改前缀后重新下载啊, 替换ttf文件, 然后在上面代码中更改前缀

使用方式

import MyIcon from "./Components/MyIcon"
function Test(){
    return <View>
    	<MyIcon name={"icon-tianqi-yintian"} size={24} color={"gray"} />
    </View>
}