Horizontal Flatlist：项目之间的空间答案

【问题标题】：Horizontal Flatlist: Space between itemsHorizontal Flatlist：项目之间的空间
【发布时间】：2022-02-09 23:47:22
【问题描述】：

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

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,
  },
})

结果：

正如您所见，尽管我在容器上添加了空格属性，但这些项目都在左侧。不显示我如何解决这个问题。

【问题讨论】：

为styles.item添加边距？
justify-content : space-around CSS 属性适用于 flex-displayed 容器。因此，请确保添加属性justify-content: space-around 的视图也具有display: flex。此外，要在每个项目之间留出空间，您应该这样做justify-content: space-between
添加边距当然是可行的，但我想使用 'space-around' 属性来自动计算边距，只是为了整洁。所有视图都已经有 display flex 属性，我尝试添加它，但没有任何区别。

标签： css reactjs react-native flexbox react-native-flatlist

【解决方案1】：

不确定您要达到的目标。这就是你想要的吗？

小吃here

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

【讨论】：