FlashList滚动抢占Pan Gesture？iOS拖拽自动滚动手势丢失求助

场景说明 #

我用Reanimated创建了Animated Flashlist：

import Reanimated from 'react-native-reanimated' 
const AnimatedFlashlist = Reanimated.createAnimatedComponent(FlashList);

该Flashlist的renderItem包含一行5个视图，其中两个为可拖拽视图，结构如下：

<View1></View1>
<DraggableView1></DraggableView1>
<View2></View2>
<DraggableView2></DraggableView2>
<View3></View3>

Flashlist约有70个元素。每个可拖拽视图都用react-native-gesture-handler中的GestureDetector包裹：

<GestureDetector gesture={dragGesture}>
    <SomeJSX/>
</GestureDetector>

每个DraggableView都绑定了独立的Gesture.Pan()实例（包含onStart、onBegin、onEnd回调），支持单独拖拽。App已用GestureHandlerRootView全局包裹。

遇到的问题 #

• 需求：实现拖拽视图到达屏幕上下边缘时自动滚动
• 问题：自动滚动启动后，3-4次滚动后会丢失Pan Gesture，onEnd、onFinalize等回调均不触发

现有代码 #

自动滚动实现 #

const scrollFlatList = (cur: number, direction: 'up' | 'down') => {
    const offsetChange = 20;
    const newOffset = direction === 'up' ? cur - offsetChange : cur + offsetChange;
    flatListRef.current?.scrollToOffset({ offset: newOffset, animated: true });
};
const shouldAutoScroll = useDerivedValue(() => {
    const isDraggingActive = isDragging.value;
    const isAtTopEdge = dragY.value < SCROLL_THRESHOLD + 30;
    const isAtBottomEdge = dragY.value > height - SCROLL_THRESHOLD;
    return isDraggingActive && (isAtTopEdge || isAtBottomEdge);
});

useDerivedValue(() => {
    if (!shouldAutoScroll.value) {
        return;
    }

    const now = Date.now();
    if (now - lastScrollTime.value < 300) {
        return; // 防止滚动过于频繁（每300ms一次）
    }
    lastScrollTime.value = now;
    if (dragY.value > height - SCROLL_THRESHOLD) {
        scrollTarget.value = scrollOffset.value + 20;
        runOnJS(scrollFlatList)(scrollTarget.value, 'down');
    } else if (dragY.value < SCROLL_THRESHOLD + 30) {
        scrollTarget.value = scrollOffset.value - 20;
        runOnJS(scrollFlatList)(scrollTarget.value, 'up');
    }
});

拖拽手势代码 #

Gesture.Pan()
       .onStart(()=>{
          // 共享值初始化赋值
        })
       .onUpdate((event)=>{
          dragY.value = event.absoluteY
        })
       .onEnd(()=>{
          // 重置共享值
       })

环境版本 #

• "react-native-reanimated": "3.8.0"
• "react-native-gesture-handler": "2.17.1"
• 运行环境：iOS

解决方案建议 #

1. 处理手势优先级冲突
   FlashList的滚动手势可能会抢占拖拽手势，导致拖拽状态丢失。可以通过Gesture.exclusive明确让拖拽手势优先：

const dragGesture = Gesture.Pan()
  .onStart(...)
  .onUpdate(...)
  .onEnd(...);

// 确保拖拽手势优先于滚动手势
const combinedGesture = Gesture.exclusive(dragGesture, Gesture.Scroll());

或者直接给拖拽手势设置更高优先级：

const dragGesture = Gesture.Pan()
  .priority(2) // 高于默认滚动手势的优先级1
  .onStart(...)
  .onUpdate(...)
  .onEnd(...);

2. 修正自动滚动逻辑
   当前用runOnJS调用scrollToOffset可能导致线程不同步，建议直接在UI线程处理滚动偏移，同时改用相对位置判断边缘：

useDerivedValue(() => {
    if (!shouldAutoScroll.value) {
        return;
    }

    const now = Date.now();
    if (now - lastScrollTime.value < 300) {
        return;
    }
    lastScrollTime.value = now;

    // 基于拖拽视图的相对位置判断，而非绝对屏幕坐标
    const dragViewTop = dragY.value - dragViewHeight.value / 2;
    const dragViewBottom = dragY.value + dragViewHeight.value / 2;
    
    if (dragViewBottom > height - SCROLL_THRESHOLD) {
        scrollOffset.value += 20;
    } else if (dragViewTop < SCROLL_THRESHOLD) {
        scrollOffset.value -= 20;
    }
    // 直接在UI线程更新滚动偏移
    flatListRef.current?.scrollToOffset({ offset: scrollOffset.value, animated: true });
});

3. 保持拖拽状态活跃
   在自动滚动过程中，持续标记拖拽状态为活跃，避免手势被误判为结束：

Gesture.Pan()
    .onStart(()=>{
        isDragging.value = true;
        // 其他初始化操作
     })
    .onUpdate((event)=>{
        dragY.value = event.absoluteY;
        isDragging.value = true; // 持续更新拖拽状态
     })
    .onEnd(()=>{
        isDragging.value = false;
        // 重置共享值
     })
    .onFinalize(()=>{
        isDragging.value = false;
        // 最终清理操作
     })

4. 优化FlashList视图复用
   由于FlashList会复用视图，可能导致拖拽手势实例被销毁。给每个可拖拽视图添加唯一key，避免复用导致的手势丢失：

<AnimatedFlashlist
    data={data}
    keyExtractor={(item) => item.id}
    renderItem={({ item }) => (
        <View>
            <View1 />
            <DraggableView1 key={`drag-item-1-${item.id}`} />
            <View2 />
            <DraggableView2 key={`drag-item-2-${item.id}`} />
            <View3 />
        </View>
    )}
/>

内容的提问来源于stack exchange，提问作者Rohit Mondal