相同的代码在 view-map 中呈现，但不在 FlatList 中呈现

我是 React Native 的新手。在开发教程应用程序时，我无法让 FlatList 显示我的数据项。因此，我创建了一个屏幕，它将从 FlatList 和 View-Map 组合中的对象数组（此处使用的扑克牌）中呈现数据项。现在列表在 View-Map 中完美呈现，但在 FlatList 中完全呈现。也没有出现任何错误或警告。有人能指出这里可能是什么错误吗？我已经努力让它工作了几天了。

import { View, Text, FlatList, Button, SafeAreaView } from "react-native";
import { React, useState } from "react";
import {
  hearts,
  spades,
  clubs,
  diamonds,
  suites,
} from "../../assets/data/cards";

const FlatListVsMap = () => {
  const [cards, setCards] = useState(hearts);
  //console.log("Cards Initially: " + cards);
  const flatlist = false;
  return (
    <SafeAreaView>
     //Option 1: Using a Flatlist when 'flatlist' true
      {flatlist && cards && (
        <FlatList
          data={cards}
          extraData={cards}
          keyExtractor={(card) => card.id}
          renderItem={(card) => {
            <View className="h-10">
              <Text key="index">{`Card: ${card.name}, Id: ${card.id}`}</Text>
            </View>;
          }}
          ListHeaderComponent={
            <View className="flex-row justify-between px-2 mt-5 border">
              <Button title={"Hearts"} />
              <Button title={"Spades"} />
              <Button title={"Clubs"} />
              <Button title={"Diamonds"} />
            </View>
          }
        />
      )}
      //Option 2: Using a View-Map when 'flatlist' false
      {!flatlist && cards && (
        <View>
          <View className="flex-row justify-between px-2 mt-5 border">
            <Button title={"Hearts"} />
            <Button title={"Spades"} />
            <Button title={"Clubs"} />
            <Button title={"Diamonds"} />
          </View>
          <View className="mt-5 bg-slate-400">
            {cards.map((card, index) => (
              <View className="h-10" key={index}>
                <Text>{`Card: ${card.name}, Id: ${card.id}`}</Text>
              </View>
            ))}
          </View>
        </View>
      )}
    </SafeAreaView>
  );
};

export default FlatListVsMap;