React Native中GestureDetector的Pan手势阻塞ScrollView垂直滚动问题求助

问题描述 #

我自己实现了一个支持左右滑动切换的内容滑块，因为单条内容可能较长，所以嵌套了ScrollView来支持垂直滚动查看完整内容。但现在遇到了一个头疼的问题：用GestureDetector的Pan手势处理左右滑动后，ScrollView的垂直滚动完全被阻塞了，根本没法上下滑动查看长文本。我试过调换ScrollView和GestureDetector的嵌套顺序，但也没解决问题。以下是我的核心代码（省略了部分样式和无关导入）：

import { ScrollView, View, TouchableOpacity, Text, useState } from "react-native";
import DiaryTextComp from "../Reusable/DiaryText";
import { SafeAreaView } from "react-native";
import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
import { runOnJS } from "react-native-reanimated";
import Entypo from '@expo/vector-icons/Entypo';

function ViewAllSlider({ arr}) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [selectedElem, setSelectedElem] = useState(arr[0]);

  if (!arr || (Array.isArray(arr) && arr.length <= 0)) {
    return null;
  }

  function GoNext() {
    if (currentIndex < arr.length - 1) {
      const newIndex = currentIndex + 1;
      setCurrentIndex(newIndex);
      setSelectedElem(arr[newIndex]);
    }
  }

  function GoPrev() {
    if (currentIndex > 0) {
      const newIndex = currentIndex - 1;
      setCurrentIndex(newIndex);
      setSelectedElem(arr[newIndex]);
    }
  }

  const swipeGesture = Gesture.Pan().onEnd((e) => {
    if (e.translationX < 0 && currentIndex < arr.length - 1) {
      runOnJS(GoNext)();
    }
    if (e.translationX > 0 && currentIndex > 0) {
      runOnJS(GoPrev)();
    }
  });

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaView style={{ flex: 1 }}>
        <ScrollView 
          showsHorizontalScrollIndicator={false} 
          showsVerticalScrollIndicator={false}
        >
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 16 }}>
            <TouchableOpacity onPress={GoPrev}>
              <Text>
                <Entypo name="chevron-small-left" size={24} />
              </Text>
            </TouchableOpacity>
            <Text style={{ fontSize: 16 }}>
              {arr[currentIndex].userTimeCreatedAt || arr[currentIndex].createdAt}
            </Text>
            <TouchableOpacity onPress={GoNext}>
              <Text>
                <Entypo name="chevron-small-right" size={24} />
              </Text>
            </TouchableOpacity>
          </View>
          <GestureDetector gesture={swipeGesture}>
            <View style={{ paddingHorizontal: 16 }}>
              {selectedElem && (
                <DiaryTextComp 
                  showAccordion={false} 
                  item={selectedElem} 
                  index={selectedElem?.id.toString()} 
                />
              )}
            </View>
          </GestureDetector>
        </ScrollView>
      </SafeAreaView>
    </GestureHandlerRootView>
  );
}

解决方案 #

这个问题的核心是Pan手势默认会捕获所有触摸事件，不管是水平还是垂直方向，导致ScrollView无法接收到垂直滚动的手势事件。我们可以通过以下两种方案解决：

方案一：在手势初始化阶段判断滑动方向，只响应水平滑动

我们可以在Pan手势的onBegin回调中，判断触摸的初始速度方向，如果是垂直方向（纵向速度大于横向），就直接取消当前Pan手势，让ScrollView处理垂直滚动：

const swipeGesture = Gesture.Pan()
  .onBegin((e) => {
    // 初始触摸时，判断方向：垂直速度大于水平速度，说明是要滚动，取消Pan手势
    if (Math.abs(e.velocityY) > Math.abs(e.velocityX)) {
      return false; // 返回false会终止当前手势，事件会传递给ScrollView
    }
  })
  .onEnd((e) => {
    if (e.translationX < 0 && currentIndex < arr.length - 1) {
      runOnJS(GoNext)();
    }
    if (e.translationX > 0 && currentIndex > 0) {
      runOnJS(GoPrev)();
    }
  });

方案二：使用手势排除法，让ScrollView的滚动手势优先级更高

通过Gesture.exclude()方法，指定ScrollView的手势优先级高于Pan手势，这样垂直滚动事件会被ScrollView优先捕获：

function ViewAllSlider({ arr}) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [selectedElem, setSelectedElem] = useState(arr[0]);
  const scrollViewRef = useRef(null); // 给ScrollView创建ref

  // ... 其他逻辑不变

  const swipeGesture = Gesture.Pan()
    .exclude(scrollViewRef) // 让ScrollView的手势优先处理
    .onEnd((e) => {
      if (e.translationX < 0 && currentIndex < arr.length - 1) {
        runOnJS(GoNext)();
      }
      if (e.translationX > 0 && currentIndex > 0) {
        runOnJS(GoPrev)();
      }
    });

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaView style={{ flex: 1 }}>
        <ScrollView 
          ref={scrollViewRef} // 绑定ref
          showsHorizontalScrollIndicator={false} 
          showsVerticalScrollIndicator={false}
        >
          {/* 内部内容不变 */}
        </ScrollView>
      </SafeAreaView>
    </GestureHandlerRootView>
  );
}

额外优化：添加触发手势的最小偏移阈值

可以给Pan手势添加activeOffsetX，设置触发左右滑动的最小横向偏移，避免轻微的横向误触导致内容切换：

const swipeGesture = Gesture.Pan()
  .activeOffsetX([-20, 20]) // 只有横向偏移超过±20时，才触发手势
  .onBegin((e) => {
    if (Math.abs(e.velocityY) > Math.abs(e.velocityX)) {
      return false;
    }
  })
  .onEnd((e) => {
    // ... 原有逻辑
  });

原理说明 #

React Native Gesture Handler的手势系统是基于优先级调度的，Pan手势的默认优先级高于ScrollView的滚动手势。通过上述两种方式，我们要么提前过滤掉垂直方向的手势，要么让ScrollView的手势优先级更高，从而实现左右滑动和垂直滚动互不干扰的效果。

内容来源于stack exchange