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

news2024/11/18 12:50:28

在移动应用中，图片加载与优化 是提升用户体验和减少资源消耗的重要环节。图片加载不当可能导致应用卡顿、内存泄漏甚至崩溃。本章节将介绍 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}>
      <Image
        source={{ 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}>
      <Image
        source={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}>
      <Image
        source={{ 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}>
      <Image
        source={{ 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}>
      <FastImage
        style={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">
        <Image
          href="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}>
      <Image
        source={{ 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}>
      <Image
        source={{ 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 (
    <FlatList
      data={images}
      renderItem={({ item }) => (
        <LazyloadImage
          style={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}>
      <FastImage
        style={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.coloradmin.cn/o/2242817.html

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

相关文章

WSL--无需安装虚拟机和docker可以直接在Windows操作系统上使用Linux操作系统

WSL--无需安装虚拟机和docker可以直接在Windows操作系统上使用Linux操作系统

安装WSL命令 管理员打开PowerShell或Windows命令提示符&#xff0c;输入wsl --install&#xff0c;然后回车 注意&#xff1a;此命令将启用运行 WSL 和安装 Linux 的 Ubuntu 发行版所需的功能。 注意&#xff1a;默认安装最新的Ubuntu发行版。 注意&#xff1a;默认安装路径是…
阅读更多...
⾃动化运维利器Ansible-基础

⾃动化运维利器Ansible-基础

Ansible基础 一、工作原理二、快速入门2.1 测试所有资产的网络连通性2.2 发布文件到被管理节点(资产) 三、资产(被管理节点)3.1 静态资产3.1.1 自定义资产3.1.2 自定义资产的使用3.1.3 资产选择器 四、Ansible Ad-Hoc 命令4.1 模块类型4.1.1 command & shell 模块4.1.2 cop…
阅读更多...
简易实现自动签到并发送通知邮件

简易实现自动签到并发送通知邮件

环境准备 Windows操作系统adbshell1.0.40pyhon3.7visual stdio code stableandroid手机数据线&#xff0c;并配置环境变量 打卡程序 需要定位屏幕坐标 import os import timea0os.popen("adb shell input keyevent 26") ##ba0.read() ##print(b) time.sleep(5) …
阅读更多...
机器学习（贝叶斯算法，决策树）

机器学习（贝叶斯算法，决策树）

朴素贝叶斯分类 贝叶斯分类理论 假设现有两个数据集&#xff0c;分为两类 我们现在用p1(x,y)表示数据点(x,y)属于类别1(图中红色圆点表示的类别)的概率&#xff0c;用p2(x,y)表示数据点(x,y)属于类别2(图中蓝色三角形表示的类别)的概率&#xff0c;那么对于一个新数据点(x,y)…
阅读更多...
[ACTF2020]Upload 1--详细解析

[ACTF2020]Upload 1--详细解析

信息收集 题目告诉我们是一道upload&#xff0c;也就是文件上传漏洞题目。 进入界面&#xff0c;是一个灯泡&#xff0c;将鼠标放在图标上就会出现文件上传的相应位置&#xff1a; 思路 文件上传漏洞&#xff0c;先看看有没有前端校验。 在js源码中找到了前端校验&#xff…
阅读更多...
网络常用特殊地址-127.0.0.1

网络常用特殊地址-127.0.0.1

借用Medium博客的一张图 经常在问题解答群里留意到如下关于127.0.0.1的消息 ”如果单机版&#xff0c;不需要配置IP&#xff0c;所有配置IP的地方都写死127.0.0.1就可以” “ip: 根据实际情况填写&#xff08;在 xxx-init.conf 里可以给一个默认值 127.0.0.1 &#xff0c;方便…
阅读更多...
Scala-字符串（拼接、printf格式化输出等）-用法详解

Scala-字符串（拼接、printf格式化输出等）-用法详解

Scala 一、 使用 号连接字符串 在 Scala 中&#xff0c; 运算符实际上会调用 String 类的 concat 方法或者使用字符串的加法操作&#xff0c;生成一个新的字符串。 字符串是不可变的&#xff0c;每次拼接都会创建一个新的字符串。 Mr. yuTips&#xff1a; 性能相对较差&…
阅读更多...
软考教材重点内容 信息安全工程师 第 4 章 网络安全体系与网络安全模型

软考教材重点内容 信息安全工程师 第 4 章 网络安全体系与网络安全模型

4,1 网络安全体系的主要特征: (1)整体性。网络安全体系从全局、长远的角度实现安全保障&#xff0c;网络安全单元按照一定的规则&#xff0c;相互依赖、相互约束、相互作用而形成人机物一体化的网络安全保护方式。 (2)协同性。网络安全体系依赖于多种安全机制&#xff0c;通过各…
阅读更多...
【数据库】如何保证数据库迁移过程中数据的一致性？

【数据库】如何保证数据库迁移过程中数据的一致性？

在数据库迁移过程中&#xff0c;保证数据的一致性是非常重要的&#xff0c;尤其是在涉及到多个表、多个数据库或分布式系统的情况下。以下是一些确保数据一致性的最佳实践和方法&#xff1a; 1. 备份数据 在开始迁移之前&#xff0c;进行全面的数据备份是确保数据一致性的第…
阅读更多...
github 模型下载方法

github 模型下载方法

github 模型权重&#xff0c;如果是项目下载&#xff0c;pth文件有时下载后只有1kb 本人测试ok下载方法&#xff1a; 点击view raw&#xff0c;然后可以下载模型权重文件了。
阅读更多...
spring-data-elasticsearch 3.2.4 实现桶bucket排序去重，实现指定字段的聚合搜索

spring-data-elasticsearch 3.2.4 实现桶bucket排序去重，实现指定字段的聚合搜索

一、背景 es索引有一个文档CourseIndex&#xff0c;下面是示意: creatorIdgradesubjectnameno1002270英语听力课程一N00232DS91004380数学口算课程N00209DK71003480物理竞赛课程N00642XS21002280英语听力课程二N00432WS31002290英语听力课程三N002312DP5 在搜索的时候&#…
阅读更多...
QQ 小程序已发布，但无法被搜索的解决方案

QQ 小程序已发布，但无法被搜索的解决方案

前言 我的 QQ 小程序在 2024 年 8 月就已经审核通过&#xff0c;上架后却一直无法被搜索到。打开后&#xff0c;再在 QQ 上下拉查看 “最近使用”&#xff0c;发现他出现一下又马上消失。 上线是按正常流程走的&#xff0c;开发、备案、审核&#xff0c;没有任何违规&#xf…
阅读更多...
快速搭建Android开发环境：Docker部署docker-android并实现远程连接

快速搭建Android开发环境：Docker部署docker-android并实现远程连接

目录 前言 1. 虚拟化环境检查 2. Android 模拟器部署 3. Ubuntu安装Cpolar 4. 配置公网地址 5. 远程访问 小结 6. 固定Cpolar公网地址 7. 固定地址访问 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家聊聊快速搭建Android开发环境&#x…
阅读更多...
大麦抢票科技

大麦抢票科技

仅供学习参考&#xff0c;切勿再令您所爱的人耗费高昂的价格去购置黄牛票 ⚠️核心内容参考: 据悉&#xff0c;于购票环节&#xff0c;大麦凭借恶意流量清洗技术&#xff0c;于网络层实时甄别并阻拦凭借自动化手段发起下单请求的流量&#xff0c;强化对刷票脚本、刷票软件以及…
阅读更多...
【STM32】基于SPI协议读写SD，详解！

【STM32】基于SPI协议读写SD，详解！

文章目录 0 前言1 SD卡的种类和简介1.1 SD卡的种类1.2 SD卡的整体结构1.3 SD卡运行机制——指令和响应2 SD卡的通信总线2.1 SDIO2.2 SPI3 硬件连接4 代码实践【重点】4.1 HAL库移植4.2 标准库移植4.3 遇到的问题和解决方案5 扩展阅读0 前言 因为项目需要，使用stm32读写sd卡，这…
阅读更多...
kafka管理工具

kafka管理工具

文章目录 前言一、Kafka Assistan1.1 描述1.2、配置安装 二、Conduktor2.1、描述2.2、配置安装 三、kafka-maneger3.1、描述3.2、配置安装3.3、命令启动3.4、[refer to](https://www.ctyun.cn/document/10000120/10033218#section-39755766f4910e4b) 前言 提示&#xff1a;这里…
阅读更多...
leetcode_二叉树最大深度

leetcode_二叉树最大深度

对二叉树的理解 对递归调用的理解 对内存分配的理解 基础数据结构&#xff08;C版本&#xff09; - 飞书云文档 每次函数的调用 都会进行一次新的栈内存分配 所以lmax和rmax的值不会混在一起 /*** Definition for a binary tree node.* struct TreeNode {* int val;* …
阅读更多...
使用 Axios 拦截器优化 HTTP 请求与响应的实践

使用 Axios 拦截器优化 HTTP 请求与响应的实践

目录 前言1. Axios 简介与拦截器概念1.1 Axios 的特点1.2 什么是拦截器 2. 请求拦截器的应用与实践2.1 请求拦截器的作用2.2 请求拦截器实现 3. 响应拦截器的应用与实践3.1 响应拦截器的作用3.2 响应拦截器实现 4. 综合实例&#xff1a;一个完整的 Axios 配置5. 使用拦截器的好…
阅读更多...
高亚科技签约美妥维志化工，提升业务协同与项目运营效率

高亚科技签约美妥维志化工，提升业务协同与项目运营效率

近日&#xff0c;中国企业管理软件资深服务商高亚科技与韶关美妥维志化工有限公司&#xff08;以下简称“美妥维志”&#xff09;正式签约。基于高亚科技的8Manage PM项目管理软件&#xff0c;美妥维志将实现项目进度、人员审批及问题的统一管理&#xff0c;提升部门间协同效率…
阅读更多...
使用真实 Elasticsearch 进行更快的集成测试

使用真实 Elasticsearch 进行更快的集成测试

作者&#xff1a;来自 Elastic Piotr Przybyl 了解如何使用各种数据初始化和性能改进技术加快 Elasticsearch 的自动化集成测试速度。 在本系列的第 1 部分中&#xff0c;我们探讨了如何编写集成测试&#xff0c;让我们能够在真实的 Elasticsearch 环境中测试软件&#xff0c;并…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023