FlatList动态高度调整 [英] FlatList Dynamic Height Sizing

问题描述

我有一个自动完成框，其中提供了自动完成项的列表.我在FlatList中显示项目，在FlatList周围也有一个边框.我的代码如下:-

I have an AutoComplete Box which gives me a list of autocomplete items. I display the items in FlatList, I also have a border around the FlatList. My code is given below: -

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的大小(我认为边框是导致此错误的原因).

How can I increase/decrease the size of the FlatList with the number of list items, (I think the border is the reason behind this error).

推荐答案

在您的列表样式中添加flexGrow: 0.

Add flexGrow: 0 to your list style.

这篇关于FlatList动态高度调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！