2021-05-20 整个屏幕触发拖动平移位置
import React, { PureComponent }from 'react';
import PropTypes from 'prop-types';
import {
View,
StyleSheet,
PanResponder,
Animated,
}from 'react-native';
import {ScreenWidth, ScreenHeight }from '../styles/sizes';
class HandTouchMoveextends PureComponent {
constructor(props) {
super(props);
//初始居中
const initWidth = (ScreenWidth - props.sliderWidth ) /2;
this.state = {
frameStart: initWidth,
frameTop:0.1 *ScreenHeight,
};
this.touchStart =8;
this.touchTop =8;
this.containerBorderHeight =0;
this.containerBounds = {
width:0,
height:ScreenHeight /1.5,
};
// eslint-disable-next-line no-underscore-dangle
this._panResponder =PanResponder.create({
onStartShouldSetPanResponder: () =>true,
onPanResponderGrant: (e, gestureState) => {
const { frameStart, frameTop } =this.state;
this.touchStart = frameStart;
this.touchTop = frameTop;
// eslint-disable-next-line react/no-unused-state
this.setState({isAddNewSession:true });
},
onPanResponderMove: (evt, gestureState) => {
const { sliderWidth, sliderHeight } =this.props;
let frameStart =0;
let frameTop =0;
frameTop =this.touchTop + gestureState.dy;
frameStart =this.touchStart + gestureState.dx;
if (frameStart <0) {
frameStart =0;
}else if (frameStart + sliderWidth >this.containerBounds.width -2) {
frameStart =this.containerBounds.width - sliderWidth -2;
}
if (frameTop <0) {
frameTop =0;
}else if (frameTop + sliderHeight >this.containerBounds.height -2 *
this.containerBorderHeight) {
frameTop =this.containerBounds.height - sliderHeight -2 *this.containerBorderHeight;
}
this.setState({ frameStart, frameTop });
},
onPanResponderRelease: (e, gesture) => {
this.setState({
// eslint-disable-next-line react/no-unused-state
isAddNewSessionModal:true,
// eslint-disable-next-line react/no-unused-state
isAddNewSession:false,
});
},
});
}
render() {
const { frameStart, frameTop } =this.state;
const { sliderHeight, sliderWidth } =this.props;
return (
style={styles.holder}
onLayout={event => {
const { layout } = event.nativeEvent;
this.containerBounds.width = layout.width;
}}
>
style={{
left: frameStart,
top: frameTop,
height: sliderHeight,
width: sliderWidth,
backgroundColor:'transparent',
}}
{...this._panResponder.panHandlers}
>
{this.props.children}
);
}
}
HandTouchMove.propTypes = {
sliderWidth: PropTypes.number,
sliderHeight: PropTypes.number,
};
HandTouchMove.defaultProps = {
sliderWidth:200,
sliderHeight:200,
};
const styles =StyleSheet.create({
holder: {
height:ScreenHeight /1.5,
width:ScreenWidth,
flexDirection:'row',
backgroundColor:'transparent',
justifyContent:'space-between',
borderRadius:6,
},
});
export default HandTouchMove;
