如何在React Native中等待S3 Image加载并显示加载动画？

实现思路 #

利用S3Image封装的React Native原生Image组件回调，通过状态变量控制加载GIF和目标图片的显示切换。

具体实现步骤 #

1. 添加状态管理
   在组件中声明状态变量，用于控制加载动画的显示状态：

import { useState } from 'react';
import { View, Image, StyleSheet } from 'react-native';
import { S3Image } from 'aws-amplify-react-native';

// 声明加载状态
const [isImageLoading, setIsImageLoading] = useState(true);

2. 准备加载GIF资源
   将加载用的GIF放入项目assets目录，RN 0.60+版本默认支持GIF格式，无需额外配置；若旧版本需在metro.config.js中添加GIF解析规则。

3. 渲染逻辑与回调处理
   通过状态判断显示加载动画或S3Image，同时监听S3Image的加载完成/失败事件更新状态：

<View style={styles.imageContainer}>
  {/* 加载中显示GIF */}
  {isImageLoading && (
    <Image
      source={require('./assets/loading.gif')}
      style={styles.loadingGif}
      resizeMode="contain"
    />
  )}
  {/* 加载完成后显示S3图片 */}
  <S3Image
    imgKey={info.Imageurl}
    style={[styles.image, isImageLoading && styles.hidden]}
    onLoad={() => setIsImageLoading(false)}
    onError={() => setIsImageLoading(false)} // 加载失败也隐藏动画
  />
</View>

4. 样式配置
   添加对应样式，确保加载动画居中，图片隐藏时不占位：

const styles = StyleSheet.create({
  imageContainer: {
    position: 'relative',
    width: 200,
    height: 200,
  },
  image: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
  },
  loadingGif: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    margin: 'auto',
    width: 60,
    height: 60,
  },
  hidden: {
    opacity: 0,
  },
});

替代方案（叠加显示） #

若不想用透明度隐藏，可通过绝对定位让S3Image覆盖在GIF上，加载完成后自然显示：

<View style={styles.imageContainer}>
  <Image
    source={require('./assets/loading.gif')}
    style={styles.loadingGif}
    resizeMode="contain"
  />
  <S3Image
    imgKey={info.Imageurl}
    style={styles.image}
    onLoad={() => setIsImageLoading(false)}
    onError={() => setIsImageLoading(false)}
    opacity={isImageLoading ? 0 : 1}
  />
</View>

内容的提问来源于stack exchange，提问作者sama