wake-up-neo.com

FlatList Dynamische Größenanpassung

Ich habe eine AutoComplete-Box, die mir eine Liste der automatisch vervollständigenden Elemente gibt. Ich zeige die Elemente in FlatList an, ich habe auch einen Rand um die FlatList. Mein Code ist unten angegeben: -

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,
  },
});

Wie kann ich die FlatList-Größe mit der Anzahl der Listenelemente vergrößern/verkleinern? (Ich denke, der Rahmen ist der Grund für diesen Fehler).

 Sample Image

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

Fügen Sie flexGrow: 0 zu Ihrem Listenstil hinzu.

11
Julian K

Ich hatte das gleiche Problem und die obigen Lösungen funktionieren in meinem Fall nicht.

Für mich bestand die Lösung darin, die FlatList wie folgt in eine ScrollView zu packen:

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

Die dynamische Höhe wird vom übergeordneten ScollView-Element verwaltet.

Siehe die Dokumentation hier .

1
UnableHead