react-native-vector-icons的使用

qq_40526866

于 2023-11-28 13:54:34 发布

阅读量142

点赞数

文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/qq_40526866/article/details/134665550

版权

本文介绍了如何在ReactNative项目中下载并配置react-native-vector-icons库，包括在Android项目的build.gradle文件中添加字体文件和导入使用方法，以展示Faust和Feather图标示例。

摘要由CSDN通过智能技术生成

下载 react-native-vector-icons

npm i react-native-vector-icons

Android配置

在android/app/build.gradle这里加入下面的代码

project.ext.vectoricons = [
    iconFontNames: [ 'FontAwesome.ttf', 'Feather.ttf']  // Specify font files
]

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

点击进入图标地址

使用

// FontAwesome的图标
import FontAwesome from 'react-native-vector-icons/FontAwesome'
// Feather的图标
import Feather from 'react-native-vector-icons/Feather'

// 使用
const Feed = () => (
  <View>
    <Text>我是Feed</Text>
    <FontAwesome name='music' size={16} />
    <Feather name='zap' size={50} />
  </View>
)