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> 

    ); 
    } 

一個錯誤消息是：

警告：flexWrap: wrap``不與VirtualizedList components.Consider使用numColumns與FlatList，而不是支持。

Answer 1

我怎麼能包住組件就像下面

flatlist: { 
    flexDirection: 'column', 
}, 

，並加入我的FlatList組件此道具

numColumns={3} 

Answer 2

不幸flexWrap是FlatLists確實不支持。我們建議使用ScrollView而不是FlatList來創建這種效果。這是問題：https://github.com/facebook/react-native/issues/13939