React Native FlatList 没有滚动到结束

Posted 2023-02-16

【中文标题】React Native FlatList 没有滚动到结束

【英文标题】：React Native FlatList not scrolling to end

【发布时间】：2019-08-13 08:52:40

【问题描述】：

我有（我认为是）一个简单的FlatList，它呈现Cards 的列表（代码如下）

问题：列表呈现，但不会滚动以完全显示列表中的最后一个元素，或者到FlatList下方的内容

我尝试过的：基本上所有相关的 SO 问题：

删除所有样式 将FlatList 包装在View 或ScrollView 或两者中 将 style=flex: 1 添加到 FlatList 或包装器（这会导致 **ALL* 内容消失）

有什么想法吗？

<FlatList
        data=props.filteredProducts
        renderItem=(item) => (
          <TouchableOpacity onPress=() => props.addItemToCart(item)>
            <Card
              featuredTitle=item.key
              image=require('../assets/icon.png')
            />
          </TouchableOpacity>
        )
        keyExtractor=item => item.key
        ListHeaderComponent=
          <SearchBar />
        
      />
...
<Other Stuff>

【问题讨论】：

您是否检查过它是否嵌套在具有 FlexGrow: 1 的 ScrollView 中 + 您的 FlatList 也有 flexGrow: 1？ ...因为如果是，它将无法正常工作...

是的@HendEl-Sahli - 我已经尝试添加和删除滚动视图，尝试只渲染没有容器的列表 - 恐怕没有乐趣

所以请尝试用一个非常简单的Text 替换renderItem 组件，例如...看看它是否与此有关。

【参考方案1】：

为作为 FlatList 父级的每个 View 元素添加 style=flex: 1。

【讨论】：

太棒了。我不敢相信就是这样。我确实花了 4 小时 43 分钟试图弄清楚这一点。

您能否提供解决方案背后的推理/直觉？

【参考方案2】：

我遇到了同样的问题，刚刚找到了解决方案。通过给它一个 React 元素/组件来添加 prop ListFooterComponent。我刚刚通过了一个高度更合适的视图，它对我来说非常有用。

这里是sn-p的代码：

<FlatList
        data=DATA
        renderItem=( item ) => (<ListItem itemData=item />) 
        keyExtractor=item => item.id
        ListFooterComponent=<View style=height: 20/>
      />

这 100% 有效！

【参考方案3】：

我不确定您的情况是否与几个月前我在一个项目中遇到的情况完全相同，但我注意到我必须添加一个margin/padding（取决于您喜欢什么）才能抬起底部的可滚动容器。这通常是因为父容器似乎干扰了可滚动元素的样式。

您是否尝试在样式中添加flexGrow: 1 来代替flex？

【讨论】：

感谢您的解释 - 添加 marginBottom 确实有助于滚动，但下面的内容仍然不存在。我怀疑问题可能来自其他地方-您建议的父容器-在这种情况下，一旦确认，我将接受此答案。另外，flexGrow 什么也没做，但还是很高兴了解它，谢谢

还没有，很遗憾 - 周末没有太多时间来处理它，但本周会回来更新/接受答案

大家好，我也遇到了同样的问题，有解决办法吗？

【参考方案4】：

我的情况有点不同，因为我在reanimated-bottom-sheet 包提供的底部表内使用了FlatList。但问题是一样的：滚动没有正确显示最后一项。

我的方法是计算并设置包含FlatList 的视图的高度。为了使它在底部插入时看起来更好，我通过这样做为FlatList 的最后一项提供了更多的底部边距：

<FlatList
    data=results
    keyExtractor=(item) => item.name
    scrollEnabled=bottomSheetIndex == 1 ? true : false
    renderItem=( item ) =>
        <LocationInfo
            bottom=results[results.length - 1].id == item.id ? insets.bottom : 0
            result=item
            wait=waitState[item.id]
            bsIndex=bottomSheetIndex
        />
    
/>

const LocationInfo = ( bottom, result, wait, bsIndex ) => 

    return (
        <View style=[styles.container,  paddingBottom: bottom ]>
            ... 

有关插图，请参阅react-native-safe-area-context。

【参考方案5】：

终极解决方案是✔

任何包含平面列表的视图/子视图的 flex 必须为 1 - 无论多深。

因此，如果您应用此方法但它不起作用，请检查您的样式并确保某处没有错误。

【参考方案6】：

从 FlatList 中移除 flex:1 并只保留父 View。

【参考方案7】：

将 flex:1 添加到我的渲染项对我有用

 <FlatList
      data=data
      renderItem=( item ) => (
        <ListItem
          onPress=() => console.log('ok')
          bottomDivider
          rightTitle=
            <Divider style= marginBottom: 4, backgroundColor: item.status, width: '50%', height: '11%', borderRadius: 10  />
          
          titleProps= numberOfLines: 1 

          rightSubtitle=item.date
          rightTitleStyle= fontFamily: 'poppins' 
          rightSubtitleStyle= fontFamily: 'poppins' 
          titleStyle= fontFamily: 'poppins' 
          subtitleStyle= fontFamily: 'poppins' 
          title=item.device
          subtitle=item.type
          leftAvatar= source: item.icon, rounded: false 
          **style= flex: 1 **
        />
      )
      keyExtractor=item => item._id
      ListHeaderComponent=renderHeader
      ListFooterComponent=renderFooter
      onEndReached=handleLoadMore
      onEndReachedThreshold=0.2

    />

【参考方案8】：

将flex: 1 添加到子renderItem

<View style= height: `93%` >
  <FlatList
    contentContainerStyle= minHeight: `100%` 
    scrollEnabled=true
    ...props
    renderItem=(item) => (
      <View style= flex: 1 >
        ...
      </View>
    )

【参考方案9】：

我用来解决此问题的方法是将父视图设置为 FlatList 的背景颜色为可见颜色（例如红色）。然后调整该视图的底部边距，使其足够大，以便查看 FlatList 中的所有内容。

在我的例子中，父视图被包裹在另一个视图中，我不能给它flex: 1 样式。

【参考方案10】：

我遇到了同样的问题。我所做的是为 FlatList 的父视图提供一个 marginBottom ，其大小等于（或略大于）渲染项的大小。

<View style=marginBottom: HEIGHT_OF_CELL + 60, flexGrow:1>
    <FlatList
         keyExtractor=(item, index) => index.toString()
         data=posts
         renderItem=renderItem
    />
            
</View>
        

【参考方案11】：

使用父视图的尺寸并设置给定的高度：

const screenHeight = Dimensions.get('window').height - 100 
 <View style=...styles.container,height:screenHeight>
 ....All child components
 </View>