Обнаружение конечного достижения ScrollView в React Native: методы и примеры кода

Чтобы обнаружить onEnd-доступ ScrollView в React Native, вы можете использовать несколько методов. Вот несколько вариантов:

  1. Событие onScrollScrollView: вы можете использовать событие onScroll, предоставляемое компонентом ScrollView. Проверив текущую позицию прокрутки и сравнив ее с размером содержимого, вы можете определить, достигнут ли конец ScrollView.
<ScrollView onScroll={({nativeEvent}) => {
  const {layoutMeasurement, contentOffset, contentSize} = nativeEvent;
  const isEndReached = layoutMeasurement.height + contentOffset.y >= contentSize.height;
  if (isEndReached) {
    // End of ScrollView reached
    // Your logic here
  }
}}>
  {/* Content */}
</ScrollView>
  1. InteractionManager: вы можете использовать модуль InteractionManager, чтобы запланировать вызов функции после завершения всех взаимодействий, включая прокрутку ScrollView. Сравнивая текущую позицию прокрутки элемента управления ScrollView с размером его содержимого, вы можете определить, достигнут ли конец.
import {ScrollView, InteractionManager} from 'react-native';
// Inside your component
const handleScrollEnd = () => {
  const scrollViewRef = useRef(null);
  const handleScroll = () => {
    const {layoutMeasurement, contentOffset, contentSize} = scrollViewRef.current;
    const isEndReached = layoutMeasurement.height + contentOffset.y >= contentSize.height;
    if (isEndReached) {
      // End of ScrollView reached
      // Your logic here
    }
  };
  useEffect(() => {
    const task = InteractionManager.runAfterInteractions(() => {
      scrollViewRef.current.scrollToEnd();
      handleScroll();
    });
    return () => task.cancel();
  }, []);
  return (
    <ScrollView ref={scrollViewRef} onScroll={handleScroll}>
      {/* Content */}
    </ScrollView>
  );
};
  1. react-native-infinite-scroll-view: Если вы предпочитаете использовать стороннюю библиотеку, вы можете рассмотреть возможность использования пакета react-native-infinite-scroll-view. Он обеспечивает обратный вызов onLoadMore, который срабатывает при достижении конца ScrollView.
import InfiniteScrollView from 'react-native-infinite-scroll-view';
// Inside your component
const handleLoadMore = () => {
  // End of ScrollView reached
  // Your logic here
};
return (
  <InfiniteScrollView
    onLoadMore={handleLoadMore}
  >
    {/* Content */}
  </InfiniteScrollView>
);