26

我有一个查询返回的术语列表。每一个都是一个词。目前，我的 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>
        );
      }

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

警告：flexWrap: 组件不支持 wrap`` 。请考虑VirtualizedList改用numColumnswith FlatList。

4

5 回答 5

46

我如何能够包装组件如下所示

flatlist: {
   flexDirection: 'column',
},

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

numColumns={3}
于 2017-08-08T07:29:17.873 回答
15

可以去掉水平道具来实现包裹效果

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

<FlatList
    contentContainerStyle={{flexDirection : "row", flexWrap : "wrap"}} 
    data={this.state.dataSource} renderItem={({item}) =>
        <Button>
            <Text>{item.key}</Text>
        </Button>
    }
/>
.................
..............
于 2020-02-09T13:47:49.207 回答
4

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

于 2017-09-26T13:06:23.810 回答
0

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

如果您需要堆叠平面列表项目，您可以使用

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>
    }
/>
于 2021-01-21T10:50:49.690 回答
0 
<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}
    />
于 2021-09-21T09:59:02.560 回答