[深入剖析React Native]手势响应讲解
手势识别在移动设备上比在网络上要复杂得多。当应用程序确定用户的意图时,一个触摸可能要经历几个阶段。 最佳实践用户在 web app与native app的可用性上可以感觉到巨大的差异,并且这是最大的原因之一。每一个动作都应该有以下属性:
TouchableHighlight 和 Touchable*应答系统在使用时可能是复杂的。所以我们为应该“可以轻击的”东西提供了一个抽象的 Touchable 实现。这使用了应答系统,并且使你以声明的方式可以轻松地识别轻击交互。在网络中任何你会用到按钮或链接的地方使用 TouchableHighlight。 响应器生命周期通过实施正确的处理方法,视图可以成为接触响应器。有两种方法来询问视图是否想成为响应器: 捕捉 ShouldSet 处理程序在冒泡模式,即最深的节点最先被调用的情况下,onStartShouldSetResponder 和 onMoveShouldSetResponder 被调用。这意味着,当多个视图为 * ShouldSetResponder 处理程序返回 true 时,最深的组件会成为响应器。在大多数情况下,这是可取的,因为它确保了所有控件和按钮是可用的。 PanResponder全景响应器PanResponder 将几个触发调节成一个单一的触发动作。该方法可以使单一触发动作对额外的触发具有弹性,可以用来识别简单的多点触发动作。 基本用法componentWillMount: function() {
this._panResponder = PanResponder.create({
// Ask to be the responder:
onStartShouldSetPanResponder: (evt,gestureState) => true,onStartShouldSetPanResponderCapture: (evt,onMoveShouldSetPanResponder: (evt,onMoveShouldSetPanResponderCapture: (evt,onPanResponderGrant: (evt,gestureState) => {
// The guesture has started. Show visual feedback so the user knows
// what is happening!
// gestureState.{x,y}0 will be set to zero now
},onPanResponderMove: (evt,gestureState) => {
// The most recent move distance is gestureState.move{X,Y}
// The accumulated gesture distance since becoming responder is
// gestureState.d{x,y}
},onPanResponderTerminationRequest: (evt,onPanResponderRelease: (evt,gestureState) => {
// The user has released all touches while this view is the
// responder. This typically means a gesture has succeeded
},onPanResponderTerminate: (evt,gestureState) => {
// Another component has become the responder,so this gesture
// should be cancelled
},onShouldBlockNativeResponder: (evt,gestureState) => {
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
},});
},render: function() {
return (
<View {...this._panResponder.panHandlers} />
);
},
方法:
实例: 'use strict';
import React,{ Component } from 'react';
import {
PanResponder,StyleSheet,View,Text,processColor,} from 'react-native';
var CIRCLE_SIZE = 80;
export default class PanResponderMazouri extends Component {
constructor(props) {
super(props);
this._handleStartShouldSetPanResponder = this._handleStartShouldSetPanResponder.bind(this);
this._handleMoveShouldSetPanResponder = this._handleMoveShouldSetPanResponder.bind(this);
this._handlePanResponderGrant = this._handlePanResponderGrant.bind(this);
this._handlePanResponderMove = this._handlePanResponderMove.bind(this);
this._handlePanResponderEnd = this._handlePanResponderEnd.bind(this);
this._handlePanResponderEnd = this._handlePanResponderEnd.bind(this);
this._highlight = this._highlight.bind(this);
this.state = {
_panResponder: {},_previousLeft: 0,_previousTop: 0,backgroundColor: 'green',}
}
componentWillMount() {
console.log("MAZOURI_LOG componentDidMount");
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,onPanResponderGrant: this._handlePanResponderGrant,onPanResponderMove: this._handlePanResponderMove,onPanResponderRelease: this._handlePanResponderEnd,onPanResponderTerminate: this._handlePanResponderEnd,});
this.setState({
_previousLeft: 20,_previousTop: 84,left: 20,top: 84,});
}
componentDidMount() {
console.log("MAZOURI_LOG componentDidMount");
}
render() {
console.log("MAZOURI_LOG left:"+ this.state.left + "top:" + this.state.top + "backgroundColor:" + this.state.backgroundColor);
return (
<View style={styles.container}>
<View
ref={circle => this.circle = circle}
style={[styles.circle,{left: this.state.left,top: this.state.top,backgroundColor: this.state.backgroundColor}]}
{...this._panResponder.panHandlers}
/>
</View>
);
}
_handleStartShouldSetPanResponder(e,gestureState) {
console.log("MAZOURI_LOG _handleStartShouldSetPanResponder");
return true;
}
_handleMoveShouldSetPanResponder(e,gestureState) {
console.log("MAZOURI_LOG _handleMoveShouldSetPanResponder");
return true;
}
_handlePanResponderGrant(e,gestureState) {
console.log("MAZOURI_LOG _handlePanResponderGrant");
this._highlight;
}
_handlePanResponderMove(e,gestureState) {
console.log("MAZOURI_LOG _handlePanResponderMove");
var _left = this.state._previousLeft + gestureState.dx;
var _top = this.state._previousTop + gestureState.dy;
this.setState({
left: _left,top: _top,});
}
_handlePanResponderEnd(e,gestureState) {
console.log("MAZOURI_LOG _handlePanResponderEnd");
this._unHighlight;
var _previousLeft = this.state._previousLeft + gestureState.dx;
var _previousTop = this.state._previousTop + gestureState.dy;
this.setState({
_previousLeft: _previousLeft,_previousTop: _previousTop,});
}
_highlight() {
this.setState({
backgroundColor: 'blue',});
}
_unHighlight() {
this.setState({
backgroundColor: 'green',});
}
}
var styles = StyleSheet.create({
circle: {
width: CIRCLE_SIZE,height: CIRCLE_SIZE,borderRadius: CIRCLE_SIZE / 2,position: 'absolute',left: 0,top: 0,},container: {
flex: 1,paddingTop: 64,});
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |