React-native：如何包装 FlatList 项目

Question

我有一个查询返回的术语列表。每一个都是一个词。目前，我的 FlatList 将每个单词呈现为同一行上的一个按钮（horizontal={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 组件的支持。考虑使用 numColumns 与 FlatList 代替。

原文由 mrmagoo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

flatlist: {
   flexDirection: 'column',
},

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

numColumns={3}

原文由 Mozak 发布，翻译遵循 CC BY-SA 3.0 许可协议