如何在React Native中实现该拖拽问答布局？

针对你需要的左侧可拖拽选项、右侧对应目标区域，拖拽完成匹配验证的问答场景，以下是几个可落地的实现方案，避开通用库的适配问题，侧重定制化效果：

方案一：基于手势库原生实现（最高定制性） #

用react-native-gesture-handler处理拖拽手势，react-native-reanimated实现流畅动画，完全自定义拖拽逻辑：

步骤1：安装依赖 #

npm install react-native-gesture-handler react-native-reanimated
# iOS需额外执行
cd ios && pod install

（安卓需在settings.gradle和MainActivity.java中配置手势库，具体参考官方文档）

步骤2：核心代码示例 #

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

const DragItem = ({ item, targetArea }) => {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);
  const [isMatched, setIsMatched] = useState(false);

  const panGesture = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.startX = translateX.value;
      ctx.startY = translateY.value;
    },
    onActive: (event, ctx) => {
      translateX.value = ctx.startX + event.translationX;
      translateY.value = ctx.startY + event.translationY;
    },
    onEnd: (event) => {
      // 判断是否落入目标区域
      const isInTarget = 
        translateX.value + 100 > targetArea.x &&
        translateX.value < targetArea.x + targetArea.width &&
        translateY.value + 50 > targetArea.y &&
        translateY.value < targetArea.y + targetArea.height;

      if (isInTarget) {
        setIsMatched(true);
        translateX.value = withSpring(targetArea.x);
        translateY.value = withSpring(targetArea.y);
      } else {
        // 未命中则复位
        translateX.value = withSpring(0);
        translateY.value = withSpring(0);
      }
    },
  });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }, { translateY: translateY.value }],
    opacity: isMatched ? 0.8 : 1,
  }));

  return (
    <PanGestureHandler onGestureEvent={panGesture}>
      <Animated.View style={[styles.dragItem, animatedStyle]}>
        <Text>{item.text}</Text>
      </Animated.View>
    </PanGestureHandler>
  );
};

const TargetArea = ({ areaRef, label }) => {
  return (
    <View ref={areaRef} style={styles.targetArea}>
      <Text>{label}</Text>
    </View>
  );
};

// 使用示例
const DragQAScreen = () => {
  const targetRef = React.useRef(null);
  const [targetArea, setTargetArea] = useState({ x: 0, y: 0, width: 0, height: 0 });

  React.useEffect(() => {
    targetRef.current?.measure((x, y, width, height) => {
      setTargetArea({ x, y, width, height });
    });
  }, []);

  return (
    <View style={styles.container}>
      <View style={styles.leftContainer}>
        <DragItem item={{ text: '选项A' }} targetArea={targetArea} />
        <DragItem item={{ text: '选项B' }} targetArea={targetArea} />
      </View>
      <View style={styles.rightContainer}>
        <TargetArea areaRef={targetRef} label="目标区域1" />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, flexDirection: 'row', padding: 20 },
  leftContainer: { flex: 1, gap: 10 },
  rightContainer: { flex: 1, gap: 10 },
  dragItem: { padding: 15, backgroundColor: '#e0e0e0', borderRadius: 8 },
  targetArea: { padding: 15, backgroundColor: '#ffe0e0', borderRadius: 8, borderWidth: 2, borderColor: '#ff6b6b' },
});

export default DragQAScreen;

关键优化点 #

• 拖拽时添加缩放动画增强反馈：在animatedStyle中加入scale: isDragging ? 1.05 : 1（需新增isDragging共享值）
• 批量管理多个目标区域的坐标，用数组存储所有目标的位置信息
• 匹配成功后锁定元素，禁止再次拖拽

方案二：基于react-native-draggable-flatlist快速实现 #

如果需要拖拽列表+目标区域匹配，这个库封装了拖拽列表的核心逻辑，只需监听拖拽结束事件：

步骤1：安装依赖 #

npm install react-native-draggable-flatlist

核心代码示例 #

import React, { useState, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import DraggableFlatList, { RenderItemParams } from 'react-native-draggable-flatlist';

const DragQAScreen = () => {
  const [data, setData] = useState([
    { key: '1', text: '选项1', matched: false },
    { key: '2', text: '选项2', matched: false },
  ]);
  const targetRef = useRef(null);
  const [targetArea, setTargetArea] = useState({ x: 0, y: 0, width: 0, height: 0 });

  React.useEffect(() => {
    targetRef.current?.measure((x, y, width, height) => {
      setTargetArea({ x, y, width, height });
    });
  }, []);

  const renderItem = ({ item, drag, isActive }: RenderItemParams<any>) => (
    <View 
      style={[styles.dragItem, isActive && styles.draggingItem, item.matched && styles.matchedItem]}
      onLongPress={drag}
    >
      <Text>{item.text}</Text>
    </View>
  );

  const onDragEnd = ({ data: newData, dragItem }) => {
    // 获取拖拽元素的位置（需结合手势库或原生measure）
    // 简化判断：假设拖拽结束时的位置落入目标区域
    const isMatched = true; // 替换为实际命中判断逻辑
    if (isMatched) {
      const updatedData = newData.map(item => 
        item.key === dragItem.key ? {...item, matched: true} : item
      );
      setData(updatedData);
    }
  };

  return (
    <View style={styles.container}>
      <DraggableFlatList
        data={data}
        renderItem={renderItem}
        onDragEnd={onDragEnd}
        keyExtractor={(item) => item.key}
        style={styles.leftContainer}
      />
      <View style={styles.rightContainer}>
        <View ref={targetRef} style={styles.targetArea}>
          <Text>目标区域</Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, flexDirection: 'row', padding: 20 },
  leftContainer: { flex: 1 },
  rightContainer: { flex: 1, justifyContent: 'center' },
  dragItem: { padding: 15, backgroundColor: '#e0e0e0', borderRadius: 8, marginVertical: 5 },
  draggingItem: { backgroundColor: '#c0c0c0', scale: 1.05 },
  matchedItem: { backgroundColor: '#c8e6c9', opacity: 0.8 },
  targetArea: { padding: 20, backgroundColor: '#ffebee', borderRadius: 8, borderWidth: 2, borderColor: '#ef5350' },
});

export default DragQAScreen;

方案三：轻量库react-native-draggable快速原型 #

适合简单场景，无需复杂手势逻辑：

npm install react-native-draggable

核心逻辑是监听onRelease事件，判断元素位置是否在目标区域内，更新匹配状态。

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