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