如何在React Native中等待所有图片加载完成后再渲染页面？

要实现等待所有按钮图片加载完成后再展示UI，核心思路是跟踪每张图片的加载状态，当所有图片都加载完成后再渲染按钮区域，否则显示加载提示。以下是具体实现方案：

实现步骤 #

1. 新增状态变量记录已加载完成的图片ID集合
2. 每张图片加载完成时，将其ID加入已加载集合
3. 根据已加载数量是否等于总图片数量，决定渲染加载提示还是按钮区域

修改后的完整代码 #

import React, { useState } from "react";
import { View, Image, TouchableOpacity, ActivityIndicator } from "react-native";
import styles from "./MainPageStyle";
import { useNavigation } from "@react-navigation/native";
import Page1 from "./HomePage"; // 메인페이지
import Page2 from "./AlramPage"; // 알림함
import Page3 from "./HomePage"; // 상품정보
import Page4 from "./HomePage"; // 환경설정

// 정적 이미지 import
import homeBtnImage from "../../assets/img/main/homeBtn.webp";
import bellBtnImage from "../../assets/img/main/bellBtn.webp";
import iconImage from "../../assets/img/main/icon.webp";
import goodsBtnImage from "../../assets/img/main/goodsBtn.webp";
import settingBtnImage from "../../assets/img/main/settingBtn.webp";

// 버튼 데이터 배열
const buttonData = [
  { id: "page1", source: homeBtnImage, target: "page1" },
  { id: "page2", source: bellBtnImage, target: "page2" },
  {
    id: "barcode",
    source: iconImage,
    target: "BarcodeScanner",
    isNavigation: true,
  },
  { id: "page3", source: goodsBtnImage, target: "page3" },
  { id: "page4", source: settingBtnImage, target: "page4" },
];

// 버튼 컴포넌트
const IconButton = ({ source, onPress, isSelected, onLoad }) => (
  <TouchableOpacity
    style={[styles.btn, isSelected && styles.selectedBtn]}
    onPress={onPress}
  >
    <Image
      source={source}
      onLoad={onLoad}
      style={[styles.image, isSelected && styles.selectedImage]}
      resizeMode="contain"
    />
  </TouchableOpacity>
);

const MainPage = () => {
  const navigation = useNavigation();
  const [currentPage, setCurrentPage] = useState("page1");
  // 用Set存储已加载的图片ID，避免重复记录
  const [loadedImages, setLoadedImages] = useState(new Set());

  const renderPage = () => {
    switch (currentPage) {
      case "page1":
        return <Page1 />;
      case "page2":
        return <Page2 />;
      case "page3":
        return <Page3 />;
      case "page4":
        return <Page4 />;
      default:
        return <Page1 />;
    }
  };

  const handleButtonPress = (button) => {
    if (button.isNavigation) {
      navigation.navigate(button.target);
    } else {
      setCurrentPage(button.target);
    }
  };

  const handleImageLoad = (id) => {
    // 将加载完成的图片ID加入集合
    setLoadedImages(prev => new Set([...prev, id]));
  };

  // 判断所有图片是否加载完成
  const allImagesLoaded = loadedImages.size === buttonData.length;

  return (
    <View style={styles.container}>
      {/* 현재 페이지 */}
      {/* {renderPage()} */}

      {/* 버튼 컨테이너 */}
      <View style={styles.btContainer}>
        {allImagesLoaded ? (
          buttonData.map((button) => (
            <IconButton
              key={button.id}
              source={button.source}
              onLoad={() => handleImageLoad(button.id)}
              isSelected={currentPage === button.target}
              onPress={() => handleButtonPress(button)}
            />
          ))
        ) : (
          // 所有图片未加载完成时显示加载提示（可替换为自定义加载组件）
          <ActivityIndicator size="large" color="#0000ff" />
        )}
      </View>
    </View>
  );
};

export default MainPage;

关键修改说明 #

• 状态跟踪：使用Set存储已加载的图片ID，确保每个图片只被记录一次
• 加载判断：通过loadedImages.size === buttonData.length判断是否所有图片加载完成
• 加载提示：未完成时显示系统默认的ActivityIndicator，你也可以替换为自定义的加载动画组件
• 无额外冗余：利用现有onLoad回调完成状态更新，无需引入额外依赖

内容的提问来源于stack exchange，提问作者김호성