Question

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

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

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

1 个答案: