如何在从Axios收集数据后使用React Native创建图像网格？

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

const ImageGrid = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await axios.get('API_ENDPOINT_URL');
      setData(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View>
      {/* 图像网格的展示 */}
    </View>
  );
};

return (
  <View>
    <FlatList
      data={data}
      numColumns={3} // 每行显示3个图像
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => (
        <Image
          source={{ uri: item.imageUrl }}
          style={{ width: 100, height: 100 }}
        />
      )}
    />
  </View>
);

export default function App() {
  return (
    <View>
      <ImageGrid />
    </View>
  );
}