react-native - 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

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

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

Answer 3

我遇到了同样的问题，上面的解决方案不适用于我的情况。

对我来说，解决方案是将 FlatList 包装到 ScrollView 中，如下所示：

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

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

请参阅此处的文档。

Answer 4

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

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