React Native FlatList 没有滚动到结束

Question

我有（我认为是）一个简单的 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>

原文由 rubie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Eugene P. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

我的方法是计算并设置包含 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 发布，翻译遵循 CC BY-SA 4.0 许可协议