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>

    );
  }

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

Warning: flexWrap:wrap`` is not supported with the VirtualizedList components.Consider using numColumns with FlatList instead.

Answer 1

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

flatlist: {
   flexDirection: 'column',
},

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

numColumns={3}