React Native FlatList开启inverted后onEndReached未触发求助

Got it, let's tackle this issue with your inverted FlatList not triggering onEndReached when scrolling to the top. This is a common gotcha because inverting the list flips both the layout and how the scroll position is interpreted by FlatList's built-in handlers. Here's how to fix it:

1. Fix the onEndReachedThreshold Value First #

First off, your current onEndReachedThreshold={30} is incorrect. This prop accepts a ratio (0 to 1) of the visible screen height, not pixels. A value of 30 means it would only trigger when you're 30x the screen height away from the end—way too far!

Change it to a reasonable ratio like 0.3 (triggers when 30% of the screen height remains before reaching the end):

onEndReachedThreshold={0.3}

2. Add Manual Scroll Detection (More Reliable for Inverted Lists) #

Even with the fixed threshold, inverted FlatLists sometimes don't fire onEndReached correctly because the "end" of the list is now the original top of your data set. To work around this, use the onScroll prop to manually detect when you've scrolled to the top (the inverted list's "end"):

Step 1: Add a scroll handler method #

In your component, add this method to check scroll position:

handleScroll = (event) => {
  const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
  // Calculate how close we are to the top (inverted list's "end")
  const distanceToTop = contentSize.height - layoutMeasurement.height - contentOffset.y;
  // Trigger load more when we're within 10% of the screen height from the top
  const shouldLoadMore = distanceToTop <= layoutMeasurement.height * 0.1;

  // Make sure we don't trigger multiple load requests at once
  if (shouldLoadMore && !this.state.isLoading) {
    this.handleLoadMore();
  }
};

Step 2: Update your FlatList #

Add the onScroll prop and adjust the throttle to ensure smooth detection:

<FlatList
  inverted
  data={messages}
  keyExtractor={this._keyExtractor}
  renderItem={({ item }) => ( <Text style={styles.item}>{item}</Text> )}
  onEndReached={this.handleLoadMore}
  onEndReachedThreshold={0.3}
  onScroll={this.handleScroll}
  scrollEventThrottle={16} // Match screen refresh rate for accurate detection
/>

3. Verify Your Load More Logic #

Double-check that your handleLoadMore function correctly updates the messages array and manages a loading state (like isLoading in the example above). Without a loading state, you might accidentally trigger multiple load requests as the user scrolls.

内容的提问来源于stack exchange，提问作者HARSHIT KUMAR