React-native: how to wrap FlatList items

问题

I have a list of Terms that are returned by a query. Each is a single word. Currently my FlatList renders each word into a button on the same row (horizontal={true}) I would like the buttons to wrap like normal text would. But I absolutely do not want to use the column feature, because that would not look as natural. Is this possibly a bad use-case for FlatList? Are there any other components I could use?

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>

    );
  }

One error message amongst others I've gotten is:

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

回答1:

How I was able to wrap the components was like below

flatlist: {
   flexDirection: 'column',
},

and in my FlatList component added this props

numColumns={3}

回答2:

Unfortunately flexWrap is indeed unsupported in FlatLists. We are recommended to use a ScrollView instead of a FlatList to create this effect. This is the issue: https://github.com/facebook/react-native/issues/13939

来源：https://stackoverflow.com/questions/45526443/react-native-how-to-wrap-flatlist-items