React Native FlatList 不滚动到结尾

Question

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

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

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

• 删除所有样式
• 包裹FlatList在 aView或 aScrollView或两者中
• 添加style={{flex: 1}}到FlatListor 包装器（这会导致 **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>

Answer 1

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

Answer 2

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

这是代码片段：

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

这100%有效！

Answer 3

最终解为\xe2\x9c\x94

\n

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

\n

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

\n

Answer 4

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

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