React Native 如何使FlatList中的卡片高度相同

mwecs4sa 于 2023-01-21 发布在 React

关注(0)|答案(1)|浏览(135)

我尝试在FlatList中使卡片具有相同的高度，尽管它们各自包含不同数量的内容。
我曾尝试使用flex flex-row items-stretch将FlatList Package 在容器中，但无法使其工作。
我怎样才能做到这一点？

// Card within FlatList
     <View className="mr-4">
        <View className="flex-1">
          <View className="relative inline-block w-[260px]">
            <View className="relative flex h-[144px] w-full items-center justify-center overflow-hidden rounded-xl">
              <Image
                className="object-cover h-full w-full"
                alt={title}
                source={{
                  uri: image,
                }}
              />
            <View className="">
              <View className="pt-2 pb-2 mx-1">
                <Text className="text-lg font-semibold text-gray-900">
                  {title}
                </Text>
              </View>
              <View className="pb-2">
                <Text className="text-gray-500">{description}</Text>
              </View>
              <View className="">
                <Button title="Submit" />
              </View>
            </View>
          </View>
        </View>
      </View>

react-native

来源：https://stackoverflow.com/questions/75172321/how-to-make-cards-in-flatlist-the-same-height

1条答案

按热度按时间

63lcw9qa1#

我会尝试一些沿着的方法：

<View className="mr-4">
        <View className="flex-1">
          <View className="relative inline-block w-[260px]">
            <View style={{height: 144, alignItems: 'stretch', justifyContent: 'center'}} className="relative flex w-full items-center overflow-hidden rounded-xl">
              <Image
                className="object-cover h-full w-full"
                alt={title}
                source={{
                  uri: image,
                }}
              />
            <View className="">
              <View className="pt-2 pb-2 mx-1">
                <Text className="text-lg font-semibold text-gray-900">
                  {title}
                </Text>
              </View>
              <View className="pb-2">
                <Text className="text-gray-500">{description}</Text>
              </View>
              <View className="">
                <Button title="Submit" />
              </View>
            </View>
          </View>
        </View>
      </View>

您应该使用style，而不是使用“className”。

<View style={{height: 144, alignItems: 'stretch', justifyContent: 'center'}} className="relative flex w-full items-center overflow-hidden rounded-xl">

这将使卡片的高度达到144px，您还可以拉伸这些项，使它们在FlatList中的所有项都具有相同的高度，这将使卡片在视图容器中居中。

赞(0）回复(0）举报 2023-01-21

我来回答

React Native 如何使FlatList中的卡片高度相同

1条答案

相关问题

热门标签

最新问答