React Native：如何让水平 FlatList 跨越整个宽度？

Question

我在平面列表中有一组盒子。如何让盒子拉伸以固定 FlatList 的宽度？

在这个世博小吃上更容易看到它

<FlatList
  data={DATA}
  horizontal={true}
  contentContainerStyle={{ flex: 1, justifyContent: 'center', alignItems: "center" }}
  style={{ backgroundColor: 'skyblue', width: "100%" }}
  renderItem={({ item, idx }) => (
    <View
      key={'flatlist' + idx}
      style={{ backgroundColor: 'powderblue', padding: 10, margin: 5, flex:1, width: "100%" }}>
      <Text>{item.id}</Text>
    </View>
  )}
  keyExtractor={(item) => item.id}
/>

Answer 1

我想到了。您必须进行以下调整。关键是alignItems可以变成stretch

<FlatList
    numColumns={4}
    horizontal={false}
    contentContainerStyle={{alignItems: "stretch"}}
/>

完整组件

<FlatList
    data={DATA}
    horizontal={false}
    numColumns={4}
    contentContainerStyle={{ flex: 1, justifyContent: 'center', alignItems: "stretch" }}
    style={{ backgroundColor: 'skyblue', width: "100%" }}
    renderItem={({ item, idx }) => (
    <View
        key={'flatlist' + idx}
        style={{ backgroundColor: 'powderblue', padding: 10, margin: 5, flex:1, width: "100%" }}>
        <Text>{item.id}</Text>
    </View>
    )}
    keyExtractor={(item) => item.id}
/>