React Native拖拽View时出现卡顿闪烁问题，求解决方案

问题根源 #

你的代码存在几个核心问题导致卡顿和坐标异常：

1. 使用locationX/locationY作为坐标基准：这两个值是相对于父View的局部坐标，当拖拽View移动后，后续触摸事件的坐标会出现偏移，导致View位置跳动。
2. 直接调用setValue更新动画值：此操作依赖JS线程处理，触摸移动时会频繁触发JS线程计算，容易造成阻塞。
3. 未记录触摸点与View的偏移量：拖拽开始时没有保存手指相对于View的位置，导致View直接跳到触摸点，而非跟随手指移动。
4. 使用left/top定位：这类样式属性不支持Animated原生驱动，性能远低于transform。

修复方案 #

以下是优化后的代码，解决了上述所有问题：

import React, { useRef } from 'react';
import { Animated, View } from 'react-native';

const CURSOR_SIDE_SIZE = 20;
const CURSOR_HALF_SIDE_SIZE = CURSOR_SIDE_SIZE / 2;

export default () => {
  // 记录View的偏移量（代替left/top）
  const position = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
  // 保存拖拽开始时的触摸偏移（手指相对于View左上角的距离）
  const touchOffset = useRef({ x: 0, y: 0 });

  return (
    <View 
      style={{ flex: 1 }}
      onStartShouldSetResponder={() => true}
      // 拖拽开始：记录初始位置和触摸偏移
      onResponderGrant={(e) => {
        const { pageX, pageY } = e.nativeEvent;
        // 获取当前View的位置（从动画值中提取）
        const currentX = position.x._value;
        const currentY = position.y._value;
        // 计算手指相对于View左上角的偏移
        touchOffset.current = {
          x: pageX - currentX - CURSOR_HALF_SIDE_SIZE,
          y: pageY - currentY - CURSOR_HALF_SIDE_SIZE,
        };
      }}
      // 使用Animated.event直接绑定事件，启用原生驱动（transform支持原生驱动）
      onResponderMove={Animated.event(
        [
          {
            nativeEvent: { pageX: true, pageY: true },
          },
        ],
        {
          useNativeDriver: true,
          listener: (e) => {
            const { pageX, pageY } = e.nativeEvent;
            // 根据页面坐标和触摸偏移计算新位置
            position.setValue({
              x: pageX - touchOffset.current.x - CURSOR_HALF_SIDE_SIZE,
              y: pageY - touchOffset.current.y - CURSOR_HALF_SIDE_SIZE,
            });
          },
        }
      )}
    >
      <Animated.View
        style={{
          position: 'absolute',
          height: CURSOR_SIDE_SIZE,
          width: CURSOR_SIDE_SIZE,
          borderRadius: CURSOR_HALF_SIDE_SIZE,
          backgroundColor: 'orange',
          // 使用transform代替left/top，支持原生驱动
          transform: [
            { translateX: position.x },
            { translateY: position.y },
          ],
        }}
      />
    </View>
  );
};

关键优化说明 #

• 改用pageX/pageY：基于页面全局坐标计算，避免父View局部坐标带来的偏移问题。
• 记录触摸偏移量：拖拽开始时保存手指与View的相对位置，确保View始终跟随手指移动，不会跳动。
• 使用Animated.event+原生驱动：将触摸事件的处理移至原生层，减少JS线程的压力，彻底解决卡顿闪烁。
• 用transform定位：translateX/translateY支持Animated原生驱动，性能远优于left/top。

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