RN手势

React Native框架底层的手势响应系统提供了响应处理器,PanResponder API将这些手势响应处理器再次进行封装,便于开发者对手势进行处理。 PanResponser API的基本思想就是:监视屏幕上指定的位置的矩形区域。对手指触发的事件作出响应。 一、利用PanResponser API监视的步骤 1、指定监视区域 为了监视一个区域,我们需要准备一个view或者是从view组件扩展而来的组件。(注意:如果要监视两个区域,一定不能让他们重叠,不然监视器无法工作) 2、定义监视器的相关变量 指向监视器的变量(必须)。 用来指向监视器监视区域的变量,可以不定义。 用来记录监视区域左上角顶点坐标的两个数值变量。可以不定义。但当触摸发生需要给用户视觉上的反馈时,有这个变量可以很容易实现反馈。 上一次触摸点的横、纵坐标变量。可以不定义,但这两个变量可以便于分析、处理触摸事件。 3、准备监视器的事件处理函数 一共有13个这样的函数,比如说onMoveShouldSetPanResponder用来判断是否要监视这个区域,onMoveShouldSetPanResponderCapture等。那我们只需要挑选出自己需要的函数来开发就可以了。 以下是监视器的13个事件处理函数

 onMoveShouldSetPanResponder
 onMoveShouldSetPanResponderCapture
 onStartShouldSetPanResponder
 onStartShouldSetPanResponderCapture
 onPanResponderReject
 onPanResponderGrant
 onPanResponderStart
 onPanResponderEnd
 onPanResponderRelease
 onPanResponderMove
 onPanResponderTerminate
 onPanResponderTerminateRequest
 onShouldBlockNativeResponder

4、建立监视器 用PanResponder API提供的静态函数create,建立监听器

this.watcher = PanResponder.create({
  ……
})

5、将监视器和监视区域挂接 我们先假设一下,监视器就叫watcher。

{...this.watcher.panHandlers}

二、监视事件的生命周期 一般来说,在点击的生命周期我们自定义的被回调的函数都会收到两个参数,一个是原生事件,另一个是手势状态。 而这里面会有很多的成员变量比如说触摸点的位置,比如说手势状态的ID. 手势状态有以下变量

stateID—触摸状态的ID,在屏幕上至少有一个点的情况下,这个id会一直存在。
moveX—最近一次移动时的屏幕横坐标
moveY—最近一次移动时的屏幕纵坐标
x0—当响应器产生时的屏幕坐标
y0—当响应器产生时的屏幕坐标
dx—从触摸开始累积的横向路程
dy—从触摸操作开始累积纵向路程
vx—当前的横向移动速度
vy—当前的纵向移动速度
numberActiveTouches—当前在屏幕上的有效触摸点的数量。

三、单次点击事件的生命周期 onStartShouldSetPanResponderCapture:是否设置开始捕捉这次事件 onStartResponderStart:将这个事件视为点击事件的开始点 onPanResponderEnd:将这个事件视为点击事件的结束点。 这里列举出的三个生命周期方法是最常见的,但是其实它还有其他很多的方法。不过我们平常用的单次点击事件就是这三个。 在移动手势中,也有它自己的生命周期方法。这里不做详解。通过下面一个小的案例进行解说。

四、案例 滑动解锁:手指按压的滑块跟随手指移动,按压的监视区域随着手指移动而变化

75353037-EE9F-4BA8-8283-8B2F9528F7BF.png

从图中我们可以看到,在这个RN界面中需要返回一个顶级元素view,然后在里面添加一个滑块槽,之后是按钮。 这个按钮会有一个样式,我们可以将它切成一个圆的样子。并且,这个按钮是需要滑动的,所以要给它添加一个表示距离滑动槽原点的位置。而这个样式是需要及时改变的,所以我们可以定义一个状态机。用leftPoint来表示它的位置。

export default class GusDemo extends Component {
  constructor(props){
    super(props);
    this.watcher = null;   //监视器
    this.startX = 0; //开始的左边
    this.state = {leftPoint:1}  //状态机变量用来保存最左边的卡槽
}

返回的UI界面

render() {
    return (
      <View style={styles.container}>
         <View style = {styles.barViewStyle}>
            <View style = {[styles.buttonViewStyle,{left:this.state.leftPoint}]}
                  {...this.watcher.panHandlers}  //将监视器与监视区域挂接
            />
        </View>
      </View>
    );
  }

设置样式 首先要获取宽度。

var Dimensions = require('Dimensions');
var totalWidth = Dimensions.get('window').width;  //宽度

设置样式

const styles = StyleSheet.create({
  container: {
    flex: 1,

    backgroundColor: '#F5FCFF',
  },
  barViewStyle: {
      width:totalWidth - 40,
      height:50,
    backgroundColor:'grey',
    borderRadius:25,
    left:20,
    top:50,
    flexDirection:'row',
  },
  buttonViewStyle: {
      width:48,
      height:48,
     borderRadius:24,
    backgroundColor:'pink',
    left:1,
    top:1,
  }
});

自此,所有的UI部分已经构建完毕,现在要做的就是到componentWillMount()方法里面去建立监视器。为啥要在这个方法里面呢,是因为这个方法在UI渲染之前运行的,我们可以让它来做一些定义变量或赋值的操作。所以我们将事件的按下、移动和结束的方法都写到这边来。分别给这几个属性各自定义一个方法。

componentWillMount(){
    this.watcher = PanResponder.create({  //建立监视器
      onStartShouldSetPanResponder:()=>true,  //判断是否要监听,这里直接返回true
      onPanResponderGrant:this._onPanResponderGrant,  //事件,按下
      onPanResponderMove:this._onPanResponderMove,  //移动
      onPanResponderEnd:this._onPanResponderEnd,   //结束

    });
  }

这些方法我们都用简写的方式,所以到构造函数中将它们绑定一下。

export default class GusDemo extends Component {
  constructor(props){
    super(props);
    this.watcher = null;   //监视器
    this.startX = 0; //开始的左边
    this.state = {leftPoint:1}  //状态机变量用来保存最左边的卡槽
    this._onPanResponderGrant = this._onPanResponderGrant.bind(this);
    this._onPanResponderEnd = this._onPanResponderEnd.bind(this);
    this._onPanResponderMove = this._onPanResponderMove.bind(this);
  }

现在来具体实现自定义的方法。虽然我们看到的是简写的方法,但是实际上,系统按下的方法会给我们自定义的这个方法传入两个参数,一个是事件,而另外一个是手指触摸的位置。在开始的时候,我们要将开始偏移的位置给记录下来。因为每次开始滑动的时候位置其实都是不一样的。

 _onPanResponderGrant(e,gestureState){
    this.startX = gestureState.x0;   //按住滑块的时候,记录偏移量
  }

下面来写移动按钮的时候的逻辑

_onPanResponderMove(e,gestureState){
    let leftPoint;   //用一个变量记录滑动的偏移值
    if(gestureState.moveX > totalWidth-42-48+this.startX){  //正常位置
      leftPoint = totalWidth - 42 - 48;
    }else{
      leftPoint = gestureState.moveX - this.startX; //在后面可以写解锁或者是跳转效果。
    }
    this.setState(()=>{
      return {leftPoint};    //改变状态机
    })
  }

当手指松开之后,我们在这里不做复杂的判断,直接让它移动到最原始的位置。

 _onPanResponderEnd(e,gestureState){
      let leftPoint = 1;
    this.setState(()=>{
      return {leftPoint};   //改变状态机到1的位置
    })
  }

滑动解锁的案例就完成了。

下面是源码index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  PanResponder
} from 'react-native';
var Dimensions = require('Dimensions');
var totalWidth = Dimensions.get('window').width;  //宽度
export default class GusDemo extends Component {
  constructor(props){
    super(props);
    this.watcher = null;   //监视器
    this.startX = 0; //开始的左边
    this.state = {leftPoint:1}  //状态机变量用来保存最左边的卡槽

    this._onPanResponderGrant = this._onPanResponderGrant.bind(this);
    this._onPanResponderEnd = this._onPanResponderEnd.bind(this);
    this._onPanResponderMove = this._onPanResponderMove.bind(this);


  }

  componentWillMount(){
    this.watcher = PanResponder.create({  //建立监视器
      onStartShouldSetPanResponder:()=>true,
      onPanResponderGrant:this._onPanResponderGrant,  //事件,按下
      onPanResponderMove:this._onPanResponderMove,  //移动
      onPanResponderEnd:this._onPanResponderEnd,   //结束

    });
  }

  //移动的逻辑
  _onPanResponderGrant(e,gestureState){
    this.startX = gestureState.x0;   //按住滑块的时候,记录偏移量
  }
  _onPanResponderMove(e,gestureState){
    let leftPoint;   //用一个变量记录滑动的偏移值
    if(gestureState.moveX > totalWidth-42-48+this.startX){  //正常位置
      leftPoint = totalWidth - 42 - 48;
    }else{
      leftPoint = gestureState.moveX - this.startX; //在后面可以写解锁或者是跳转效果。
    }
    this.setState(()=>{
      return {leftPoint};    //改变状态机
    })
  }
  _onPanResponderEnd(e,gestureState){
      let leftPoint = 1;
    this.setState(()=>{
      return {leftPoint};   //改变状态机到1的位置
    })
  }
  render() {
    return (
      <View style={styles.container}>
         <View style = {styles.barViewStyle}>
            <View style = {[styles.buttonViewStyle,{left:this.state.leftPoint}]}
                  {...this.watcher.panHandlers}
            />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,

    backgroundColor: '#F5FCFF',
  },
  barViewStyle: {
      width:totalWidth - 40,
      height:50,
    backgroundColor:'grey',
    borderRadius:25,
    left:20,
    top:50,
    flexDirection:'row',
  },
  buttonViewStyle: {
      width:48,
      height:48,
     borderRadius:24,
    backgroundColor:'pink',
    left:1,
    top:1,
  }
});

AppRegistry.registerComponent('GusDemo', () => GusDemo);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菜鸟计划

javascript简史

一、javascript简介 1.1 javascript简史 javascript诞生于1995年。当时它的主要目的是处理以前由服务器端语言负责的一些输入验证...

29050
来自专栏IMWeb前端团队

React16中的服务端渲染(译)

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 React 16发布了。 React 16有很多令人兴奋的新东...

91890
来自专栏cnblogs

Bootstrap源码分析之dropdown

源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 实现功能及原理: ...

31970
来自专栏非著名程序员

基础篇章:关于 React Native 之 KeyboardAvoidingView 组件的讲解

友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 看完了这个组件的名字 KeyboardAvoi...

48050
来自专栏前端知识分享

第140天:前端开发中浏览器兼容性问题总结(一)

我们在开发的时候会明确项目要兼容哪些浏览器的最低版本,我之前的项目要求兼容IE8.0以上的版本,Chrome 48以上,FireFox 44以上。有了这些最基本...

1.9K30
来自专栏向治洪

React Native组件只Image

不管在Android还是在ios原生的开发中,图片都是作为控件给出来的,在RN中也有这么一个控件(Image)。根据官网的资料,图片分为本地静态图片,网络图片和...

25870
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何在手机上实现散落点图表功能

最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便

11220
来自专栏Web行业观察

你真的了解回流和重绘吗?(面试必问)

回流和重绘可以说是每一个web开发者都经常听到的两个词语,我也不例外,可是我之前一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享,所以对其进行了一...

23740
来自专栏云瓣

React之父子组件传递和其它一些要点

react是R系技术栈中最基础同时也是最核心的一环,2年不到获取了62.5k star(截止到目前),足可见其给力程度。下面对一些react日常开发中的注意事项...

43880
来自专栏全栈架构

看微信小程序 wx.canvasToTempFilePath 方法之巨坑的解决之道

当然这个项目是可以用的,但是生成不了图片,打开 tempFilePath直接报错,发现了什么原因了吗?

33410

扫码关注云+社区

领取腾讯云代金券