web-dev-qa-db-fra.com

FlatList Dimensionnement dynamique en hauteur

J'ai une boîte de saisie semi-automatique qui me donne une liste d'éléments à remplissage automatique. J'affiche les éléments dans FlatList, j'ai également une bordure autour de la FlatList. Mon code est donné ci-dessous: -

render(){
return (
  <View>
    <TextInput
       clearButtonMode="while-editing"
       onChangeText={this.onChangeText}
       value={this.state.searchText}
       onSubmitEditing={this.onTextSubmitted}
       placeholder="Find..." />
       {this.state.data.length > 0 &&
        <FlatList
           style={styles.list}
           keyboardShouldPersistTaps="handled"
           data={this.state.data}
           ItemSeparatorComponent={this.renderSeparator}
           keyExtractor={item => item.properties.id}
           renderItem={this.renderItem} />});
}

const styles = StyleSheet.create({
list: {
    borderWidth: 16,
    borderColor: colors.searchBorder,
  },
});

Comment puis-je augmenter/diminuer la taille de FlatList avec le nombre d'éléments de la liste (je pense que la bordure est la raison de cette erreur).

 Sample Image

react-nativereact-native-listviewreact-native-flatlist
10
aprofromindia

Ajoutez flexGrow: 0 à votre style de liste.

11
Julian K

J'ai eu le même problème et les solutions ci-dessus ne fonctionnent pas dans mon cas.

La solution, pour moi, était d’envelopper la FlatList dans un ScrollView comme ceci:

<ScrollView>
  <FlatList
      data={this.state.listItem}
      renderItem={this.renderItem}
  />
</ScrollView>

La hauteur dynamique sera gérée par le parent ScollView.

Voir la documentation ici .

1
UnableHead