react native android react.js 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';

★ 官方图标地址

使用阿里图标库的图标

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

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

我们需要的就两个 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

}

参考文章