react native實現監控手勢上下拉動效果
阿新 • • 發佈：2021-05-20
react native實現監控手勢進行上下拉動效果,詳細核心程式碼如下:
程式碼：
import {PanResponder} from 'react-native';
var Dimensions = require('Dimensions');
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
class TaskfinishedPage extends Component {
constructor(props) {
super(props);
console.disableYellowBox = true;
this.state = {
silderMargin: deviceHeight-230,};
this.lastY1 = this.state.silderMargin;
}
componentWillMount () {
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt,gestureState) => {
return true;
},onMoveShouldSetPanResponder: (evt,onPanResponderGrant: (evt,gestureState) => {
this._highlight();
},onPanResponderMove: (evt,gestureState) => {
console.log(`gestureState.dx : ${gestureState.dx} gestureState.dy : ${gestureState.dy}`);
if(50<this.lastY1 + gestureState.dy&&this.lastY1 + gestureState.dy<deviceHeight-230){
this.setState({
// marginLeft1: this.lastX1 + gestureState.dx,silderMargin: this.lastY1 + gestureState.dy,});
}
},onPanResponderRelease: (evt,gestureState) => {
this._unhighlight();
this.lastY1 = this.state.silderMargin;
},onPanResponderTerminate: (evt,gestureState) => {
},});
}
//這兩個方法手觸控以及離開時觸發;
_unhighlight(){
this.setState({
sliderBackgroundcolor: 'transparent',});
}
_highlight(){
this.setState({
sliderBackgroundcolor: 'transparent',});
}
render() {
return (
<Container}>
<Header>
<Left>
<Button tran
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。