React Native Vector Icons是一个在GitHub上非常受欢迎的React Native图标库。它提供了许多常见的图标集,如FontAwesome和Ionicons等。使用这个库可以简化在React Native项目中使用图标的过程。

一、安装

npm install react-native-vector-icons

二、配置环境(android) 

1.打开android/app/build.gradle添加以下代码

 project.ext.vectoricons = [
     //然后在以下数据中你可以添加需要字体图标文件名
     iconFontNames: [ 'iconfont.ttf' ] 
 ]
 
 apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

2.将node_modules\react-native-vector-icons\Fonts文件下所有的内容(文件)复制到android/app/src/main/assets/fonts文件夹下, 其中assets文件夹和fonts文件夹需要自行创建

3.打开文件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')

4.打开android\app\src\main\java\com\你的项目名称\MainApplication.java 添加以下代码:

import com.oblador.vectoricons.VectorIconsPackage;

三、使用图标

import { View, Text } from 'react-native'
import React from 'react'
//导入字体图标库
import Icon from 'react-native-vector-icons/FontAwesome';
export default function index() {
  return (
    <View>
      <Icon name="home" size={30} color="black" />
    </View>
  )
}

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐