FlatList动态高度大小

Question

我有一个自动完成框,它给我一个自动完成项列表.我在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的大小(我认为边框是此错误背后的原因).

Answer 1

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

Answer 2

边框只是当前 FlatList 组件边界的指示符。如果您希望列表增大和缩小，请尝试添加flex: 1到列表样式属性。

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