Flex React Native FlatList 孩子长到全高？

Posted 2023-02-22

【中文标题】Flex React Native FlatList 孩子长到全高？

【英文标题】：Flex React Native FlatList children to grow to full height?

【发布时间】：2021-06-17 23:00:38

【问题描述】：

我正在使用来自 React Native 的 FlatList 来渲染一堆堆叠在一起的项目。

这很好用，I've managed to make the FlatList itself expand it's height to fill the available space 但我希望在有更多可用空间时增加 FlatList 项目。

使用ScrollView（简化伪代码）很容易做到：

<ScrollView
  contentContainerStyle=
    display: "flex",
    flexGrow: 1,
  
>
  <Item key=1 style= flexGrow: 1  />
  <Item key=2 style= flexGrow: 1  />
</ScrollView>

但它不适用于FlatList（简化伪代码）：

<FlatList
  contentContainerStyle=
    display: "flex",
    flexGrow: 1,
  
  renderItem=( index ) => <Item key=index style= flexGrow: 1  />
/>

I've created an Expo Snack showing both the ScrollView successfully growing the elements and the FlatList failing to do so.

网上似乎有很多关于使父 FlatList 全高的讨论，但我一直在努力寻找有关使 FlatList items 增长以填充可用 @ 987654344@身高。

我需要使用FlatList，因为我打算使用react-native-draggable-flatlist来实现拖放，找不到不使用FlatList的等效库。

Expo Snack 的屏幕截图如下所示：

如此处所示，DOM 中的问题似乎是 CallRenderer，VirtualizedList 是具有正确 flex 样式的正确高度，DayItem 设置为增长（并且与 @987654350 一起工作正常@)，但介于两者之间的 CallRenderer 似乎打断了两者之间的弹性关系：

非常感谢任何帮助。

【问题讨论】：

如果您将 minHeight: screen 设置为平面列表，它可能会有所帮助

@Craques FlatList 本身已经增长到可用的高度，只是里面的项目不会增长（尽管父母是 flex 而孩子是 flexGrow: 1，似乎 @ 987654355@ 正在破坏 flex 设置

【参考方案1】：

作为一种变通方法，你可以听听Flatlist的onLayout，将计算出的高度保持在一个状态，然后将每个孩子的高度设置为flatlist height / data.length。

【讨论】：

hmm 这可以与 minHeight 作为备用计划一起使用，希望仅使用 CSS 修复它，但请记住，谢谢！

【参考方案2】：

制作每个项目 flex: 1 而不是flatlist

【讨论】：

感谢 Ehsan 的回复，但项目上已经有 flexGrow: 1，设置简写 flex: 1 仅设置 flexShrink 和 flexBasis 并且在尝试时它不会这里有区别。可以在这里看到代码：snack.expo.io/@fredrivett/…

看起来很奇怪？你介意检查一下平面列表的内部细节，你可以弄清楚它是如何在内部工作的

我认为是因为性能。 flatlist 总是为每个项目分配一个计算高度。

一种解决方法是在平面列表的高度上划分项目数

或者你可以在github上打开一个问题。

【参考方案3】：

我发现完成此操作的最佳方法是将屏幕的高度，或者在您的示例中，将 flatlist 本身的高度除以列表项的数量（或您想要填充屏幕的项目数）一次）并将其设置为 renderItem 的高度：

 const items = [  text: "First item" ,  text: "Second item" ];

 // height given to flatlist
 const FLATLIST_HEIGHT= 200;

 // or number of Items I want to fill screen
 const ITEMS_COUNT = items.length;

 const renderItem = ( item, index, drag, isActive ) => 
    return (
      <View
        style=
          borderWidth: 2,
          height: Math.floor(FLATLIST_HEIGHT/ITEMS_COUNT) - 2,
          // minus 2 to compensate for borderWidth
        
      >
        <Text>item.text</Text>
      </View>
    );
  ;

...

 const myFlatList = (
    <FlatList
      data=items
      renderItem=renderItem
      keyExtractor=item => item.id
      contentContainerStyle=
        height: FLATLIST_HEIGHT,
      
    />
  );

如果没有平面列表填满屏幕，只需设置窗口高度的值：

import ..., Dimensions from 'react-native';

...
const HEIGHT = Dimensions.get('window').height;

const renderItem = ( item, index, drag, isActive ) => 
    return (
      <View
        style=
          borderWidth: 2,
          height: Math.floor(HEIGHT/ITEMS_COUNT) - 2,
          // minus 2 to compensate for borderWidth
        
      >
        <Text>item.text</Text>
      </View>
    );
  ;