FlatList 动态高度调整

Posted 2023-02-16

【中文标题】FlatList 动态高度调整

【英文标题】：FlatList Dynamic Height Sizing

【发布时间】：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 的大小，（我认为边框是此错误背后的原因）。

【问题讨论】：

目前如何显示列表以及您希望它如何？如果可以显示截图

你解决了这个问题吗？我也遇到了同样的问题

你找到解决这个问题的方法了吗？请分享

【参考方案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）