Размер динамической высоты FlatList

У меня есть поле автозаполнения, которое дает мне список элементов автозаполнения. Я отображаю элементы в FlatList, у меня также есть рамка вокруг FlatList. Мой код приведен ниже: -

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

Как я могу увеличить / уменьшить размер FlatList с количеством элементов списка (я думаю, что граница является причиной этой ошибки).

Образец изображения


react-native react-native-flatlist react-native-listview
person aprofromindia    schedule 05.09.2017    source источник
comment
Как он отображает список в настоящее время и как вы этого хотите? Если можно показать скриншот   -  person Paras Watts    schedule 05.09.2017
comment
Вы исправили это? У меня такая же проблема   -  person Sushant Yadav    schedule 28.09.2017
comment
Вы нашли решение этой проблемы? Поделись, пожалуйста   -  person Larney    schedule 22.05.2019

Ответы (4)


arrow_upward
65
arrow_downward

Добавьте flexGrow: 0 в свой стиль списка.

person Julian K    schedule 10.03.2018
comment
Ты спасатель! : D - person anni; 03.04.2018
comment
Это заставляет мой список вообще не отображать никаких данных, хотя мне действительно нужно такое поведение (изменение размера списка в зависимости от размера содержимого)! - person Sami; 29.07.2018
comment
@Sami У детей есть абсолютное позиционирование? Вы можете попробовать установить высоту строк или даже использовать getItemLayout (не уверен на 100%, что он будет работать с flex: 0, но попробовать стоит) reactnative.dev/docs/flatlist#getitemlayout - person Julian K; 28.07.2021

arrow_upward
2
arrow_downward

У меня была такая же проблема, и приведенные выше решения не работают в моем случае.

Для меня решение заключалось в том, чтобы обернуть FlatList в ScrollView следующим образом:

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

Динамической высотой будет управлять родитель ScollView.

См. Документацию здесь.

person UnableHead    schedule 30.11.2018
comment
Согласно 2020 году это неправильный ответ. Вы получите предупреждение: VirtualizedLists никогда не должны быть вложены в обычные ScrollView с той же ориентацией - вместо этого используйте другой контейнер с поддержкой VirtualizedList. - person Felipe Rugai; 03.07.2020

arrow_upward
1
arrow_downward

добавьте flexGrow: 0 и minHeight в соответствии с вашими требованиями

 container: {
        flex: 1,
        flexGrow: 0,
        minHeight: 70,
        flexDirection: 'row',
        alignItems: 'center',          
    },
person Keshav Gera    schedule 22.05.2020

arrow_upward
-1
arrow_downward

Граница - это просто индикатор границ вашего текущего компонента FlatList. Если вы хотите, чтобы список увеличивался и уменьшался, попробуйте добавить flex: 1 в свойство стиля списка.

const styles = StyleSheet.create({
  list: {
    borderWidth: 16,
    borderColor: colors.searchBorder,
    flex: 1
  },
})
person C.Kelly    schedule 18.01.2018
comment
использование сокращения flex не работает, вам нужно вручную указать атрибут flexGrow (т.е. flexGrow: 0) - person Julian K; 10.03.2018