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

一、安装图标库

要使用免费的图标库,你可以使用 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.hqwc.cn/news/577980.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度思考:雪花算法snowflake分布式id生成原理详解

雪花算法snowflake是一种优秀的分布式ID生成方案&#xff0c;其优点突出&#xff1a;它能生成全局唯一且递增的ID&#xff0c;确保了数据的一致性和准确性&#xff1b;同时&#xff0c;该算法灵活性强&#xff0c;可自定义各部分bit位&#xff0c;满足不同业务场景的需求&#…

谷粒商城实战(007 压力测试)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第141p-第p150的内容 简介 安装jmeter 安装jmeter 使用中文 这样写就是200个线程循环100次 一共是2万个请求 介绍线程组 添加请求 可以是htt…

【物联网】Qinghub opc-ua 连接协议

基础信息 组件名称 &#xff1a; opcua-connector 组件版本&#xff1a; 1.0.0 组件类型&#xff1a; 系统默认 状 态&#xff1a; 正式发布 组件描述&#xff1a;通过OPCUA连接网关&#xff0c;通过定时任务获取OPCUA相关的数据或通过执行指令控制设备相关参数。 配置文件&a…

软件设计不是CRUD(16):低耦合模块设计理论——行为抽象与设计模式(下)

(接上文《软件设计不是CRUD(15):低耦合模块设计理论——行为抽象与设计模式(中)》) 3.2.4、之前的业务逻辑需要关注后续逻辑的执行成败,并调整自身执行的情况 这个场景在之前场景的基础上增加了新的控制要求,具体来说就是之前已经完成的控制逻辑执行,需要在后续控制…

pdf在浏览器上无法正常加载的问题

一、背景 觉得很有意思给大家分享一下。事情是这样的&#xff0c;开发给我反馈说&#xff0c;线上环境接口请求展示pdf异常&#xff0c;此时碰巧我前不久正好在ingress前加了一层nginx&#xff0c;恰逢此时内心五谷杂陈&#xff0c;思路第一时间便放在了改动项。捣鼓了好久无果…

继承 | Java

继承概念 继承&#xff1a;就是子类继承父类的属性和行为&#xff0c;使得子类对象具有与父类相同的属性、相同的行为。子类可以直接访问父类中的非私有的属性和行为。 定义父类&#xff1a; package com.yh;public class Animal {String color;String brand;int age 5;priva…

农村集中式生活污水分质处理及循环利用技术指南

立项单位&#xff1a;生态环境部土壤与农业农村生态环境监管技术中心、山东文远环保科技股份有限公司、北京易境创联环保有限公司、中国环境科学研究院、广东省环境科学研究院、中铁第五勘察设计院集团有限公司、中华环保联合会水环境治理专业委员会 本文件规定了集中式村镇生活…

实现Flutter应用中的全局导航栏效果

介绍 在移动应用开发中&#xff0c;导航栏是用户与应用交互的重要组成部分之一。它不仅提供了应用程序中不同页面之间的导航功能&#xff0c;还可以展示应用的整体结构和主要功能。因此&#xff0c;设计一个清晰、易用的导航栏对于提升用户体验和应用的可用性至关重要。 在Fl…

【系统架构师】-第15章-面向服务架构设计

面向服务的体系结构 (Service-Oriented Architecture,SOA) 1、应用角度&#xff1a;它着眼于日常的业务应用&#xff0c;并将它们划分为单独的业务功能和流程&#xff0c;即所谓的服务 2、软件基本原理&#xff1a;一个组件模型&#xff0c;它将应用程序的不同功能单元(称为服…

钉钉服务端API报错 43008 参数需要multipart类型

钉钉服务端API报错 43008 参数需要multipart类型 problem 使用媒体文件上传接口&#xff0c;按照文档输入参数&#xff0c;结果返回报错 # 参数 {"access_token": "xxx""type": "image","media": "/Users/xxx/xxx/s…

Vscode 常用插件和快捷键 2024版笔记

1. 常用插件2.常用快捷键 1. 常用插件 1.1 Chinese vscode 转成中文&#xff08;更新版后有进要重装&#xff09; 1.2 Live Server 浏览成网页 1.3 Material Icon Theme 文件目录和文件图标样式&#xff08;没有自定义&#xff09; 1.4 vscode 主题 1.5 代码截图 1.6 代码补…

桌面/WEB端3D开发工具HOOPS SDK简介

Tech Soft 3D在长达25年的时间内&#xff0c;一直通过卓越的3D技术帮助全球超过600家客户推动创新&#xff0c;这些客户包括HEXAGON、SolidWorks、SIEMENS、Aras、ANSYS、AVEVA等各个行业的领军者。 Tech Soft 3D旗下拥有4款原生产品&#xff0c;分别是&#xff1a;HOOPS Excha…