使用react-native-vector-icons

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文件夹需要自行创建

使用react-native-vector-icons_第1张图片

使用react-native-vector-icons_第2张图片

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 (
    
      
    
  )
}

你可能感兴趣的:(react,native,react.js,javascript)