如何实现，React Native Drag-n-Drop答案

【问题标题】：How to implement, React Native Drag-n-Drop如何实现，React Native Drag-n-Drop
【发布时间】：2018-01-25 12:49:44
【问题描述】：

我想实现 react-native 拖放，以在 drop 上交换组件。假设一旦我拖动屏幕上有五个组件，它应该突出显示可放置元素。并且一旦它被丢弃，组件应该被交换。

【问题讨论】：

标签： react-native

【解决方案1】：

为了实现拖放，您需要使用平移响应器。首先，您需要定义在对象移动时将值存储在哪里，您可以在状态上设置一个属性。

state = {
    pan: new Animated.ValueXY(),
};

然后您必须在componentWillMount 中创建平移响应器，例如：

this.panResponder = PanResponder.create({
    onStartShouldSetPanResponder : () => true,
    onPanResponderMove           : Animated.event([null,{ // <--- When moving
        dx : this.state.pan.x,
        dy : this.state.pan.y
    }]),
    onPanResponderRelease        : (e, gesture) => {} // <--- callback when dropped
});

最后需要在 render 方法中设置动画元素的 left 和 top。

<Animated.View 
    {...this.panResponder.panHandlers}  
     style={[this.state.pan.getLayout(), styles.circle]}>  
      <Text style={styles.text}>Drag me!</Text>
</Animated.View>

this.state.pan.getLayout() 返回顶部和左侧，您需要它来移动元素。

为了交换你需要实现onPanResponderRelease的元素。

更详细的步骤你可以看看这个教程：https://moduscreate.com/blog/animated_drag_and_drop_with_react_native

【讨论】：

我试过这个，但我想拖放圆圈并交换它们和它们的值。
那么你所要做的就是在放置元素时创建一个动画;)