如何在react native中返回循环中的多张卡片

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

const cardData = [
  { id: 1, title: 'Card 1', image: require('./images/card1.jpg'), description: 'This is card 1' },
  { id: 2, title: 'Card 2', image: require('./images/card2.jpg'), description: 'This is card 2' },
  { id: 3, title: 'Card 3', image: require('./images/card3.jpg'), description: 'This is card 3' },
  // Add more card data here
];

const renderItem = ({ item }) => (
  <View>
    <Image source={item.image} />
    <Text>{item.title}</Text>
    <Text>{item.description}</Text>
  </View>
);

const App = () => (
  <View>
    <FlatList
      data={cardData}
      renderItem={renderItem}
      keyExtractor={(item) => item.id.toString()}
    />
  </View>
);

export default App;