web-dev-qa-db-ja.com

Reactネイティブでドラッグアンドドロップアクションを作成するにはどうすればよいですか？

たとえば、AとBの2つのビューがあるとします。ビューAをタッチしたときに「dragAndDropStart」イベントをトリガーし、AからBへのドラッグアンドドロップを有効にしたいです。ビューAとユーザーの指の間に表示される線）。ドロップ時（ドラッグジェスチャーを解放）、別の 'dragAndDropEnd'イベントをトリガーします。今回はビューBです。

enter image description here

TouchStartハンドラーとtouchEndハンドラーは、1つのビューから別のビューへのジェスチャーのハンドオフを許可しないように見えるため、制限が多すぎます。また、その間の「ドラッグ」状態を有効にしないようです。

Reactジェスチャーハンドラーの使用に関するネイティブドキュメントは少し不可解であり、その使用法を示す例は見たことがありません。

何か案は？

iosdrag-and-dropgesturereact-native
26
Pete Thorne
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

16
Harry Moreno