Javascript React native，根据项目包含的空间设置平面列表容器的高度

我试图将flatlist容器的高度设置为其项占用的空间的高度，如下图所示

但我得到了同样的结果

第二个物品容器占用了和第一个物品容器相同的空间，有人能告诉我如何修复吗？下面是我的代码

<FlatList
        data={data}
        keyExtractor={(item) => item._id.toString()}
        renderItem={({ item }) => {
    return (
      <TouchableOpacity
        style={styles.container}
        onPress={() =>
          navigation.navigate(strings.VIEW_QUOTE, {
            image: item.image_url,
            text: item.description,
          })
        }
      >
        <Image
          source={{
            uri: item.image_url,
          }}
          style={{
            height: moderateScaleVertical(153),
            resizeMode: "stretch",
          }}
        />
        <Text style={styles.text}>{item.description}</Text>
      </TouchableOpacity>
    );
  }}
        numColumns={2}
        style={{
          marginHorizontal: moderateScale(12),
        }}
      />
....
const styles = StyleSheet.create({
  container: {
    overflow: "hidden",
    marginHorizontal: moderateScaleVertical(4),
    marginTop: moderateScaleVertical(20),
    borderWidth: 1,
    borderColor: colors.blackOpacity15,
    borderRadius: 5,
    flex: 1,
  },
  text: {
    ...commonStyles.fontSize15,
    fontFamily: fontFamily.medium,
    marginHorizontal: moderateScale(6),
  },
});

item.\u id.toString（）}
renderItem={（{item}）=>{
返回(
导航。导航（strings.VIEW）{
image:item.image\u url，
文本：项目说明，
})
}
>
{item.description}
);
}}
numColumns={2}
风格={{
marginHorizontal：中等规模（12），
}}
/>
....
const styles=StyleSheet.create({
容器：{
溢出：“隐藏”，
边缘水平：中等水平垂直（4），
marginTop：中等比例垂直（20），
边框宽度：1，
边框颜色：colors.blackOpacity15，
边界半径：5，
弹性：1，
},
正文：{
…commonStyles.fontSize15，
fontFamily:fontFamily.medium，
marginHorizontal：中等规模（6），
},
});

您可以将onLayout函数放入FlatList

const [flatListHeight, setFlatListHeight] = useState(0);

const onLayout = (e) => {
   setFlatListHeight(e.nativeEvent.layout.height);
}

return (
  <FlatList onLayout={onLayout} />
);

const[flatListHeight，setFlatListHeight]=useState（0）；
const onLayout=（e）=>{
setFlatListHeight（例如nativeEvent.layout.height）；
}
返回(
);

flex:1

在容器样式中可能是原因，请尝试删除它。在web开发中，您试图实现的就是所谓的砖石布局。我使用了一个名为“react native Mashine layout”的库来实现相同的效果。也许对你有帮助。