Question

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

Answer 1

根据official document，当flatlist有多列时，Items should all be the same height - masonry layouts are not supported.

但我认为您可以尝试在每个列项上添加包装器View以避免此规则。平面列表的height将在包装器上设置，您的项目高度仍可由您配置。

Answer 2

我使用这个库来创建一个砌体列表。 https://github.com/AppAndFlow/react-native-masonry-list。它按预期工作。

Answer 3

足够有趣的是，这无需任何外部库即可实现。诀窍是使用负边距。

实现有些棘手-我们需要在VirtualizedList属性CellRendererComponent中应用负边距，以使其在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 source = { uri: 'https://placekitten.com/160/300' };

const data = [
    {
        marginTop: 0,
        image1: { source, height: 300, marginTop: 0 },
        image2: { source, height: 250, marginTop: 0 }
    },
    {
        marginTop: -50,
        image1: { source, height: 290, marginTop: 50 },
        image2: { source, height: 300, marginTop: 0 }
    },
    {
        marginTop: -40,
        image1: { source, height: 250, marginTop: 40 },
        image2: { source, height: 350, marginTop: 0 }
    }
];

样式：

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

确保将图像数据正确排列在阵列中-始终将较高的图像放在较短的一侧，计算高度差，等等。

Answer 4

您可以尝试在带有一个元素的平面列表中使用滚动视图。

.terraformrc

与不同大小的项目的Flatlist行

4 个答案: