React native 具有不同大小项目的平面列表行

我使用平面列表创建一个包含图像、视频、博客和音频的项目网格。平面列表中有两列。我已经添加了一个按钮来在flatlist中添加虚拟帖子。问题是物品的高度。当我在flatlist中添加博客时，它包含文本、图像和旁边的项目。i、 e图像或视频也可以获取博客项目的高度。是否可以为行中的每个项目指定可变高度。在将博客添加到flatlist时，视频项目的高度也与博客项目的高度相等

根据，当平面列表有多个列时，

项的高度应相同-不支持砌体布局。

---

但我认为您可以尝试在每个列项上添加一个包装器

视图

，以避免此规则。扁平列表的

高度将在包装上设置，您的项目高度仍然可以由您配置。
我使用此库创建一个列表。
。它按预期工作。
有趣的是，这可以在没有任何外部库的情况下实现。诀窍是使用负边距

实现有点棘手-我们需要在VirtualizedList prop CellRenderer组件中应用负余量，以便使其在Android上正常工作

JSX：

<View style={styles.container}>
      <FlatList
        style={styles.flatlist}
        data={data}
        keyExtractor={(item, index) => index.toString()}
        CellRendererComponent={({ children, item, ...props }) => {
            return (
                <View {...props} style={{ marginTop: item.marginTop }}>
                    {children}
                </View>
            )
        }}
        renderItem={({ item }) => {
            const { source: source1, height: height1, marginTop: marginTop1 } = item.image1;
            const { source: source2, height: height2, marginTop: marginTop2 } = item.image2;
            return (
                <View style={Style.viewRow}>
                    <Image source={source1} style={[styles.image, { height: height1, marginTop: marginTop1 }]} />
                    <Image source={source2} style={[styles.image, { height: height2, marginTop: marginTop2 }]} />
                </View>
            )
        }}
    />
</View>

风格：

const styles = StyleSheet.create({
   container: {
      flex: 1
   },
   flatList: {
      width: '100%',
      height: '100%'
   },
   viewRow: {
      flexDirection: 'row'
   },
   image: {
      width: '50%',
      resizeMode: 'cover'
   }
});

请确保正确排列阵列中图像的数据-始终将较高的图像放在较短的一侧，计算高度差，等等。
您可以尝试在具有一个元素的平面列表中使用滚动视图

import React，{useffect，useState}来自“React”；
进口{
看法
平面列表，
形象,，
滚动视图，
文本，
尺寸，
}从“反应本机”；
const{height，width}=Dimensions.get（'window'）；
常数数据=[
{
网址：
'https://images.pexels.com/photos/4689912/pexels-photo-4689912.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：400，
},
{
网址：
'https://images.pexels.com/photos/2736843/pexels-photo-2736843.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：100，
},
{
网址：
'https://images.pexels.com/photos/4407291/pexels-photo-4407291.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：100，
},
{
网址：
'https://images.pexels.com/photos/4553021/pexels-photo-4553021.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：200，
},
{
网址：
'https://images.pexels.com/photos/4689912/pexels-photo-4689912.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：200，
},
{
网址：
'https://images.pexels.com/photos/2736843/pexels-photo-2736843.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：200，
},
{
网址：
'https://images.pexels.com/photos/4407291/pexels-photo-4407291.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：200，
},
{
网址：
'https://images.pexels.com/photos/4553021/pexels-photo-4553021.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：200，
},
{
网址：
'https://images.pexels.com/photos/4689912/pexels-photo-4689912.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：200，
},
{
网址：
'https://images.pexels.com/photos/2736843/pexels-photo-2736843.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：200，
},
{
网址：
'https://images.pexels.com/photos/4407291/pexels-photo-4407291.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：200，
},
{
网址：
'https://images.pexels.com/photos/4553021/pexels-photo-4553021.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：200，
},
{
网址：
'https://images.pexels.com/photos/4689912/pexels-photo-4689912.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：200，
},
{
网址：
'https://images.pexels.com/photos/2736843/pexels-photo-2736843.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：200，
},
{
网址：
'https://images.pexels.com/photos/4407291/pexels-photo-4407291.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：200，
},
{
网址：
'https://images.pexels.com/photos/4553021/pexels-photo-4553021.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
身高：200，
},
];
常数W=宽度/2-10-4；
常量项=（{url，height}）=>{
const[dims，setDims]=useState（{height:0，width:0}）；
useffect（（）=>{
setDims（{height:Math.random（）*1000}）；
//Image.getSize（url，（[h，w]）=>{
//console.log（'我会试着回复你嗨，谢谢你的回复，我可以改变高度。但是现在有另一个问题，如果旁边的项目有更高的高度，项目下方有空间。由于我刚才提到的规则，这无法修复。我认为你应该尝试一些第三方库。这个库可能满足你的要求。我认为这个库只有我有各种类型的组件，例如图像、视频、博客、音频。
const styles = StyleSheet.create({
   container: {
      flex: 1
   },
   flatList: {
      width: '100%',
      height: '100%'
   },
   viewRow: {
      flexDirection: 'row'
   },
   image: {
      width: '50%',
      resizeMode: 'cover'
   }
});