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>

Answer 1

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

这是代码片段：

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

这 100% 有效！

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

在我的渲染项目中添加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 6

从FlatList中删除flex：1，仅保留父视图。

Answer 7

将flex: 1的孩子添加到renderItem

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

Answer 8

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

在我的情况下，父视图被包裹在另一个视图中，而我无法赋予flex: 1样式。

Answer 9

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

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

Answer 10

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

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

Answer 11

最终的解决方案是✔

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

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

React Native FlatList没有滚动到结束

11 个答案: