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