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包裹成这样的ScrollView：

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

动态高度将由ScollView父级管理。

请参阅文档here。

Answer 3

根据您的要求添加flexGrow：0和minHeight

 container: {
        flex: 1,
        flexGrow: 0,
        minHeight: 70,
        flexDirection: 'row',
        alignItems: 'center',          
    },

Answer 4

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

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

FlatList动态高度大小

4 个答案: