react-native - React Native FlatList 没有滚动到结束

Question

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

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

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

删除所有样式
包装FlatList在一个View或一个ScrollView或两者
添加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>

score 48 · Accepted Answer

48

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

于 2019-12-04T19:49:18.930 回答

score 9 · Accepted Answer

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

这是代码片段：

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

这100％有效！

score 5 · Accepted Answer

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

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

score 4 · Accepted Answer

我的情况有点不同，因为我使用了包装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。

score 2 · Accepted Answer

最终的解决方案是✔</p>

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

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

score 1 · Accepted Answer

1

从 FlatList 中删除 flex:1 并仅保留父 View。

于 2020-02-19T13:32:03.803 回答

score 1 · Accepted Answer

添加flex: 1到子项renderItem

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

score 0 · Accepted Answer

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

    />

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

react-native - React Native FlatList 没有滚动到结束

11 回答 11

Related

Reference