react-native-video-controls嵌入ScrollView时seek异常及手势穿透求解

方案1：全量拦截播放器区域手势，阻止向父级传播 #

如果不需要在播放器区域触发ScrollView的滚动，直接通过RN的响应者API抢占手势响应权即可，不需要修改播放器源码：

• 在播放器外层包裹一层View容器
• 给容器配置onStartShouldSetResponder和onMoveShouldSetResponder回调，固定返回true，让容器在手势开始、滑动全程都持有响应权，事件不会透传给父级ScrollView
  代码示例：

import VideoPlayer from 'react-native-video-controls';
import { View } from 'react-native';

// 组件内渲染部分
<View
  onStartShouldSetResponder={() => true}
  onMoveShouldSetResponder={() => true}
>
  <VideoPlayer
    source={{ uri: 'your_video_source' }}
    // 其余播放器业务配置
  />
</View>

该方案会完全屏蔽播放器区域内所有方向的手势透传，用户在播放器位置上下滑动不会触发页面滚动，交互逻辑最稳定。

方案2：仅拦截水平方向手势，放行垂直滑动给ScrollView #

如果需要保留用户在播放器区域上下滑动触发页面滚动的能力，只让播放器响应横向的进度拖拽、横向调节类手势，可以通过判断滑动位移方向动态决定是否拦截事件：

• 用ref记录手势按下时的初始坐标
• 滑动触发时计算横向、纵向的位移差值
• 横向位移大于纵向位移时判定为水平手势，拦截响应权交给播放器；反之放行事件给父级ScrollView
  代码示例：

import { useRef } from 'react';
import { View } from 'react-native';
import VideoPlayer from 'react-native-video-controls';

const EmbeddedVideo = () => {
  const initialTouch = useRef({ x: 0, y: 0 });

  return (
    <View
      onStartShouldSetResponder={(e) => {
        initialTouch.current = {
          x: e.nativeEvent.pageX,
          y: e.nativeEvent.pageY
        };
        return false;
      }}
      onMoveShouldSetResponder={(e) => {
        const { pageX, pageY } = e.nativeEvent;
        const deltaX = Math.abs(pageX - initialTouch.current.x);
        const deltaY = Math.abs(pageY - initialTouch.current.y);
        // 水平滑动占优时拦截，垂直滑动占优时放行
        return deltaX > deltaY;
      }}
    >
      <VideoPlayer
        source={{ uri: 'your_video_source' }}
        // 其余播放器业务配置
      />
    </View>
  );
};

export default EmbeddedVideo;

适配补充说明 #

• 若使用的react-native-video-controls版本支持responderProps属性，可直接将上述响应者回调传入该属性，无需额外包裹View容器
• 安卓端若出现拦截失效，给父级ScrollView添加nestedScrollEnabled={true}，开启原生嵌套滚动支持
• iOS端若出现进度条拖拽卡顿，可给VideoPlayer添加tapAnywhereToPause={false}配置，避免点击事件抢占滑动手势响应优先级

内容的提问来源于stack exchange，提问作者Joel Hager