如何在React本机中创建拖放操作？ [英] How can I create a drag and drop action in React native?

问题描述

说我有两个视图A和B.我想有能力在触摸View A时触发dragAndDropStart事件，然后启用从A到B的拖放...向用户显示反馈（即在View A和用户手指之间显示一行）。放下（释放拖动手势）我想触发另一个dragAndDropEnd事件，这次在View B上。

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

使用手势处理程序的React本机文档有点隐隐，我没有看到任何演示他们使用的例子。

任何想法？

解决方案

  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： （e，手势）=> {
 dy（this.state.pan.y 
}]），
 onPanResponderRelease this.isDropZone（手势））{
 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}>将我放在这里< / 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}>拖动我！< / Text> 
< /Animated.View> 
< / View> 
）; 
} 
} 
} 
  

源http://moduscreate.com/animated_drag_and_drop_with_react_native/

https://github.com/crysfel/DragAndDrop

Say I have two Views, A and B. I want to have the ability to trigger a 'dragAndDropStart' event on touching View A and then enable a drag and drop from A to B... displaying feedback to the user throughout (i.e. showing a line appearing between View A and the user's finger). On drop (releasing the drag gesture) I want to trigger another 'dragAndDropEnd' event, this time on View B.

The touchStart and touchEnd handlers are too limited as they don't appear to permit handoff of the gesture from one View to another. They also don't seem to enable the in-between 'drag' state.

The React native docs on using the gesture handlers is a little cryptic and I haven't seen any examples that demonstrate their use.

Any ideas?

解决方案

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>
            );
        }
    }
}

source http://moduscreate.com/animated_drag_and_drop_with_react_native/

https://github.com/crysfel/DragAndDrop

这篇关于如何在React本机中创建拖放操作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！