[英]React Native PanResponder
I am trying to use the PanResponder in React Native. 我正在尝试在React Native中使用PanResponder。
Very simple - I have 2 elements: 非常简单-我有2个元素:
I want to effectively be able to drag the circle across the screen. 我希望能够有效地在屏幕上拖动圆圈。 Could someone help me out?
有人可以帮我吗?
Heres is my code thus far : 到目前为止,这是我的代码:
import React from 'react';
import { Animated, Dimensions, PanResponder, StyleSheet, View } from 'react-native';
export class MySlider extends React.Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY()
};
}
_panResponder = PanResponder.create({
// Ask to be the responder:
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
this.state.pan.setValue({x: 0, y: 0});
return true
},
onPanResponderMove: (evt, gestureState) => {
Animated.event([null, {dx: this.state.pan.x, dy: this.state.pan.y}])
return true
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
return true
},
onPanResponderTerminate: (evt, gestureState) => {
return true
},
onShouldBlockNativeResponder: (evt, gestureState) => {
return true;
},
});
render() {
let { pan } = this.state;
let [translateX, translateY] = [pan.x, pan.y];
const styles = StyleSheet.create({
mover: {
transform: [{translateX:translateX}, {translateY:5}],
height: 50,
width: 50,
borderRadius: 25,
backgroundColor: 'blue'
},
holder: {
height: 100,
width: Dimensions.get('window').width,
backgroundColor: 'yellow'
}
});
return (
<View style={styles.holder}>
<Animated.View style={styles.mover} {...this._panResponder.panHandlers}/>
</View>
)
}
}
i changed your code a bit so try this 我对您的代码做了一些更改,请尝试此操作
import React,{Component} from 'react' import { PanResponder, View, Animated, StyleSheet, Dimensions } from 'react-native' export default class MySlider extends React.Component { constructor(props) { super(props); this.state = { pan: new Animated.ValueXY() }; this._panResponder = PanResponder.create({ onStartShouldSetPanResponder : () => true, onPanResponderGrant: (e, gestureState) => { this.setState({isAddNewSession:true}) }, onPanResponderMove : Animated.event([null,{ //Step 3 dx : this.state.pan.x, dy : this.state.pan.y }]), onPanResponderRelease : (e, gesture) => { this.setState({isAddNewSessionModal:true}, ) Animated.spring( this.state.pan, {toValue:{x:0,y:0}} //To default position you can delete this animated.spring() ).start(); this.setState({isAddNewSession:false}) }, }); } render() { let { pan } = this.state; let [translateX, translateY] = [pan.x, pan.y]; const styles = StyleSheet.create({ mover: { transform: [{translateX:translateX}, {translateY:translateY}], height: 50, width: 50, position:'absolute', top:0, borderRadius: 25, zIndex:20, backgroundColor: 'blue' }, holder: { height: 100, width: Dimensions.get('window').width, backgroundColor: 'yellow' } }); return ( <View style={styles.holder}> <Animated.View style={styles.mover} {...this._panResponder.panHandlers}/> </View> ) } }
let me know if its work or not... 让我知道它是否起作用...
Yes that worked. 是的,行得通。 I copied and pasted your class in place of my class and now it works.
我复制并粘贴了您的班级以代替我的班级,现在可以使用了。 I can drag it in two dimensions and when I release it goes back to where it began.
我可以在二维上拖动它,放开时可以回到开始的地方。 Thank you.
谢谢。
what is this.setState({isAddNewSession:true})
, this.setState({isAddNewSessionModal:true})
and this.setState({isAddNewSession:false})
?? 什么是
this.setState({isAddNewSession:true})
, this.setState({isAddNewSessionModal:true})
和this.setState({isAddNewSession:false})
?
Also, when I delete the Animated.Spring, I can drag and drop the circle - but when I drag it a second time, The circle begins from the original spot. 另外,当我删除Animated.Spring时,可以拖放圆-但是当我第二次拖动时,圆从原始点开始。 Any suggestions on how to pick up where I left off?
关于如何在我离开的地方接机的任何建议? I tried replacing dx and dy with moveX and moveY but it hasn't worked.
我尝试用moveX和moveY替换dx和dy,但是没有用。 I also tried to store the old value in a variable but it is complicated because it is an Animated value and a javascript object.
我还尝试将旧值存储在变量中,但是它很复杂,因为它是一个Animated值和一个javascript对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.