在React Native中使用onComplete事件更改数组中的图像

import React, { useState } from 'react';
import { View, Image } from 'react-native';

const App = () => {
  const [images, setImages] = useState([
    { id: 1, url: 'https://example.com/image1.jpg' },
    { id: 2, url: 'https://example.com/image2.jpg' },
    { id: 3, url: 'https://example.com/image3.jpg' },
  ]);

  const handleImageLoad = (imageId) => {
    // 根据imageId更新数组中对应图像的状态或执行其他操作
    // 例如，可以将图像加载状态设置为已完成
    setImages(prevImages =>
      prevImages.map(image =>
        image.id === imageId ? { ...image, loaded: true } : image
      )
    );
  };

  return (
    <View>
      {images.map(image => (
        <Image
          key={image.id}
          source={{ uri: image.url }}
          onLoad={() => handleImageLoad(image.id)}
        />
      ))}
    </View>
  );
};

export default App;