React Native的FlatList无法滚动到底部

Question

我有一个（我认为很简单的）FlatList，它渲染了一个Cards列表（以下是代码）。

问题：列表可以渲染，但无法滚动以完全显示列表中的最后一个元素或FlatList下面的内容。

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

• 删除所有样式
• 将FlatList包装在
• 向FlatList或包装器添加style={{flex: 1}}（这会导致所有内容消失）

有什么想法吗？

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

- rubie

---

你有检查它是否嵌套在一个具有 FlexGrow: 1 的 ScrollView 中，而且你的 FlatList 也有 flexGrow: 1 吗？...因为如果是的话，它将无法正常工作... - Hend El-Sahli

是的@HendEl-Sahli - 我尝试过添加和删除滚动视图，尝试仅呈现列表而没有容器 - 不幸的是没有成功。 - rubie

所以请尝试将 renderItem 组件替换为一个非常简单的 Text，以此来查看是否与此有关。 - Hend El-Sahli

Answer 1

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

- Eugene P.

---

太棒了，我简直不敢相信就是这样。我真的花了4小时43分钟来试图弄清楚这件事。 - martin

你能解释一下为什么这是正确的解决方案吗？ - A. Khaled

有时候你只需要在Flatlist的样式中添加"MarginBottom"，使其达到组件的"Edge"，就像这样的样式={{marginBottom:150}}，确保不断增加该值，直到它开始滚动。 - Khalid Tamine

添加marginbottom/paddingBottom可以起作用，但似乎有些"hacky"。对于每个作为FlatList父级的View元素，添加style={{flex: 1}}是最合适的解决方案。但我建议再添加10-20像素的marginbottom/paddingBottom，这样就可以让一切都看起来更好。 - louis

这太棒了，这真是救了我的一天。 - sam

Answer 2

我曾经遇到相同的问题，并找到了解决方法。通过添加一个React元素/组件，可以将prop ListFooterComponent添加到列表中。我只是传递了一个高度适宜的view，这对我来说完美地解决了问题。

以下是代码片段:

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

这绝对可行！

- Vars Zakaryan

Answer 3

终极解决方案是 ✔

任何包含 flatlist 的视图/子视图都必须具有 flex 值为 1 - 不管深度如何。

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

- Joseph Ajibodu

Answer 4

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

您尝试过在样式中添加flexGrow: 1替换flex吗？

- Nnanyielugo

---

感谢您的解释 - 添加 marginBottom 确实有助于滚动，但下面的内容仍然不在那里。我怀疑问题可能来自其他地方 - 如您所建议的父容器 - 在这种情况下，一旦我确认了这一点，我将接受此答案。此外，flexGrow 没有起作用，但学习它还是很好的，谢谢。 - rubie

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

各位大佬，我也遇到了相同的问题，有什么解决办法吗？ - suisied

Answer 5

我的情况有点不同，我在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。

- Brian Hong

Answer 6

从FlatList中删除flex:1，只保留父级View。

- Lima Neto

Answer 7

在renderItem中的子元素上添加flex: 1

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

- Артём Павленко

Answer 8

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

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

- Meo Flute

Answer 9

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

在我的情况下，父视图被包装在另一个视图中，我无法给它flex:1样式。

- Wilfred Mulenga

Answer 10

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

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

- Abdul Rashid