React Native - FlatList 只显示水平的项目

Question

我必须在屏幕上显示一些卡片组件，但 FlatList 还没有垂直滚动，它只显示单个项目。

卡片组件.Js

<View className="items-end flex-1 min-h-full ml-5 ">
      <Image
        className="rounded-lg"
        key="book"
        style={{
          width: width * 0.36,
          height: '50%',

          alignItems: 'center',
          justifyContent: 'center',
        }}
        
    </View>

AllItems.js

<SafeAreaView className="items-center flex-1 pt-40 bg-gray-900">
      <FlatList
        horizontal
        contentContainerStyle={{
          flexGrow: 1,
        }}
        style={{ flex: 1 }}
        data={books}
        keyExtractor={(item) => item._id}
        renderItem={({ item }) => (
          <CardComponent
            title={item.title}
            imageUrl={urlFor(item.mainImage).url()}
            author={item.author}
            
          />
        )}
      />
    </SafeAreaView>

更新：通过将这种样式添加到 CardComponent 图像中进行修复

style={{ width: width * 0.36, height: height * 0.3, }}