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() {}
}