PanResponder类可以将多点触摸操作协调成一个手势。它使得一个单点触摸可以接受更多的触摸操作,也可以用于识别简单的多点触摸手势 它提供了一个对触摸响应系统响应器的可预测的包装。对于每一个处理函数,它在原生事件之外提供了一个新的gestureState对象。
原生事件nativeEvent
- changedTouches - 在上一次事件之后,所有发生变化的触摸事件的数组集合(即上一次事件后,所有移动过的触摸点)
- identifier - 触摸点的ID
- locationX - 触摸点相对于父元素的横坐标
- locationY - 触摸点相对于父元素的纵坐标
- pageX - 触摸点相对于根元素的横坐标
- pageY - 触摸点相对于根元素的纵坐标
- target - 触摸点所在的元素ID
- timestamp - 触摸事件的时间戳,可用于移动速度的计算
- touches - 当前屏幕上的所有触摸点的集合
gestureState对象的属性
- stateID - 触摸状态的ID。在屏幕上有至少一个触摸点的情况下,这个ID会一直有效。
- moveX - 最近一次移动时的屏幕横坐标
- moveY - 最近一次移动时的屏幕纵坐标
- x0 - 当响应器产生时的屏幕坐标
- y0 - 当响应器产生时的屏幕坐标
- dx - 从触摸操作开始时的累计横向路程
- dy - 从触摸操作开始时的累计纵向路程
- vx - 当前的横向移动速度
- vy - 当前的纵向移动速度
- numberActiveTouches - 当前在屏幕上的有效触摸点的数量
首先在componentWillMount添加监视器
componentWillMount() { // 添加监视器 componentWillMount() { this._PanResponder = PanResponder.create({ onStartShouldSetPanResponder: () => true,//点击回调 onPanResponderGrant:this._onPanResponderGrant.bind(this),//滑动回调 onPanResponderMove:this._onPanResponderMove.bind(this),}); };
//event原生事件 //gestureState对象 _onPanResponderGrant(event,gestureState){ let touchPointX = gestureState.x0 let progress = touchPointX / width; console.log(touchPointX,width,progress); this.setState({progress:progress,}); }; _onPanResponderMove(event,gestureState) { let touchMoveX = gestureState.moveX let progress = touchMoveX / width; console.log(touchMoveX,progress); this.setState({progress:progress}); }
页面布局
constructor(props) { super(props); this.state = { progress: 0,_PanResponder:null } }; render() { return ( <View style={styles.containerStyle}> <ProgressViewIOS style={styles.ProgressViewStyle} progress={this.state.progress} /> <Text style={styles.textStyle}>当前百分比{Math.round(this.state.progress * 100)}%</Text> {/*由于progress比较小,所有用一个背景透明的view来响应事件*/} <View style={styles.touchViewStyle} {...this._PanResponder.panHandlers} ></View> </View> ); };
代码地址:https://github.com/roycehe/react-native-100-Demos
不要的吝啬你的赞赏和☆