React Native框架开发APP,安装免费的图标库(react-native-vector-icons)并使用详解

news/2025/1/17 16:59:10/

一、安装图标库

要使用免费的图标库,你可以使用 React Native Vector Icons 库。

首先,确保你已经安装了 react-native-vector-icons

npm install --save react-native-vector-iconsnpm install --save-dev @types/react-native-vector-icons执行完命令之后,如果模拟器是开启的,建议重启(我在实验的过程中没有重启,结果图标不显示,排查了很久)

注意:

React Native Vector Icons 库中的图标大部分是免费提供的,但也有一些特定的图标集需要购买许可证。React Native Vector Icons 提供了一系列常用的图标集,比如 Material Icons、FontAwesome 等,它们通常是免费的,可以随意使用。不过,某些专有的图标集可能需要支付费用或购买许可证。

在使用这些图标集时,请确保遵守相关的许可协议,以确保你的使用是合法的。

二、使用详解

查看图标库:https://github.com/oblador/react-native-vector-icons

点击不同图标库可查看图标详情,以Ionicons为例

代码引用并使用:

引用方式一:

import React from 'react';
import { View, Text, Image, TouchableOpacity, Linking } from 'react-native';import Ionicons from 'react-native-vector-icons/Ionicons';//引入自定义图标库const LoginPage = () => {return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><View style={{ position: 'absolute', top: 0, left: 0, 
right: 0, padding: 10, flexDirection: 'row', alignItems: 'center' }}><TouchableOpacity onPress={handleHomeNavigation}><Ionicons name={'accessibility-outline'} size={30} color={'red'}></Ionicons>//使用图标库</TouchableOpacity></View></View>);
};export default LoginPage;

引用方式二:

import React from 'react';
import { View, Text, Image, TouchableOpacity, Linking } from 'react-native';import Icon from 'react-native-vector-icons/Ionicons';const LoginPage = () => {return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><View style={{ position: 'absolute', top: 0, left: 0, 
right: 0, padding: 10, flexDirection: 'row', alignItems: 'center' }}><TouchableOpacity onPress={handleHomeNavigation}><Icon name="accessibility-outline" size={30} color="red" />//使用图标库</TouchableOpacity></View></View>);
};export default LoginPage;

Ionicons 和 Icon 之间的区别在于它们代表的具体图标集合和用法。

  1. Ionicons: Ionicons 是一个开源的图标库,专门为 Ionic Framework 设计。Ionicons 包含了大量现代化的图标,适合在移动应用或 Web 应用中使用。它的图标设计简洁、清晰,适合用于各种按钮、菜单、和界面元素。

  2. Icon: Icon 是一个更通用的术语,代表任何一种图标或图形符号。通常情况下,Icon 可以指代任何种类的图标,不一定局限于特定的图标库或设计风格。在不同的开发环境中,开发者可以使用不同的图标库或自定义图标来创建各种图标。

总的来说,Ionicons 是一个具体的图标库,适合于 Ionic Framework,而 Icon 是一个更广泛的概念,可以代表任何种类的图标。前者具有特定的用途和设计风格,后者则是一个更通用的术语。


http://www.ppmy.cn/news/1405074.html

相关文章

网络安全 | 什么是DDoS攻击?

关注WX&#xff1a;CodingTechWork DDoS-介绍 DoS&#xff1a;Denial of Service&#xff0c;拒绝服务。DDoS是通过大规模的网络流量使得正常流量不能访问受害者目标&#xff0c;是一种压垮性的网络攻击&#xff0c;而不是一种入侵手段。NTP网络时间协议&#xff0c;设备需要…

车载电子电器架构 —— 局部网络管理汇总

车载电子电器架构 —— 局部网络管理汇总 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明…

一些关于机器学习的练习

为了加深机器学习基础并通过实践学习&#xff0c;收集了以下练习&#xff0c;覆盖了从数据探索、预处理到模型构建和评估的整个流程。这些练习按照机器学习的主要类型分为三部分&#xff1a;监督学习、无监督学习和强化学习。 监督学习练习 房价预测&#xff08;线性回归&…

OSCP靶场--Snookums

OSCP靶场–Snookums 考点(RFI信息收集数据库发现凭据bas64解码su切换用户/etc/passwd覆盖提权) 1.nmap扫描 ##┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.216.58 -sV -sC -Pn --min-rate 2500 -p- Starting Nmap 7.92 ( https://nmap.org ) at 2024-03-30 03:39 E…

【调试方法】C代码中dump中间数据的方法

一&#xff0c;简介 本文主要介绍&#xff0c;如何在C语言代码中将音频流数据进行写入文件&#xff0c;方便调试定位问题&#xff1a; 二&#xff0c;函数实现 按int8_t写入 #include <stdio.h>int32_t write_int8_t_data(int8_t *name, int8_t *buffer, int32_t dat…

一些常见的k8s问题和答案

什么是 Kubernetes&#xff08;K8s&#xff09;&#xff1f; Kubernetes是一个开源的容器编排平台&#xff0c;用于自动化部署、扩展和管理容器化应用程序。由多个组件组成&#xff0c;每个组件都有不同的作用和功能。以下是Kubernetes的主要组件及其作用&#xff1a; kube-ap…

golang语言系列:学习路线图

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 golang语言系列 文章&#xff0c;主要展示golang语言学习的全路线图 参考&#xff1a;https://github.com/darius-khll/golang-developer-roadmap/blob/master/i18n/zh-CN/ReadMe-zh-CN.md

python Flask扩展:如何查找高效开发的第三方模块(库/插件)

如何找到扩展以及使用扩展的文档 一、背景二、如何寻找框架的扩展&#xff1f;三、找到想要的扩展四、找到使用扩展的文档五、项目中实战扩展 一、背景 刚入门python的flask的框架&#xff0c;跟着文档学习了一些以后&#xff0c;想着其实在项目开发中&#xff0c;经常会用到发…