如何在React Native中包装Flatlist项目

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
}

结果

但是这里的项目没有按设备宽度换行。有什么方法可以使内容换行吗？

- Muhsin Keloth

---

也可以尝试在父组件中添加 alignItems: 'flex-start'。 - Pritish Vaidya

@PritishVaidya 尝试了，不起作用。 - Muhsin Keloth

我认为他们不支持在FlatList中使用它，原因有很多，请查看这里。另一种选择是使用ScrollView。 - Pritish Vaidya

Answer 1

FlatList与columnWrapperStyle属性

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

- Hashim pk

---

这应该被接受为最佳答案。 - undefined

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 }}
    />

- Yogaraj Saravanan

---

水平属性用于将项目水平排列而不是垂直堆叠。 - Muhsin Keloth

如果你设置horizontal={false}和numColumns={5}，它会给你一行有5个值然后换行。 - Yogaraj Saravanan

@YogarajSaravanan 实际上，同时使用这两个 props 会引发错误：numColumns 不支持 horizontal。 - Arnaud

这仍然可能会导致与行中最后一项和屏幕边缘重叠，具体取决于项目的大小。有没有办法确保这不会发生？ - yam55

Answer 3

使用ScrollView组件来实现此目的。

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

- Mihail

---

我可以确认<scrollview>是正确的方法。我曾经有同样的问题，通过将Flatlist更改为ScroolView，它完美地解决了我的问题。谢谢Michael。 - Joachim de Bernis

Answer 4

尝试使用ScrollView和FlatList。

                <ScrollView
                  horizontal
                  showsVerticalScrollIndicator={false}
                  showsHorizontalScrollIndicator={false}
                  contentContainerStyle={{
                    flexDirection: 'row',
                    flexWrap: 'wrap',
                  }}>
                  <FlatList
                    data={this.state.carouselItems}
                    renderItem={this.renderItem}
                    keyExtractor={item => `${item.id_news}`}
                    showsHorizontalScrollIndicator={false}
                    numColumns={this.state.carouselItems.length / 2}
                  />
                </ScrollView>

- reggi49