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}>
      <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 实现图片懒加载

安装 react-native-lazyload
```
npm install react-native-lazyload
```

使用示例

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）以及图片优化的最佳实践。通过合理选择图片加载方案和优化策略，可以显著提升应用性能，提高用户体验。

课后作业

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

作者简介

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

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