如何在 React Native 中包装 Flatlist 项目答案

【问题标题】：How to Wrap Flatlist items in React Native如何在 React Native 中包装 Flatlist 项目
【发布时间】：2019-01-20 01:10:37
【问题描述】：

我正在尝试呈现此图像中的项目列表。

每行中的项目将根据其文本大小而有所不同。 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
}

结果

但是这里的项目没有用设备宽度包裹。有什么可以包装的吗？

【问题讨论】：

还可以尝试将alignItems: 'flex-start' 添加到父级
@PritishVaidya 试过了。不工作
我认为他们在FlatList 中不支持它，原因有很多，请查看here。替代方法是使用ScrollView

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

【解决方案1】：

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

【讨论】：

【解决方案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 }}
    />

【讨论】：

horizontal prop 用于渲染水平相邻的项目，而不是垂直堆叠。
是的，所以如果你给 Horizontal={false} 和 numColumns={5}，它会给你一行 5 个值然后换行。
@YogarajSaravanan 实际上，使用这两个道具会引发错误：numColumns does not support horizontal
这仍然可能导致与行中的最后一个项目和屏幕边缘重叠，具体取决于项目的大小。无论如何要确保这不会发生？

【解决方案3】：

为此目的使用ScrollView 组件。

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

【讨论】：

II 可以确认是好方法。我有同样的问题，并通过 ScroolView 更改了我的 Flatlist，它运行良好。谢谢迈克尔。

【解决方案4】：

试试 scoolview 和 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>

【讨论】：