React Native PagerView如何判断用户的滑动方向（左/右）？

你的原方案存在几个明显问题：初始时prevIndex为null导致第一次滑动无法判断方向；设置layoutDirection="rtl"后，索引变化和视觉滑动方向相反，直接对比索引会判断错误；且仅靠onPageSelected只能在滑动结束后获取结果，无法实时判断。下面给出两种更可靠的解决方法：

方案一：用onPageScroll实时判断滑动方向 #

onPageScroll会在滑动过程中持续触发，通过其返回的nativeEvent中的position（当前可见页索引）和offset（滑动偏移量，范围0~1），结合布局方向可以精准判断方向，适合需要实时响应滑动动作的场景：

import React, { useRef } from 'react';
import PagerView from 'react-native-pager-view';

const YourComponent = ({ stuff }) => {
  const isRTL = useRef(true); // 对应你的layoutDirection="rtl"配置
  const lastPosition = useRef(currentPageNumber >= 1 ? 0 : 1); // 初始化最后位置为初始页

  const handlePageScroll = (event) => {
    const { position, offset } = event.nativeEvent;
    
    if (offset === 0) {
      // 滑动结束，更新最后记录的位置
      lastPosition.current = position;
      return;
    }

    let direction;
    if (isRTL.current) {
      // RTL布局下：offset增大 → 视觉上左滑；offset减小 → 视觉上右滑
      direction = offset > 0 ? 'left' : 'right';
    } else {
      // LTR布局下：offset增大 → 视觉上右滑；offset减小 → 视觉上左滑
      direction = offset > 0 ? 'right' : 'left';
    }

    // 这里可根据方向执行你的业务逻辑，比如实时更新状态
    console.log(`当前滑动方向：${direction}`);
  };

  const handlePageSelected = (event) => {
    const currentPosition = event.nativeEvent.position;
    let direction;

    if (isRTL.current) {
      // RTL布局下，当前索引 > 上一次索引 → 左滑；反之右滑
      direction = currentPosition > lastPosition.current ? 'left' : 'right';
    } else {
      // LTR布局下，当前索引 > 上一次索引 → 右滑；反之左滑
      direction = currentPosition > lastPosition.current ? 'right' : 'left';
    }

    // 处理页码边界并更新
    if (direction === 'left') {
      setCurrentPageNumber(prev => Math.min(prev + 1, 500));
    } else {
      setCurrentPageNumber(prev => Math.max(prev - 1, 0));
    }
    lastPosition.current = currentPosition;
  };

  return (
    <PagerView
      style={{ flex: 1 }}
      initialPage={currentPageNumber >= 1 ? 0 : 1}
      layoutDirection="rtl"
      onPageScroll={handlePageScroll}
      onPageSelected={handlePageSelected}
    >
      {pageComponents.map(page => page)}
    </PagerView>
  );
};

export default YourComponent;

方案二：修复原方案的索引判断逻辑（适合仅需滑动结束后判断的场景） #

如果不需要实时响应滑动，只需要在滑动结束后获取方向，可以修正原方案的两个核心问题：初始化索引为初始页、结合布局方向调整判断逻辑：

import React, { useRef, useEffect } from 'react';
import PagerView from 'react-native-pager-view';

const YourComponent = ({ stuff }) => {
  const currentIndex = useRef(null);
  const prevIndex = useRef(null);
  const isRTL = useRef(true);

  // 初始化索引为初始页面，避免第一次滑动判断失效
  useEffect(() => {
    const initialPage = currentPageNumber >= 1 ? 0 : 1;
    currentIndex.current = initialPage;
    prevIndex.current = initialPage;
  }, []);

  const handlePageSelected = (event) => {
    prevIndex.current = currentIndex.current;
    currentIndex.current = event.nativeEvent.position;

    let direction;
    if (isRTL.current) {
      // RTL布局下，当前索引大于上一次索引 → 左滑；反之右滑
      direction = currentIndex.current > prevIndex.current ? 'left' : 'right';
    } else {
      // LTR布局下，当前索引大于上一次索引 → 右滑；反之左滑
      direction = currentIndex.current > prevIndex.current ? 'right' : 'left';
    }

    // 处理页码边界并更新
    if (direction === 'left') {
      setCurrentPageNumber(prev => Math.min(prev + 1, 500));
    } else {
      setCurrentPageNumber(prev => Math.max(prev - 1, 0));
    }
  };

  return (
    <PagerView
      style={{ flex: 1 }}
      initialPage={currentPageNumber >= 1 ? 0 : 1}
      layoutDirection="rtl"
      onPageSelected={handlePageSelected}
    >
      {pageComponents.map(page => page)}
    </PagerView>
  );
};

export default YourComponent;

核心注意事项 #

• 布局方向的影响：RTL（从右到左）布局下，页面索引的变化逻辑和视觉滑动方向完全相反，必须根据布局方向修正判断逻辑
• 初始状态处理：一定要将索引初始化为初始页面的索引，避免第一次滑动时因为prevIndex为null导致判断失效
• 场景选择：需要实时响应滑动动作选方案一，仅需滑动结束后处理逻辑选方案二，后者更简洁

内容的提问来源于stack exchange，提问作者M.KH