如何在React Native中包装扁平列表项

Question

每一行中的项目将根据其文本大小而有所不同。Flatlist用于呈现项目。

TagView.js

<View style={styles.tagView}>
    <FlatList 
        scrollEventThrottle={1900} 
        data={this.state.interests} 
        numColumns={5}
        renderItem={({ item }) => (
           <View style={styles.tag}>
               <Text>{item.tagName}</Text>
           </View>
        )}
        keyExtractor={(item, index) => index}
        contentContainerStyle={{ paddingBottom: 100 }}
    />
</View>

风格

tagView: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap"
},
tag: {
    borderWidth: 1,
    borderRadius: 10,
    borderColor: "black",
    backgroundColor: "white",
    padding: 3,
    marginTop: 5
}

结果

但这里的项目没有用设备宽度包装。有没有包装内容物？

Answer 1

为此，请使用滚动视图组件。

<ScrollView contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap' }}>
  {tags.map(({ id, name }) => (
     <Text key={id}>{name}</Text>
  ))}
</ScrollView>

Answer 2

添加水平道具并尝试，

      <FlatList 
        scrollEventThrottle={1900} 
        data={this.state.interests} 
        numColumns={5}
        horizontal={false}
        renderItem={({ item }) => (
           <View style={styles.tag}>
               <Text>{item.tagName}</Text>
           </View>
        )}
        keyExtractor={(item, index) => index}
        contentContainerStyle={{ paddingBottom: 100 }}
    />

Answer 3

带列的扁平列表包装样式

<FlatList 
    columnWrapperStyle={styles.tagView}
    scrollEventThrottle={1900} 
    data={this.state.interests} 
    numColumns={5}
    renderItem={({ item }) => (
       <View style={styles.tag}>
           <Text>{item.tagName}</Text>
       </View>
    )}
    keyExtractor={(item, index) => index}
    contentContainerStyle={{ paddingBottom: 100 }}
/>

风格

tagView: {
  flexWrap: "wrap"
},