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

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

实验结果：

正如你所看到的，尽管我已经在容器上添加了一个空格属性，但是所有的项目都在左边。