FlatList 动态高度调整答案

【问题标题】：FlatList Dynamic Height SizingFlatList 动态高度调整
【发布时间】：2018-02-13 21:42:38
【问题描述】：

我有一个自动完成框，它给了我一个自动完成项目的列表。我在 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-listview react-native-flatlist

【解决方案1】：

将flexGrow: 0 添加到您的列表样式中。

【讨论】：

你是救生员！ :D
这使我的列表根本不显示任何数据，但我真的需要这种行为（根据大小内容调整列表大小）！
@Sami 孩子有绝对定位吗？您可以尝试设置行的高度，甚至使用 getItemLayout（不是 100% 确定它可以与 flex: 0 一起使用，但值得一试）reactnative.dev/docs/flatlist#getitemlayout

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

对我来说，解决方案是将 FlatList 包装成这样的 ScrollView：

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

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

请参阅文档here。

【讨论】：

这不应该是 2020 年的正确答案。您将收到警告：“VirtualizedLists 永远不应嵌套在具有相同方向的普通 ScrollViews 中 - 请改用另一个 VirtualizedList-backed 容器。”跨度>

【解决方案4】：

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

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

【讨论】：

使用flex速记不起作用，您必须手动指定flexGrow属性（即flexGrow: 0）