React Native中ScrollView与GestureRecognizer共存实现滚动及侧滑咨询

react-native-swipe-gestures的GestureRecognizer默认会捕获所有触摸事件，包括ScrollView用于垂直滚动的事件，导致ScrollView无法正常响应滚动操作。

方案1：优化GestureRecognizer的事件判断逻辑 #

在onSwipe回调中，通过手势状态判断滑动方向，仅处理水平滑动，垂直滑动交给ScrollView响应：

修改你的onSwipe函数：

const onSwipe = (gestureName, gestureState) => {
  // 若垂直滑动距离大于水平，直接返回，不处理侧滑逻辑
  if (Math.abs(gestureState.dy) > Math.abs(gestureState.dx)) {
    return;
  }

  if (gestureName === "SWIPE_RIGHT") {
    console.log("You swiped right and are going to another screen");
  }
  if (gestureName === "SWIPE_LEFT") {
    console.log("You swiped left and are going to another screen");
  }
};

同时可以调整GestureRecognizer的配置，让手势识别更精准：

config={{
  velocityThreshold: 0.3,
  directionalOffsetThreshold: 80,
  swipeThreshold: 100, // 调整最小滑动距离，避免误触发
}}

方案2：改用React Native原生PanResponder实现侧滑 #

如果上述方案仍有问题，推荐使用React Native自带的PanResponder，它能更精细地控制事件拦截逻辑，避免与ScrollView冲突：

import React, { useRef } from "react";
import { ScrollView, Text, PanResponder, View } from "react-native";

const App = () => {
  const panResponder = useRef(
    PanResponder.create({
      // 仅当水平滑动距离大于垂直时，才响应手势
      onMoveShouldSetPanResponder: (_, gestureState) => 
        Math.abs(gestureState.dx) > Math.abs(gestureState.dy),
      
      onPanResponderRelease: (_, gestureState) => {
        const SWIPE_MIN_DISTANCE = 100;
        const SWIPE_MIN_VELOCITY = 0.3;

        if (gestureState.dx > SWIPE_MIN_DISTANCE && gestureState.vx > SWIPE_MIN_VELOCITY) {
          console.log("You swiped right and are going to another screen");
        } else if (gestureState.dx < -SWIPE_MIN_DISTANCE && gestureState.vx < -SWIPE_MIN_VELOCITY) {
          console.log("You swiped left and are going to another screen");
        }
      },
    })
  ).current;

  return (
    <View style={{ flex: 1 }} {...panResponder.panHandlers}>
      <ScrollView>
        <Text style={{ fontSize: 40 }}>
          This is a scrollable content. This is a scrollable content. This is a
          scrollable content. This is a scrollable content. This is a scrollable
          content. This is a scrollable content. This is a scrollable content.
          This is a scrollable content. This is a scrollable content. This is a
          scrollable content. This is a scrollable content. This is a scrollable
          content. This is a scrollable content. This is a scrollable content.
          This is a scrollable content. This is a scrollable content. This is a
          scrollable content. This is a scrollable content. This is a scrollable
          content. This is a scrollable content. This is a scrollable content.
          This is a scrollable content. This is a scrollable content. This is a
          scrollable content. This is a scrollable content. This is a scrollable
          content. This is a scrollable content. This is a scrollable content.
          This is a scrollable content. This is a scrollable content. This is a
          scrollable content. This is a scrollable content. This is a scrollable
          content. This is a scrollable content. This is a scrollable content.
          This is a scrollable content. This is a scrollable content. This is a
          scrollable content. This is a scrollable content. This is a scrollable
          content. This is a scrollable content. This is a scrollable content.
          This is a scrollable content. This is a scrollable content.
        </Text>
      </ScrollView>
    </View>
  );
};

export default App;

方案3：检查库版本兼容性 #

确保react-native-swipe-gestures的版本与你使用的React Native版本兼容，若版本不匹配可能导致事件冲突，尝试升级或降级库版本。

内容的提问来源于stack exchange，提问作者sahasrabhuja neuron