水平平面列表：项目之间的空间

Question

我试图在水平平面列表中的项目周围获得空间，无论我如何尝试，它似乎都不起作用：

const renderItem = ({item}) => {

return (
  <View style={styles.item}>
    <Image
      source={{uri: content.uri}}
      style={styles.image}
    />
    <View>
      <Text style={styles.contentTitle}>{content.title}</Text>
      <Text style={styles.contentText}>{content.releaseDate}</Text>
    </View>
  </View>
)
   
}

<View style={styles.container}>
  {header}
  <View style={{width: '100%', justifyContent: 'space-around', backgroundColor: 'green'}}>
     <FlatList
        data={data}
        pagingEnabled={true}
        horizontal={true}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        ref={flatList}          
      />
  </View>   
</View>

const styles = StyleSheet.create({
  container: {
    width: windowWidth,
    marginTop: 15,
    paddingBottom: 15,
    borderBottomWidth: 1,
    borderBottomColor: Colors.borderBlue,
    backgroundColor: Colors.backgroundGenericTransparent,
  },
  item: {
    width: windowWidth / 3.1,
    backgroundColor: 'red',
  },
  image: {
    width: '100%',
    height: 220,
  },
})

结果：

正如您所看到的，尽管我在容器上添加了一个 space-around 属性，但这些项目都集中在左侧。不显示我如何解决这个问题。

Answer 1

使用

ItemSeparatorComponent

<FlatList
    data={data}
    pagingEnabled={true}
    horizontal={true}
    renderItem={renderItem}
    keyExtractor={item => item.id}
    ref={flatList}
    ItemSeparatorComponent={() => {
        return (
            <View
                style={{
                    height: "100%",
                    width: 10,
                }} />
        );
    }}
/>

Answer 2

在平面列表上使用此道具：

columnWrapperStyle={{ justifyContent: "space-between" }}

Answer 3

不确定您想要实现什么目标。 这就是你想要的吗？

小吃这里

只需向容器添加水平填充即可。无论你的物品有多大，你总会有左右间距。如果项目变得太大，您可以开始滚动。

Answer 4

您可以使用

contentContainerStyle

作为父项并相应地设置其样式。

---

查看下面的示例。

<FlatList
  data={data}
  keyExtractor={(item, index) => index}
  contentContainerStyle={styles.listWrapper}
  horizontal
  showsHorizontalScrollIndicator={false}
  scrollEnabled={false}
  renderItem={({ item, idx }) => <Text>{item}</Text>}
/>;

---

const styles = StyleSheet.create({
  listWrapper: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    flex: 1,
  },
});

这将在您列出的项目之间添加均匀的空间

Answer 5

    <View style={styles.messageGalleryContainer}>
                <FlatList
                    data={files}
                    renderItem={renderImageGalleryItem}
                    keyExtractor={(item) => item?._id}
                    horizontal
                    showsHorizontalScrollIndicator={false}
                    ItemSeparatorComponent={() => <View style={{ width: 10 }} />} // add this line
                    contentContainerStyle={styles.messageGalleryItemContainer}
                />
            </View>

您应该将 ItemSeparatorComponent 与空组件或任何您想要的元素一起使用。