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.mzph.cn/web/59806.shtml

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

相关文章

UE5遇到问题记录—在sequence制作时如何让角色隐藏/显示？

UE5遇到问题记录—在sequence制作时如何让角色隐藏/显示？

遇到问题&#xff1a; 在sequence制作时如何让角色隐藏/显示&#xff1f; 解决办法&#xff1a; 在角色通道添加轨道&#xff1a;actor hide in game即可&#xff0c;添加后有可视性&#xff0c;打勾或者取消来控制角色的可见性。
阅读更多...
文献阅读11.17

文献阅读11.17

扩散波模型的物理信息神经网络 文献摘要 扩散波模型(DWM)是浅水方程的非线性二阶简化形式&#xff0c;利用DWM正问题的解可以预测水位和流量的变化。求解其逆问题可以根据观测结果确定关键参数(如曼宁系数、降雨强度等)。文章将改进后的PINN应用于DWM的正解和逆解。在正演问题…
阅读更多...
【网络安全 | 漏洞挖掘】在重置密码流程利用请求头实现ATO

【网络安全 | 漏洞挖掘】在重置密码流程利用请求头实现ATO

未经许可，不得转载。 文章目录 HTTP Host头漏洞发现漏洞利用漏洞影响HTTP Host头 HTTP Host头是HTTP/1.1中一个强制性的请求头，它指定了用户要访问的域名。 例如，如果用户访问 https://example.com，浏览器会发出如下带有Host头的请求： GET / HTTP/1.1 Host: example.co…
阅读更多...
计算机网络中的数据包传输机制详解

计算机网络中的数据包传输机制详解

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 计算机网络中的数据包传输机制详解 计算机网络中的数据包传输机制详解 计算机网络中的数据包传输机制详解 引言 数据包的基本概念…
阅读更多...
Android AOSP 架构和各层次开发内容介绍

Android AOSP 架构和各层次开发内容介绍

一、系统架构总况​​​​ 官方文档&#xff1a;架构概览 | Android Open Source Project (google.cn)https://source.android.google.cn/docs/core/architecture?hlzh-cn 下面是Google Android 提供的最新架构层次图&#xff1a; 图. AOSP 的软件堆栈层次 System API 表示…
阅读更多...
shell编程--永久环境变量和字符串显位

shell编程--永久环境变量和字符串显位

环境变量 echo $HOME 在终端输出后会显示家目录有个root变量 我们会提出个疑问为什么平时我们在终端输入sl 或者which等等命令会输出一些内容呢&#xff0c;这是因为这些命令都有对应的环境变量。 我们查看一下环境变量 在终端输入&#xff1a; echo $PATH 我们看一下输出…
阅读更多...
【QT】解决生成的exe文件出现“无法定位程序入口”或“找不到xxx.dll”的问题

【QT】解决生成的exe文件出现“无法定位程序入口”或“找不到xxx.dll”的问题

【QT】解决生成的exe文件出现“无法定位程序入口”或“找不到xxx.dll”的问题 零、问题 使用QT编译好项目后&#xff0c;想直接在文件资源管理器中运行exe程序或想分享出去给别人使用发现出现如下问题&#xff1a; 系统错误&#xff1a;找不到xxx.dll。 无法找到入口&#x…
阅读更多...
【网络】什么是路由器 （Router ）网关设备（Gateway）？

【网络】什么是路由器 （Router ）网关设备（Gateway）？

路由器&#xff08;Router&#xff09;&#xff0c;又称路径器或网关设备&#xff08;Gateway&#xff09;&#xff0c;是一种重要的计算机网络设备。以下是关于路由器的详细解释&#xff1a; 一、路由器的定义与功能 定义&#xff1a;路由器是连接因特网中各局域网、广域网的…
阅读更多...
GitLab 降级安装出现 500 错误，如何解决？

GitLab 降级安装出现 500 错误，如何解决？

本文分享 GitLab 中文版在降级的过程中出现 500 错误的修复方法。 写在前面 强烈不建议大家自行降级&#xff0c;如果真有降级需求&#xff0c;要么自己能力过硬&#xff0c;要么寻求专业服务【https://dl.gitlab.cn/cm33bsfv】&#xff0c;要不出问题很麻烦&#xff01; 问…
阅读更多...
TensorFlow 2.0 windows11 GPU 训练环境配置

TensorFlow 2.0 windows11 GPU 训练环境配置

前言 在一切开始之前&#xff0c;请确保你的cmd命令行和powershell命令行可以正常打开。如果不能&#xff0c;建议重装系统。我不确定这是否会影响你最终的结果&#xff0c;毕竟windows的坑太多了。 安装顺序&#xff1a;visual studio -> cuda -> cudnn -> python…
阅读更多...
前馈神经网络 (Feedforward Neural Network, FNN)

前馈神经网络 (Feedforward Neural Network, FNN)

代码功能 网络定义&#xff1a; 使用 torch.nn 构建了一个简单的前馈神经网络。 隐藏层使用 ReLU 激活函数&#xff0c;输出层使用 Sigmoid 函数&#xff08;适用于二分类问题&#xff09;。 数据生成&#xff1a; 使用经典的 XOR 问题作为数据集。 数据点为二维输入&#xff…
阅读更多...
《操作系统 - 清华大学》3 -3：连续内存分配：内存碎片与分区的动态分配

《操作系统 - 清华大学》3 -3：连续内存分配：内存碎片与分区的动态分配

文章目录 0. 概述1. 内存碎片问题2. 动态分配3. 首次适配算法4. 最优适配算法5. 最差适配算法 0. 概述 内存分配是操作系统管理过程中很重要的环节&#xff0c;首先需要考虑的是一块连续区域分配的过程&#xff0c;这个过程中会有很多问题&#xff0c;首先比较关注的一个问题是…
阅读更多...
[Mysql基础]表的查询

[Mysql基础]表的查询

一、表的增删改查 CRUD : Create(创建), Retrieve(读取)&#xff0c;Update(更新)&#xff0c;Delete&#xff08;删除&#xff09; 1.1 插入否则更新 由于 主键 或者 唯一键 对应的值已经存在而导致插入失败 -- 创建一张学生表 CREATE TABLE students (id INT UNSIGNED PR…
阅读更多...
信息安全工程师（83）Windows操作系统安全分析与防护

信息安全工程师（83）Windows操作系统安全分析与防护

一、Windows操作系统安全分析 系统漏洞&#xff1a; Windows操作系统由于其复杂性和广泛使用&#xff0c;可能存在一些已知或未知的漏洞。这些漏洞可能会被黑客利用&#xff0c;进行恶意攻击。微软会定期发布系统更新和补丁&#xff0c;以修复这些漏洞&#xff0c;提高系统的安…
阅读更多...
Excel超级处理器：高效实现2种批量生成二维码方式

Excel超级处理器：高效实现2种批量生成二维码方式

在Excel数据处理中&#xff0c;二维码的批量生成是一个常见且重要的需求。借助Excel超级处理器这一强大的插件&#xff0c;用户可以轻松实现二维码的两种主要批量生成方式&#xff1a;直接在单元格中显示二维码图片&#xff0c;以及直接生成二维码图片并保存在文件夹中。超级处…
阅读更多...
vue+svg圆形进度条组件

vue+svg圆形进度条组件

vuesvg圆形进度条组件 一、实现思路二、ProgressCircle.vue三、父组件使用四、实现效果 一、实现思路 使用svg的circle元素画两个圆形&#xff0c;一个圆形控制进度&#xff0c;一个绘制底色 二、ProgressCircle.vue 代码示例&#xff1a; <template><!-- 圆形进度…
阅读更多...
react+hook+vite项目使用eletron打包成桌面应用+可以热更新

react+hook+vite项目使用eletron打包成桌面应用+可以热更新

使用Hooks-Admin的架构 Hooks-Admin: &#x1f680;&#x1f680;&#x1f680; Hooks Admin&#xff0c;基于 React18、React-Router V6、React-Hooks、Redux、TypeScript、Vite2、Ant-Design 开源的一套后台管理框架。https://gitee.com/HalseySpicy/Hooks-Adminexe桌面应用…
阅读更多...
如何基于Tesseract实现图片的文本识别

如何基于Tesseract实现图片的文本识别

在前一篇文章基础上&#xff0c;如何将报告图片中的文本解析出来&#xff0c;最近研究了基于Tesseract的OCR方案&#xff0c;Tesseract OCR是一个开源的OCR引擎&#xff0c;主要结合开源的tesseract和pytesseract&#xff0c;实现了jpg/png等格式图片文本识别&#xff0c;供大家…
阅读更多...
Vue中template模板报错

Vue中template模板报错

直接<v出现如下模板&#xff0c;出现如下错误 注意两个地方&#xff1a; 1.template里面加一个div标签 2.要写name值 如下图
阅读更多...
地质旅游平台推动“旅游+地质”融合发展

地质旅游平台推动“旅游+地质”融合发展

2024年元旦假期&#xff0c;哈尔滨文旅市场持续火爆。据哈尔滨市文化广电和旅游局大数据测算&#xff0c;截至1月1日&#xff0c;哈尔滨市累计接待游客304.79万人次&#xff0c;实现旅游总收入59.14亿元&#xff0c;游客接待量与旅游总收入达到历史峰值。 夏有进“淄”赶烤&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023