React Native 全栈开发实战班 - 图片加载与优化

在移动应用中，图片加载与优化 是提升用户体验和减少资源消耗的重要环节。图片加载不当可能导致应用卡顿、内存泄漏甚至崩溃。本章节将介绍 React Native 中常用的图片加载方法，包括 Image 组件的使用、第三方图片加载库（如 react-native-fast-image）以及图片优化的最佳实践。

3.1 图片加载基础

React Native 提供了内置的 Image 组件，用于加载和显示图片。Image 组件支持多种图片资源，包括本地图片、网络图片以及 Base64 编码的图片。

3.1.1 基本用法

加载网络图片：

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';const NetworkImageExample = () => {return (<View style={styles.container}><Imagesource={{ uri: 'https://example.com/image.png' }}style={styles.image}resizeMode="cover"/></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},image: {width: 200,height: 200,borderRadius: 10,},
});export default NetworkImageExample;

加载本地图片：

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';const LocalImageExample = () => {return (<View style={styles.container}><Imagesource={require('./assets/images/local-image.png')}style={styles.image}resizeMode="contain"/></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},image: {width: 200,height: 200,borderRadius: 10,},
});export default LocalImageExample;

加载 Base64 图片：

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';const Base64ImageExample = () => {const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...';return (<View style={styles.container}><Imagesource={{ uri: base64Image }}style={styles.image}resizeMode="stretch"/></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},image: {width: 200,height: 200,borderRadius: 10,},
});export default Base64ImageExample;
3.1.2 常用属性
  • source： 图片资源，可以是网络地址、本地路径或 Base64 编码。
  • style： 图片样式，包括宽度、高度、边框圆角等。
  • resizeMode： 图片缩放模式，包括 cover, contain, stretch, repeat, center。
  • defaultSource： 占位图，在图片加载完成前显示。
  • onLoad / onError / onLoadStart / onLoadEnd： 图片加载事件。

示例：

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';const ImageEventsExample = () => {return (<View style={styles.container}><Imagesource={{ uri: 'https://example.com/image.png' }}style={styles.image}resizeMode="cover"defaultSource={require('./assets/images/placeholder.png')}onLoad={() => console.log('Image loaded')}onError={(error) => console.error('Image loading failed:', error)}/></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},image: {width: 200,height: 200,borderRadius: 10,},
});export default ImageEventsExample;
3.2 使用第三方图片加载库

虽然 React Native 的 Image 组件可以满足基本的图片加载需求，但在处理大量图片或需要更高级的功能时，使用第三方图片加载库可以提供更好的性能和用户体验。

3.2.1 react-native-fast-image

react-native-fast-image 是一个高性能的图片加载库，支持图片缓存、占位图、错误处理等功能。

安装：

npm install react-native-fast-image

使用示例：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import FastImage from 'react-native-fast-image';const FastImageExample = () => {return (<View style={styles.container}><FastImagestyle={styles.image}source={{uri: 'https://example.com/image.png',priority: FastImage.priority.normal,}}resizeMode={FastImage.resizeMode.cover}defaultSource={require('./assets/images/placeholder.png')}onLoadStart={() => console.log('Image loading started')}onLoadEnd={() => console.log('Image loading ended')}onError={(error) => console.error('Image loading failed:', error)}/></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},image: {width: 200,height: 200,borderRadius: 10,},
});export default FastImageExample;

主要特点：

  • 高性能： 使用原生代码实现，性能优于 Image 组件。
  • 缓存管理： 支持内存缓存和磁盘缓存。
  • 占位图： 支持设置占位图。
  • 错误处理： 支持错误回调。
  • 优先级控制： 支持设置图片加载优先级。
3.2.2 react-native-svg

如果需要加载 SVG 图片，可以使用 react-native-svg 库。

安装：

npm install react-native-svg

使用示例：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Image } from 'react-native-svg';const SvgImageExample = () => {return (<View style={styles.container}><Svg height="200" width="200"><Imagehref="https://example.com/image.svg"width="200"height="200"/></Svg></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},
});export default SvgImageExample;
3.3 图片优化

优化图片加载可以显著提升应用性能，减少资源消耗。以下是一些常见的图片优化策略：

3.3.1 图片压缩

压缩图片可以减少图片大小，从而加快加载速度。可以使用图像压缩工具（如 ImageOptim, TinyPNG）进行压缩。

示例：

  • 使用 ImageOptim 压缩图片： 打开 ImageOptim，将需要压缩的图片拖入应用，ImageOptim 会自动压缩图片并删除不必要的元数据。

  • 使用 TinyPNG 压缩图片： 上传图片到 TinyPNG 网站，TinyPNG 会自动压缩图片并提供下载链接。

3.3.2 图片格式

选择合适的图片格式可以减少图片大小：

  • JPEG： 适用于照片，压缩率高，但不支持透明背景。
  • PNG： 适用于需要透明背景的图片，但文件大小较大。
  • WebP： 压缩率高，支持有损和无损压缩，但需要原生支持。

示例：使用 WebP 格式的图片

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';const WebPImageExample = () => {return (<View style={styles.container}><Imagesource={{ uri: 'https://example.com/image.webp' }}style={styles.image}resizeMode="cover"/></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},image: {width: 200,height: 200,borderRadius: 10,},
});export default WebPImageExample;

注意： 确保目标平台支持 WebP 格式。React Native 默认支持 WebP，但某些旧版本可能需要额外配置。

3.3.3 图片尺寸

根据设备屏幕尺寸和分辨率加载不同尺寸的图片，避免加载过大的图片。

示例：响应式图片加载

import React from 'react';
import { View, Image, StyleSheet, Dimensions } from 'react-native';const { width } = Dimensions.get('window');const ResponsiveImageExample = () => {return (<View style={styles.container}><Imagesource={{ uri: `https://example.com/image-${width}w.jpg` }}style={styles.image}resizeMode="cover"/></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},image: {width: width,height: 200,},
});export default ResponsiveImageExample;

解释：

  • 根据设备的宽度动态加载不同尺寸的图片，例如 image-320w.jpg, image-480w.jpg 等。
3.3.4 图片懒加载

对于长列表中的图片，可以使用懒加载技术，避免一次性加载所有图片，从而提高应用性能。

示例：使用 react-native-lazyload 实现图片懒加载

  1. 安装 react-native-lazyload

    npm install react-native-lazyload

  2. 使用示例

    import React from 'react';
import { View, Image, StyleSheet, FlatList, Dimensions } from 'react-native';
import { LazyloadImage } from 'react-native-lazyload';const images = ['https://example.com/image1.jpg','https://example.com/image2.jpg','https://example.com/image3.jpg',// 更多图片
];const LazyLoadImageExample = () => {return (<FlatListdata={images}renderItem={({ item }) => (<LazyloadImagestyle={styles.image}source={{ uri: item }}resizeMode="cover"defaultSource={require('./assets/images/placeholder.png')}/>)}keyExtractor={(item, index) => index.toString()}// 其他 FlatList 属性/>);
};const styles = StyleSheet.create({image: {width: Dimensions.get('window').width,height: 200,marginBottom: 10,},
});export default LazyLoadImageExample;

解释：

  • LazyloadImage 组件会在图片进入可视区域时加载图片。
  • defaultSource 属性用于设置占位图。
3.3.5 图片缓存

合理使用图片缓存可以减少网络请求次数，提高图片加载速度。

示例：使用 react-native-fast-image 的缓存功能

import React from 'react';
import { View, StyleSheet } from 'react-native';
import FastImage from 'react-native-fast-image';const CachedImageExample = () => {return (<View style={styles.container}><FastImagestyle={styles.image}source={{uri: 'https://example.com/image.png',priority: FastImage.priority.normal,cache: FastImage.cacheControl.web,}}resizeMode={FastImage.resizeMode.cover}/></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},image: {width: 200,height: 200,borderRadius: 10,},
});export default CachedImageExample;

解释：

  • cache: FastImage.cacheControl.web 设置图片缓存策略为 Web 缓存（默认）。
  • react-native-fast-image 支持内存缓存和磁盘缓存，可以根据需要调整缓存策略。
3.3.6 图片预加载

对于需要快速显示的图片，可以使用预加载技术，提前加载图片到缓存中。

示例：使用 react-native-fast-image 的预加载功能

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import FastImage from 'react-native-fast-image';const PreloadImageExample = () => {React.useEffect(() => {FastImage.preload([{ uri: 'https://example.com/image1.png' },{ uri: 'https://example.com/image2.png' },{ uri: 'https://example.com/image3.png' },// 更多图片]);}, []);return (<View style={styles.container}><Text>Preloading images...</Text></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},
});export default PreloadImageExample;

解释：

  • FastImage.preload 方法可以预加载多张图片到缓存中。
3.4 总结

本章节介绍了 React Native 中的图片加载与优化方法，包括 Image 组件的使用、第三方图片加载库（如 react-native-fast-image）以及图片优化的最佳实践。通过合理选择图片加载方案和优化策略，可以显著提升应用性能，提高用户体验。

课后作业

  1. 使用 react-native-fast-image 实现图片懒加载和预加载。
  2. 优化应用中的图片资源，使用合适的图片格式和

作者简介

前腾讯电子签的前端负责人，现 whentimes tech CTO，专注于前端技术的大咖一枚！一路走来，从小屏到大屏，从 Web 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

温馨提示：可搜老码小张公号联系导师

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/476113.html

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

相关文章

Easyexcel（5-自定义列宽）

Easyexcel（5-自定义列宽）

相关文章链接 Easyexcel&#xff08;1-注解使用&#xff09;Easyexcel&#xff08;2-文件读取&#xff09;Easyexcel&#xff08;3-文件导出&#xff09;Easyexcel&#xff08;4-模板文件&#xff09;Easyexcel&#xff08;5-自定义列宽&#xff09; 注解 ColumnWidth Data…
阅读更多...
FIFO和LRU算法实现操作系统中主存管理

FIFO和LRU算法实现操作系统中主存管理

FIFO&#xff0c;用数组实现 1和2都是使用nextReplace实现新页面位置的更新 1、不精确时间&#xff1a;用ctime输出运行时间都是0.00秒 #include <iostream> #include <iomanip> #include<ctime>//用于计算时间 using namespace std;// 页访问顺序 int pa…
阅读更多...
Unity3d场景童话梦幻卡通Q版城镇建筑植物山石3D模型游戏美术素材

Unity3d场景童话梦幻卡通Q版城镇建筑植物山石3D模型游戏美术素材

注明&#xff1a;网络素材&#xff0c;仅供学习使用&#xff01; https://download.csdn.net/download/elineSea/90017291
阅读更多...
batchnorm与layernorn的区别

batchnorm与layernorn的区别

1 原理 简单总结&#xff1a; batchnorn 和layernorm是在不同维度上对特征进行归一化处理。 batchnorm在batch这一维度上&#xff0c; 对一个batch内部所有样本&#xff0c; 在同一个特征通道上进行归一化。 举个例子&#xff0c; 假设输入的特征图尺寸为16x224x224x256&…
阅读更多...
SpringAOP模拟实现

SpringAOP模拟实现

文章目录 1_底层切点、通知、切面2_切点匹配3_从 Aspect 到 Advisor1_代理创建器2_代理创建时机3_Before 对应的低级通知 4_静态通知调用1_通知调用过程2_模拟 MethodInvocation 5_动态通知调用 1_底层切点、通知、切面 注意点&#xff1a; 底层的切点实现底层的通知实现底层的…
阅读更多...
标准驱动开发（Linux2.6（cdev） 的开发）

标准驱动开发（Linux2.6（cdev） 的开发）

Linux2.6&#xff08;cdev&#xff09; 的开发 目录 Linux2.6&#xff08;cdev&#xff09; 的开发 回顾 Linux2.6&#xff08;cdev&#xff09; 的开发 了解一下 Linux2.6 开发框架 学习 Linux2.6 的相关接口 1、申请设备号&#xff08;alloc_chrdev_region&#xff09…
阅读更多...
硬件知识 cadence16.6 原理图输出为pdf 网络名下划线偏移 （ORCAD）

硬件知识 cadence16.6 原理图输出为pdf 网络名下划线偏移 （ORCAD）

1. cadence原理图输出为PDF网络名下划线偏移 生这种情况的原因 1. 设计的原理图图纸大小比正常的 A4图纸大。 2. 打印为PDF 的时候&#xff0c;打印机的设置有问题。 2.cadence原理图输出为 PDF网络名下划线偏移的情况 可以看到上图&#xff0c;网络名往上漂移。 3. 解决办法 …
阅读更多...
HarmonyOs DevEco Studio小技巧31--卡片的生命周期与卡片的开发

HarmonyOs DevEco Studio小技巧31--卡片的生命周期与卡片的开发

Form Kit简介 Form Kit&#xff08;卡片开发服务&#xff09;提供一种界面展示形式&#xff0c;可以将应用的重要信息或操作前置到服务卡片&#xff08;以下简称“卡片”&#xff09;&#xff0c;以达到服务直达、减少跳转层级的体验效果。卡片常用于嵌入到其他应用&#xff0…
阅读更多...
SSRF漏洞利用

SSRF漏洞利用

2.漏洞利用 2.1 SSRF中URL的伪协议 file:// 从⽂件系统中获取⽂件内容&#xff0c;如&#xff0c;file:///etc/passwd dict:// 字典服务器协议&#xff0c;访问字典资源&#xff0c;如dict://ip:6379/info sftp:// ssh⽂件传输协议或安全⽂件传输协议 ldap:// 轻量级⽬录访问…
阅读更多...
nacos镜像启动时候报Public Key Retrieval is not allowed

nacos镜像启动时候报Public Key Retrieval is not allowed

在nacos的配置文件里加上一句allowPublicKeyRetrievaltrue
阅读更多...
【pytorch-04】：线性回归案例（手动构建）

【pytorch-04】：线性回归案例（手动构建）

文章目录 1 构建数据集2 构建假设函数3 损失函数4 优化方法5 训练函数6.总结 1 构建数据集 为什么构建数据加载器&#xff1f; 在进行训练的时候都是采用的不是全部的数据&#xff0c;而是采用一个batch_size的数据进行训练&#xff0c;每次向模型当中送入batch_size数据&#…
阅读更多...
实验室管理效率提升：Spring Boot技术的力量

实验室管理效率提升：Spring Boot技术的力量

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…
阅读更多...
STM32H7开发笔记（2）——H7外设之多路定时器中断

STM32H7开发笔记（2）——H7外设之多路定时器中断

STM32H7开发笔记&#xff08;2&#xff09;——H7外设之多路定时器中断 文章目录 STM32H7开发笔记&#xff08;2&#xff09;——H7外设之多路定时器中断0.引言1.CubeMX配置2.软件编写 0.引言 本文PC端采用Win11STM32CubeMX4.1.0.0Keil5.24.2的配置&#xff0c;硬件使用STM32H…
阅读更多...
springboot基于微信小程序的旧衣回收系统的设计与实现

springboot基于微信小程序的旧衣回收系统的设计与实现

摘 要 微信小程序的旧衣回收系统是一种专为环保生活设计的应用软件。这款小程序的主要功能包括&#xff1a;系统首页、个人中心、用户管理、回收人员管理、旧衣服分类管理、旧衣信息管理、回收预约管理、回收派单管理、回收订单管理、积分商品管理、积分兑换管理、管理员管理、…
阅读更多...
路由缓存后跳转到新路由时，上一路由中的tip信息框不销毁问题解决

路由缓存后跳转到新路由时，上一路由中的tip信息框不销毁问题解决

上一路由tip信息框不销毁问题解决 路由缓存篇问题描述及截图解决思路关键代码 路由缓存篇 传送门 问题描述及截图 路由缓存后跳转新路由时&#xff0c;上一个路由的tip信息框没销毁。 解决思路 在全局路由守卫中获取DOM元素&#xff0c;通过css去控制 关键代码 修改文…
阅读更多...
40分钟学 Go 语言高并发：并发下载器开发实战教程

40分钟学 Go 语言高并发：并发下载器开发实战教程

并发下载器开发实战教程 一、系统设计概述 1.1 功能需求表 功能模块描述技术要点分片下载将大文件分成多个小块并发下载goroutine池、分片算法断点续传支持下载中断后继续下载文件指针定位、临时文件管理进度显示实时显示下载进度和速度进度计算、速度统计错误处理处理下载过…
阅读更多...
【前端】JavaScript中的indexOf()方法详解：基础概念与背后的应用思路

【前端】JavaScript中的indexOf()方法详解：基础概念与背后的应用思路

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: 前端 文章目录 &#x1f4af;前言&#x1f4af;什么是indexOf()方法&#xff1f;参数解释返回值示例 &#x1f4af;indexOf() 方法的工作原理&#x1f4af;特殊案例&#xff1a;undefined 的处理示例代码图示解释 &#x1f4af;i…
阅读更多...
HarmonyOS4+NEXT星河版入门与项目实战------Button组件

HarmonyOS4+NEXT星河版入门与项目实战------Button组件

文章目录 1、控件图解2、案例实现1、代码实现2、代码解释3、运行效果4、总结1、控件图解 这里我们用一张完整的图来汇整 Button 的用法格式、属性和事件，如下所示： 按钮默认类型就是胶囊类型。 2、案例实现 这里我们实现一个根据放大和缩小按钮来改变图片大小的功能。 功…
阅读更多...
WPF窗体基本知识-笔记-命名空间

WPF窗体基本知识-笔记-命名空间

窗体程序关闭方式 命名空间:可以理解命名空间的作用为引用下面的控件对象 给控件命名:一般都用x:Name,也可以用Name但是有的控件不支持 布局控件(容器)的类型 布局控件继承于Panel的控件,其中下面的border不是布局控件,panel是抽象类 在重叠的情况下,Zindex值越大的就在上面 Z…
阅读更多...
【Qt】QComboBox设置默认显示为空

【Qt】QComboBox设置默认显示为空

需求 使用QComboBox&#xff0c;遇到一个小需求是&#xff0c;想要设置未点击出下拉列表时&#xff0c;内容显示为空。并且不想在下拉列表中添加一个空条目。 实现 使用setPlaceholderText()接口。我们先来看下帮助文档&#xff1a; 这里说的是&#xff0c;placeholderText是…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023