gpt4 book ai didi

ios - 如何在 React Native 中创建拖放操作?

转载 作者:IT王子 更新时间:2023-10-29 07:56:20 28 4
gpt4 key购买 nike

假设我有两个 View ,A 和 B。我希望能够在触摸 View A 时触发“dragAndDropStart”事件,然后启用从 A 到 B 的拖放...始终向用户显示反馈(即显示 View A 和用户手指之间出现的一条线)。在放下(释放拖动手势)时,我想触发另一个“dragAndDropEnd”事件,这次是在 View B 上。

enter image description here

touchStart 和 touchEnd 处理程序非常有限,因为它们似乎不允许将手势从一个 View 切换到另一个 View 。它们似乎也没有启用中间的“拖动”状态。

关于使用手势处理程序的 React native 文档有点含糊不清,我还没有看到任何示例来演示它们的用法。

有什么想法吗?

最佳答案

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

来源https://moduscreate.com/blog/drag-and-drop-react-native/

https://github.com/crysfel/DragAndDrop

关于ios - 如何在 React Native 中创建拖放操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30153285/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com