React-Native多PanPinchView显示异常及自定义手势组件问题求助

多个PanPinchView仅显示第一个的修复 #

你的代码中每个PanPinchView的containerDimensions都设置为全屏宽高，若组件默认采用绝对定位，后续组件会被第一个完全覆盖。可通过以下方式修复：

• 给父容器添加flex: 1并设置flexDirection（如row/column），让组件按布局排列而非重叠
• 调整每个PanPinchView的containerDimensions，避免统一使用全屏尺寸，或给组件添加position: relative并设置margin/top/left等偏移

示例父容器修改：

<View style={{ flex: 1, flexDirection: 'column', gap: 20 }}>
  {views.map((viewobj) => {
    // 原PanPinchView渲染逻辑
  })}
</View>

获取PanPinchView的位置 #

react-native-pan-pinch-view库支持通过两种方式获取位置：

• 使用onTransformChange回调：该回调会返回当前的translateX、translateY、scale等变换参数，直接从中提取位置信息
• 通过ref获取状态：若库支持ref，可通过ref调用内部方法获取变换状态

const panPinchRef = useRef(null);

// 获取位置的方法
const getCurrentPosition = () => {
  const { translateX, translateY } = panPinchRef.current.getTransformState();
  console.log('当前位置：', translateX, translateY);
};

// 组件引用
<PanPinchView ref={panPinchRef} {...otherProps} />

• react-native-gesture-handler + react-native-reanimated：官方生态组合，支持Pan、Pinch、Rotation手势的同时触发与自定义逻辑，灵活性最高，可通过Gesture.Simultaneous()组合多个手势
• react-native-transformable-image：轻量库，专注于图片的拖拽、缩放、旋转，适合仅需处理图片的场景
• react-native-zoom-view：支持视图的拖拽与缩放，可扩展旋转功能
• 自定义封装：基于上述官方库自行组合手势，完全适配业务定制需求

你的组件存在两个核心问题：

1. 用useState存储Animated.ValueXY错误：Animated.ValueXY需用useRef存储，useState会在每次更新时创建新实例，导致panResponder绑定的是旧的动画值，手势事件无法同步
2. 拖拽偏移量未累加：onPanResponderEnd中直接设置gestureState.dx/dy是单次手势的相对偏移，而非累计绝对位置，下次拖拽会重置位置

修复后的完整代码：

import React, { useState, useRef } from 'react';
import { View, Text, StyleSheet, Animated, PanResponder, TouchableOpacity, Dimensions } from 'react-native';
import { PinchGestureHandler, PinchGestureHandlerGestureEvent } from 'react-native-gesture-handler';

const { width, height } = Dimensions.get('window');

export const RotatableResizable = () => {
  const [scale, setScale] = useState(1);
  const [angle, setAngle] = useState(0);
  // 用useRef存储动画值，避免重渲染丢失引用
  const pan = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
  // 存储累计偏移量
  const offset = useRef({ x: 0, y: 0 }).current;
  const [lastScale, setLastScale] = useState(1);

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event(
        [null, { dx: pan.x, dy: pan.y }],
        { useNativeDriver: false }
      ),
      onPanResponderEnd: (evt, gestureState) => {
        // 累加偏移量
        offset.x += gestureState.dx;
        offset.y += gestureState.dy;
        // 重置动画值，确保下次拖拽从当前位置开始计算相对偏移
        pan.setValue({ x: 0, y: 0 });
      },
      onStartShouldSetPanResponder: () => true,
      onStartShouldSetPanResponderCapture: () => true,
      onMoveShouldSetPanResponderCapture: () => true,
    })
  ).current;

  const handlePinchGestureEvent = (event: PinchGestureHandlerGestureEvent) => {
    const { scale: pinchScale } = event.nativeEvent;
    setScale(lastScale * pinchScale);
  };

  const handlePinchStateChange = (event: any) => {
    if (event.nativeEvent.oldState === 4) {
      setLastScale(scale);
    }
  };

  const rotate = () => {
    setAngle(prev => prev + 45);
  };

  return (
    <View style={styles.container}>
      <PinchGestureHandler onGestureEvent={handlePinchGestureEvent} onHandlerStateChange={handlePinchStateChange}>
        <Animated.View
          style={[
            styles.box,
            {
              transform: [
                // 累加偏移量与当前手势偏移
                { translateX: Animated.add(offset.x, pan.x) },
                { translateY: Animated.add(offset.y, pan.y) },
                { rotate: `${angle}deg` },
                { scale: scale },
              ],
            },
          ]}
          {...panResponder.panHandlers}
        >
          <Text style={styles.text}>Drag me</Text>
          <TouchableOpacity style={styles.button} onPress={rotate}>
            <Text style={styles.buttonText}>Rotate</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button} onPress={() => setScale(prev => prev * 2)}>
            <Text style={styles.buttonText}>Double size</Text>
          </TouchableOpacity>
        </Animated.View>
      </PinchGestureHandler>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: '#eee',
    justifyContent: 'center',
    alignItems: 'center',
    gap: 10,
  },
  text: {
    fontSize: 16,
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 8,
    borderRadius: 4,
  },
  buttonText: {
    color: 'white',
    fontSize: 14,
  },
});

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