react native 拖动 小球 边界控制

PanResponder 类可以将多点触摸操作协调成一个手势。它使得一个单点触摸可以接受更多的触摸操作，也可以用于识别简单的多点触摸手势。官方地址：https://reactnative.cn/docs/0…
import React, {Component} from “react”;
import {View, Text, TouchableOpacity, TouchableWithoutFeedback, Dimensions, PanResponder} from “react-native”;
var pickerWidth = Dimensions.get(“window”).width – 20;
var pickerHeight = 200;
export default class PickerPage extends Component {
constructor(props) {
super(props);
this.state = {
left: -15,
top: -15
}
}
componentWillMount() {
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onMoveShouldSetResponderCapture: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderGrant: (e, gestureState) => {
this.touchX = this.state.left;
this.touchY = this.state.top;
},
onPanResponderMove: (e, g) => {
let left = this.touchX + g.dx;
let top = this.touchY + g.dy;
console.log(left, top);
if(left >= (pickerWidth – 15)) {
left = (pickerWidth – 15);
}
if(left <= -15) {
left = -15
}
if(top <= -15) {
top = -15;
}
if(top >= 185) {
top = 185
}

this.setState({
left: left,
top: top
})
},
onPanResponderRelease: (e, g) => {
this.touchX = this.state.left;
this.touchY = this.state.top;
}
});
}
render() {
return (
<View>
<View style={{width: pickerWidth, height: pickerHeight, backgroundColor: “#468dcc”, position: “relative”, overflow: “hidden”}}>
<View style={{
width: 30,
height: 30,
borderWidth: 4,
borderColor: “#000000”,
borderRadius: 30,
position: “absolute”,
left: this.state.left,
top: this.state.top,
zIndex: 2,
// transform: [
// {translateX: this.state.left},
// {translateY: this.state.top}
// ]
}} {…this._panResponder.panHandlers}></View>
</View>
</View>
)
}
componentDidMount() {}
componentWillUnmount() {}
}