React Native FlatList 不滚动结束

Question

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

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

我试过的方法：基本上所有相关的 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>

Answer 1

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

您是否尝试过将 flexGrow: 1 添加到您的样式中以代替 flex？

Answer 2

我的情况有点不同，因为我在 reanimated-bottom-sheet 包提供的底部 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。

Answer 3

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

    />

Answer 4

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

Answer 5

从 FlatList 中删除 flex:1，只保留父视图。

Answer 6

Add flex: 1 to child into renderItem

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

Answer 7

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

在我的例子中，父视图被包裹在另一个视图中，我无法为其提供 flex: 1 样式。

Answer 8

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

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

Answer 9

我遇到了同样的问题，刚刚找到了解决方案。通过给它一个 React element/component 添加道具 ListFooterComponent。我刚刚传递了一个高度合适的视图，它对我来说非常有用。

这是代码片段：

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

这 100% 有效！

Answer 10

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

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

Answer 11

最终的解决方案是✔

任何包含平面列表的 view/subview 的弹性必须为 1 - 无论深度如何。

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

React Native FlatList 不滚动结束

React Native FlatList not scrolling to end

react-native

react-native-flatlist

react-native-elements