使用react-native-vector-icons
React Native Vector Icons是一个在GitHub上非常受欢迎的React Native图标库。它提供了许多常见的图标集,如FontAwesome和Ionicons等。使用这个库可以简化在React Native项目中使用图标的过程。
·
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>
)
}
更多推荐
所有评论(0)