Réact-native: comment envelopper les éléments FlatList

Question

J'ai une liste de termes qui sont retournés par une requête. Chacun est un seul mot. Actuellement, mon FlatList rend chaque mot dans un bouton sur la même ligne (horizontal = {true}) Je voudrais que les boutons s'emboîtent comme le ferait un texte normal. Mais je ne veux absolument pas utiliser la fonction de colonne, car cela ne semblerait pas naturel. Est-ce que c'est peut-être un mauvais cas d'utilisation pour FlatList? Y a-t-il d'autres composants que je pourrais utiliser?

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> 

    ); 
    } 

Un message d'erreur, entre autres, j'ai obtenu est:

Attention: flexWrap: wrap`` n'est pas pris en charge avec l'aide de VirtualizedList components.Consider numColumns avec FlatList à la place.

Answer 1

Comment j'ai pu envelopper les composants était comme ci-dessous

flatlist: { 
    flexDirection: 'column', 
}, 

et dans mon composant FlatList ajouté ce props

numColumns={3} 

Answer 2

Malheureusement flexWrap est en effet non pris en charge dans FlatLists. Nous vous recommandons d'utiliser un ScrollView au lieu d'un FlatList pour créer cet effet. C'est le problème: https://github.com/facebook/react-native/issues/13939