当前位置：首页 > React

react native实现拖动

2026-01-27 05:31:57React

React Native 实现拖动功能

使用 PanResponder

React Native 提供了 PanResponder API 来处理触摸事件，适合实现拖动功能。以下是一个基本实现示例：

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

const DraggableComponent = () => {
  const pan = useRef(new Animated.ValueXY()).current;

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event(
        [null, { dx: pan.x, dy: pan.y }],
        { useNativeDriver: false }
      ),
      onPanResponderRelease: () => {
        pan.extractOffset();
      }
    })
  ).current;

  return (
    <Animated.View
      style={{
        transform: [{ translateX: pan.x }, { translateY: pan.y }]
      }}
      {...panResponder.panHandlers}
    >
      {/* 可拖动的内容 */}
    </Animated.View>
  );
};

使用 react-native-gesture-handler

react-native-gesture-handler 库提供了更强大的手势处理能力，性能更好：

react native实现拖动

import React from 'react';
import { View } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';
import Animated, {
  useAnimatedGestureHandler,
  useSharedValue,
  useAnimatedStyle,
} from 'react-native-reanimated';

const DraggableComponent = () => {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const gestureHandler = useAnimatedGestureHandler({
    onActive: (event) => {
      translateX.value = event.translationX;
      translateY.value = event.translationY;
    },
  });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        { translateX: translateX.value },
        { translateY: translateY.value },
      ],
    };
  });

  return (
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Animated.View style={animatedStyle}>
        {/* 可拖动的内容 */}
      </Animated.View>
    </PanGestureHandler>
  );
};

边界限制

如果需要限制拖动范围，可以在手势处理函数中添加边界检查：

react native实现拖动

onPanResponderMove: (_, gestureState) => {
  const { dx, dy } = gestureState;
  const maxX = 100; // 最大X偏移
  const maxY = 100; // 最大Y偏移

  pan.x.setValue(Math.min(Math.max(dx, -maxX), maxX));
  pan.y.setValue(Math.min(Math.max(dy, -maxY), maxY));
}

拖拽排序实现

对于列表拖拽排序，可以使用 react-native-draggable-flatlist 库：

import DraggableFlatList from 'react-native-draggable-flatlist';

const data = [{ key: '1', label: 'Item 1' }, ...];

const DraggableList = () => {
  const [items, setItems] = React.useState(data);

  return (
    <DraggableFlatList
      data={items}
      renderItem={({ item, drag }) => (
        <TouchableOpacity onLongPress={drag}>
          <Text>{item.label}</Text>
        </TouchableOpacity>
      )}
      keyExtractor={(item) => item.key}
      onDragEnd={({ data }) => setItems(data)}
    />
  );
};