web-dev-qa-db-fra.com

React-native: comment encapsuler des éléments FlatList

J'ai une liste de conditions renvoyées par une requête. Chacun est un seul mot. Actuellement, ma FlatList convertit chaque mot en un bouton sur la même ligne (horizontal = {true}). J'aimerais que les boutons soient encapsulés comme le ferait le texte normal. Mais je ne veux absolument pas utiliser la fonction de colonne, car cela ne serait pas aussi naturel. Est-ce 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 parmi d'autres que j'ai reçu est:

Attention: flexWrap:wrap`` n'est pas pris en charge avec les composants VirtualizedList. Envisagez d'utiliser numColumns avec FlatList à la place.

react-nativereact-native-flatlistreact-native-flexbox
15
mrmagoo

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

flatlist: {
   flexDirection: 'column',
},

et dans mon composant FlatList ajouté ces accessoires

numColumns={3}
26
Mozak

Malheureusement, flexWrap n'est en effet pas pris en charge dans les FlatLists. Il est recommandé 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

2
sinewave440hz