ReactNative之手势识别

• 原文博客地址: ReactNative之手势识别
• 移动开发中最重要的就是交互, 说到交互, 就不得不说触摸事件
• 在iOS中有单击, 双击, 长按, 拖拽等触摸操做
• 在React Native中点击手势都有其对应的组件, 每一个组件均可以用来包裹视图来响应用户的点击事件

TouchableWithoutFeedback

• 响应用户的点击事件, 点击操做时, 组件没有任何视觉反馈,看起来像Web效果而不是原生的效果Native
• 是单节点组件, 只能包含一个组件, 若是你但愿包含多个子组件，用一个View来包装它们
• 该控件除非你不得不使用，不然请不要使用该组件

属性方法

• accessibilityComponentType: View.AccessibilityComponentType
  设置可访问的组件类型

• accessibilityTraits: View.AccessibilityTraits,[View.AccessibilityTraits] 设置访问特征

• accessible: bool
  设置当前组件是否能够访问

• delayLongPress: number 设置延迟的时间，单位为毫秒。从onPressIn方法开始，到onLongPress被调用这一段时间

• delayPressIn: number 设置延迟的时间，单位为毫秒，从用户触摸控件开始到onPressIn被调用这一段时间

• delayPressOut: number
  设置延迟的时间，单位为毫秒，从用户触摸事件释放开始到onPressOut被调用这一段时间

• onLayout: function
  当组件加载或者改组件的布局发生变化的时候调用, 调用传入的参数为{nativeEvent:{layout:{x,y,width,height}}}

• onLongPress: function
  当用户长时间按压组件(长按效果)的时候调用该方法

• onPress: function 当用户点击的时候调用(触摸结束)。 可是若是事件被取消了就不会调用。(例如:当前被滑动事件所替代)

• onPressIn: function
  用户开始触摸组件回调方法

• onPressOut: function 用户完成触摸组件以后回调方法

• pressRetentionOffset: {top:number,left:number,bottom:number,right:number} 该设置当视图滚动禁用的状况下，能够定义当手指距离组件的距离; 当大于该距离该组件会失去响应;当少于该距离的时候，该组件会从新进行响应

该组件咱们通常不会直接进行使用，下面三种Touchable*系列组件对于该组件的属性方法均可以进行使用

TouchableOpacity

该组件封装了响应触摸事件。当点击按下的时候，该组件的透明度会下降。该组件使用过程当中并不会改变视图的层级关系，并且咱们能够很是容易的添加到应用而且不会产生额外的异常错误

属性方法

• TouchableWithoutFeedback的全部 属性，这边TouchableOpacity组件所有能够进行使用
• activeOpacity: number---设置当用户触摸的时候，组件的透明度(取值0-1)

TouchableHighlight

当手指点击按下的时候，该视图的不透明度会进行下降同时会看到相应的颜色(视图变暗或者变亮)。若是咱们去查看该组件的源代码会发现，该底层实现是添加了一个新的视图

属性方法

• 全部TouchableWithoutFeedback的属性
• activeOpacity: number---该用来设置视图在进行触摸的时候，要要显示的不透明度(一般在0-1之间)
• onHideUnderlay: function---当底层被隐藏的时候调用
• onShowUnderlay: function---当底层显示的时候调用
• underlayColor: 当触摸或者点击控件的时候显示出的颜色

TouchableNativeFeedback

• 仅限Android平台
• 在Android设备上，这个组件利用原生状态来渲染触摸的反馈
• 目前它只支持一个单独的View实例做为子节点

属性方法

• 全部TouchableWithoutFeedback的属性
• background: 决定在触摸反馈的时候显示什么类型的背景

PanResponder

相关介绍

PanResponder类能够将多点触摸操做协调成一个手势。它使得一个单点触摸能够接受更多的触摸操做，也能够用于识别简单的多点触摸手势

手势处理

React Native框架底层的手势响应系统提供了响应处理器，PanResponder将这些手势响应处理器再次进行封装，以便开发者更容易对手势进行处理，更容易预测用户的手势，对每个手势响应处理器，PanResponder除了为其提供表明触摸行为的原生事件外，还提供了一个新的手势状态对象用来详细描述手势的状态

基本思想是：

监视屏幕上指定大小、位置的矩形区域，当用手指按压这个区域中的某点后，开发者会收到这个事件，当按压后拖动手指时，会收到手势引起的各种事件，当手指离开这个矩形区域时，开发者也会收到相应的事件

注意事项：

• 开发者能够任意指定监视矩形区域的大小，但在这个区域里，只有第一个按下的事件会上报和继续监视处理，若是第一个手指按下尚未离开，接着第二个手指又来按下了，那么对第二个手指的各类触摸事件没法捕获
• 开发者能够在屏幕上指定多个监视矩形区域，可是不能同时监视多个矩形区域的不一样触摸事件
• 监视区域会阻止被监视区域覆盖的组件接收触摸事件，好比监视区域覆盖了一个按钮，那么就没法经过按这个按钮来触发其对应的事件，只能在PanResponder监视器的事件处理中对触摸行为进行处理

使用操做

利用PanResponder实现监视器有如下几个步骤：

指定监视区域

若是监视区域有多个，必定不能重叠，不然都失效

定义监视器相关变量

指向监视器的变量（必须有）、指向监视器监视区域的变量（能够有）、记录监视区域左上角顶点坐标的两个数值变量（能够有）、上一次触摸点的横纵坐标变量（能够有）

事件处理

准备监视器的事件处理函数

创建监视器

PanResponder.create(config)

相关事件监听

// 返回值为布尔值, 若是返回值为 true，则表示这个 View 可以响应滑动手势, 二者有一个为true便可响应
onMoveShouldSetPanResponder: (e, gestureState) => {...}
onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}

// 返回值为布尔值, 若是返回值为 true，则表示这个 View 可以响应触摸手势, 二者有一个为true便可响应
onStartShouldSetPanResponder: (e, gestureState) => {...}
onStartShouldSetPanResponderCapture: (e, gestureState) => {...}

// 当前有其余的东西成为响应器而且没有释放它。若是视图正在响应，会触发该方法
onPanResponderReject: (e, gestureState) => {...}
// 最近一次的移动距离.如:(获取x轴方向的移动距离 gestureState.dx)
onPanResponderGrant: (e, gestureState) => {...}
// 开始按下时的响应事件
onPanResponderStart: (e, gestureState) => {...}
// 结束按下时的响应事件
onPanResponderEnd: (e, gestureState) => {...}
// 用户手指离开屏幕时，调用该方法
onPanResponderRelease: (e, gestureState) => {...}
// 用户滑动手指时，调用该方法
onPanResponderMove: (e, gestureState) => {...}

// 另外一个组件已经成为了新的响应者，因此当前手势将被取消
onPanResponderTerminate: (e, gestureState) => {...}
// 若是回调函数返回为 true，则表示赞成释放响应者角色 同时会回调onResponderTerminate函数，通知组件事件响应处理被终止了
onPanResponderTerminationRequest: (e, gestureState) => {...}

// 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者（暂只支持android）
onShouldBlockNativeResponder: (e, gestureState) => {...}
复制代码

监视器与监视区域关联

{…this.watcher.panHandlers}

实例：点击、拖动选择百分百参数 好比说播放器的音量大小

参数event(e)

获取触摸的位置在被响应的 View 中的相对坐标，evt.nativeEvent.locationX

• 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 - 当前在屏幕上的有效触摸点的数量

使用示例

相关代码

export default class MyApp extends Component {

    constructor(props) {
        super(props)

        this.state = {
            backColor: 'red',
            left: 0,
            top: 100
        }
    }
    
    componentWillMount() {
        this._panResponse = PanResponder.create({
            onStartShouldSetPanResponder: () => true,
            onStartShouldSetPanResponderCapture: () => false,
            onMoveShouldSetPanResponder: () => true,
            onPanResponderGrant: () => {
                this._top = this.state.top
                this._left = this.state.left
                this.setState({ backColor: 'red' })
            },
            onPanResponderMove: (event, ges) => {
                console.log(`event = ${event}, guesture = ${ges}`)
                this.setState({
                    top: this._top + ges.dy,
                    left: this._left + ges.dx,
                    backColor: 'blue'
                })
            },
            onPanResponderRelease: (event, ges) => {
                this.setState({
                    backColor: 'orange'
                })
            }
        })
    }


    render() {
        return (
            <View style={styles.container}> <View {...this._panResponse.panHandlers} style={{ position: 'absolute', backgroundColor: this.state.backColor, left: this.state.left, top: this.state.top, width: 50, height: 50 }} /> </View> ); } } 复制代码

欢迎您扫一扫下面的微信公众号，订阅个人博客！