react-native - 如何实现，React Native Drag-n-Drop

Question

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

Answer 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