如何在 React Native 中包装 Flatlist 项目

Posted 2023-02-22

【中文标题】如何在 React Native 中包装 Flatlist 项目

【英文标题】：How to Wrap Flatlist items in React Native

【发布时间】：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

【参考方案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 
    />

【讨论】：

horizo​​ntal prop 用于渲染水平相邻的项目，而不是垂直堆叠。

是的，所以如果你给 Horizo​​ntal=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>