如何在 React Native 中创建拖放操作？

Posted 2023-05-08

【中文标题】如何在 React Native 中创建拖放操作？

【英文标题】：How can I create a drag and drop action in React native?

【发布时间】：2015-07-21 02:36:01

【问题描述】：

假设我有两个视图，A 和 B。我希望能够在触摸视图 A 时触发“dragAndDropStart”事件，然后启用从 A 到 B 的拖放...在整个过程中向用户显示反馈（即显示出现在视图 A 和用户手指之间的一条线）。在放置时（释放拖动手势）我想触发另一个“dragAndDropEnd”事件，这次是在视图 B 上。

touchStart 和 touchEnd 处理程序过于有限，因为它们似乎不允许将手势从一个视图切换到另一个视图。它们似乎也没有启用中间“拖动”状态。

关于使用手势处理程序的 React 本机文档有点神秘，我还没有看到任何示例来演示它们的使用。

有什么想法吗？

【问题讨论】：

我不知道你是否专门为这篇文章制作了这张图表，但它很棒。

谢谢 Josh，图表是我比代码更喜欢的东西！

有你在身边会很有用！

【参考方案1】：

export default class Viewport extends Component
    constructor(props)
        super(props);

        this.state = 
            showDraggable   : true,
            dropZoneValues  : null,
            pan             : new Animated.ValueXY()
        ;

        this.panResponder = PanResponder.create(
            onStartShouldSetPanResponder    : () => true,
            onPanResponderMove              : Animated.event([null,
                dx  : this.state.pan.x,
                dy  : this.state.pan.y
            ]),
            onPanResponderRelease           : (e, gesture) => 
                if(this.isDropZone(gesture))
                    this.setState(
                        showDraggable : false
                    );
                else
                    Animated.spring(
                        this.state.pan,
                        toValue:x:0,y:0
                    ).start();
                
            
        );
    

    isDropZone(gesture)
        var dz = this.state.dropZoneValues;
        return gesture.moveY > dz.y && gesture.moveY < dz.y + dz.height;
    

    setDropZoneValues(event)
        this.setState(
            dropZoneValues : event.nativeEvent.layout
        );
    

    render()
        return (
            <View style=styles.mainContainer>
                <View 
                    onLayout=this.setDropZoneValues.bind(this)
                    style=styles.dropZone>
                    <Text style=styles.text>Drop me here!</Text>
                </View>

                this.renderDraggable()
            </View>
        );
    

    renderDraggable()
        if(this.state.showDraggable)
            return (
                <View style=styles.draggableContainer>
                    <Animated.View 
                        ...this.panResponder.panHandlers
                        style=[this.state.pan.getLayout(), styles.circle]>
                        <Text style=styles.text>Drag me!</Text>
                    </Animated.View>
                </View>
            );
        
    

来源http://moduscreate.com/animated_drag_and_drop_with_react_native/

https://github.com/crysfel/DragAndDrop

【讨论】：

这看起来很有希望，我在尝试将其更新到最新的 React Native 版本时破坏了我的代码，但是一旦我可以再次测试，我会确认这个解决方案，谢谢

好的，我已经验证了您链接到的代码，我很高兴地说拖放可以工作。谢谢

谁能解释一下<View ...this.abc/> 的广义含义？

阅读facebook.github.io/react/docs/…这也是问错地方了。

【参考方案2】：

你必须看到当前的视图矩形到另一个视图矩形如果你的一个视图矩形在某个点彼此相交它将返回 true 然后你会收到通知 A 视图被拖到 B 视图这里是我的示例代码可能会不会对你有帮助。

-(void)moveViewWithGestureRecognizer:(UIPanGestureRecognizer *)panGestureRecognizer

// your current View touch location suppose View A
    CGPoint touchLocation = [panGestureRecognizer locationInView:self.contentView];

    CGRect movingAViewRect = CGRectMake(touchLocation.x, touchLocation.y, self.aView.width, self.aView.height);

 //   NSLog(@"Point not Matched first => %@  and second => %@",NSStringFromCGPoint(touchLocation),NSStringFromCGPoint(self.bView.frame.origins));
    self.aView.center = touchLocation;
      

    if(panGestureRecognizer.state == UIGestureRecognizerStateEnded)
    
        //All fingers are lifted.
      
    

        if(CGRectIntersectsRect(movingAViewRect,self.bView.frame))
     
            NSLog(@"Point Matched first => %@  and second => %@",NSStringFromCGRect(movingAViewRect),NSStringFromCGRect (self.bView.frame ));

       // and here you can perform some action for this 
            
            
        else
        
            NSLog(@"aView is not drag on bView please drag aView to bView ");
            

        
      
        
     
       
    

  

【讨论】：

是的，如果您需要 xcode 项目示例，请尝试，我也会为您提供链接

这不是原生反应