React-native：如何包装 FlatList 项目

Question

我有一个查询返回的术语列表。每一个都是一个词。目前，我的 FlatList 将每个单词呈现为同一行上的一个按钮（horizo​​ntal={true}） 我希望按钮像普通文本一样换行。但我绝对不想使用列功能，因为那样看起来不太自然。 这可能是 FlatList 的一个坏用例吗？还有其他我可以使用的组件吗？

    const styles = StyleSheet.create({
      flatlist: {
        flexWrap: 'wrap'
      },
      content: {
        alignItems: 'flex-start'
      }})

    render() {
        return (
          <Content>
            <Header searchBar rounded iosStatusbar="light-content" androidStatusBarColor='#000'>
              <Item>
                <Icon name="ios-search" />
                <Input onChangeText={(text) => this.setState({searchTerm: text})} value={this.state.searchTerm} placeholder="enter word"/>
                <Icon name="ios-people" />

                <Button transparent onPress={this._executeSearch}>
                <Text>Search</Text>
              </Button>
              </Item>
            </Header>

            <FlatList style={styles.flatlist} contentContainerStyle={styles.content}
                horizontal={true} data={this.state.dataSource} renderItem={({item}) =>
                      <Button>
                        <Text>{item.key}</Text>
                      </Button>
                  }>
            </FlatList>
          </Content>
        );
      }

我收到的一条错误消息是：

警告：VirtualizedList 组件不支持flexWrap: wrap``。请考虑将numColumns 与FlatList 一起使用。

Answer 1

我如何包装组件如下所示

flatlist: {
   flexDirection: 'column',
},

在我的 FlatList 组件中添加了这个道具

numColumns={3}

Answer 2

可以去掉横向的道具来实现包裹效果

................
..................

<FlatList
    contentContainerStyle={{flexDirection : "row", flexWrap : "wrap"}} 
    data={this.state.dataSource} renderItem={({item}) =>
        <Button>
            <Text>{item.key}</Text>
        </Button>
    }
/>
.................
..............

Answer 3

不幸的是，FlatLists 确实不支持 flexWrap。我们建议使用 ScrollView 而不是 FlatList 来创建此效果。这就是问题所在：https://github.com/facebook/react-native/issues/13939

Answer 4

当我们使用horizontal flatList 时，不能使用flexWrap: wrap，VirtualizedList 组件不支持。您可以使用 numColumns 和 FlatList 在平面列表中创建一些列。然而，

如果你需要堆叠你可以使用的平面列表项

contentContainerStyle={{ justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap' }}

完整代码如下所示

<FlatList
      data={data}
      keyExtractor={(item) => item.type.id}
      contentContainerStyle={{ justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap' }}
      renderItem={({ item }) => 
        <Button>
            <Text>{item.key}</Text>
        </Button>
    }
/>

Answer 5

<FlatList 
            contentContainerStyle={{ flexDirection: 'row',flexWrap: 'wrap' ,maxWidth:1900,maxHeight:130}}
            data={data} 
            horizontal
            renderItem={({item,index }) => (
            <ScrollView
            // contentContainerStyle={{ flexDirection: 'row',flexWrap: 'wrap' ,maxWidth:1900,maxHeight:130}}
            >
                <TouchableOpacity
                    key={index}
                        style={apply('row py-1 px-2 bg-white shadow mt-1 mx-1 rounded-lg mb-1')}>
                        <Image
                            source={{
                                uri: `${lokasi + item.worker_type_image}`,
                            }}
                                style={{
                                    width: (width / 4) - 72,
                                    height: (width / 4) - 72,
                                    opacity: 0.85,
                                    borderRadius:5
                                }}
                            />
                        <Text style={apply('p-0 text/4 text-gray-400 mx-2')}>
                            {item.worker_type_name}
                        </Text>
                </TouchableOpacity>
            </ScrollView>
        )}
        keyExtractor={(item, index) => index}
    />