React Native框架底層的手勢響應系統(tǒng)提供了響應處理器，PanResponder API將這些手勢響應處理器再次進行封裝，便于開發(fā)者對手勢進行處理。
PanResponser API的基本思想就是：監(jiān)視屏幕上指定的位置的矩形區(qū)域。對手指觸發(fā)的事件作出響應。
一、利用PanResponser API監(jiān)視的步驟
1、指定監(jiān)視區(qū)域
為了監(jiān)視一個區(qū)域，我們需要準備一個view或者是從view組件擴展而來的組件。（注意：如果要監(jiān)視兩個區(qū)域，一定不能讓他們重疊，不然監(jiān)視器無法工作）
2、定義監(jiān)視器的相關變量
指向監(jiān)視器的變量（必須）。
用來指向監(jiān)視器監(jiān)視區(qū)域的變量，可以不定義。
用來記錄監(jiān)視區(qū)域左上角頂點坐標的兩個數(shù)值變量?？梢圆欢x。但當觸摸發(fā)生需要給用戶視覺上的反饋時，有這個變量可以很容易實現(xiàn)反饋。
上一次觸摸點的橫、縱坐標變量?？梢圆欢x，但這兩個變量可以便于分析、處理觸摸事件。
3、準備監(jiān)視器的事件處理函數(shù)
一共有13個這樣的函數(shù)，比如說onMoveShouldSetPanResponder用來判斷是否要監(jiān)視這個區(qū)域，onMoveShouldSetPanResponderCapture等。那我們只需要挑選出自己需要的函數(shù)來開發(fā)就可以了。
以下是監(jiān)視器的13個事件處理函數(shù)
onMoveShouldSetPanResponder
onMoveShouldSetPanResponderCapture
onStartShouldSetPanResponder
onStartShouldSetPanResponderCapture
onPanResponderReject
onPanResponderGrant
onPanResponderStart
onPanResponderEnd
onPanResponderRelease
onPanResponderMove
onPanResponderTerminate
onPanResponderTerminateRequest
onShouldBlockNativeResponder
4、建立監(jiān)視器
用PanResponder API提供的靜態(tài)函數(shù)create，建立監(jiān)聽器
this.watcher = PanResponder.create({
……
})
5、將監(jiān)視器和監(jiān)視區(qū)域掛接
我們先假設一下，監(jiān)視器就叫watcher。
{...this.watcher.panHandlers}
二、監(jiān)視事件的生命周期
一般來說，在點擊的生命周期我們自定義的被回調(diào)的函數(shù)都會收到兩個參數(shù)，一個是原生事件，另一個是手勢狀態(tài)。
而這里面會有很多的成員變量比如說觸摸點的位置，比如說手勢狀態(tài)的ID.
手勢狀態(tài)有以下變量
stateID—觸摸狀態(tài)的ID，在屏幕上至少有一個點的情況下，這個id會一直存在。
moveX—最近一次移動時的屏幕橫坐標
moveY—最近一次移動時的屏幕縱坐標
x0—當響應器產(chǎn)生時的屏幕坐標
y0—當響應器產(chǎn)生時的屏幕坐標
dx—從觸摸開始累積的橫向路程
dy—從觸摸操作開始累積縱向路程
vx—當前的橫向移動速度
vy—當前的縱向移動速度
numberActiveTouches—當前在屏幕上的有效觸摸點的數(shù)量。
三、單次點擊事件的生命周期
onStartShouldSetPanResponderCapture:是否設置開始捕捉這次事件
onStartResponderStart:將這個事件視為點擊事件的開始點
onPanResponderEnd:將這個事件視為點擊事件的結束點。
這里列舉出的三個生命周期方法是最常見的，但是其實它還有其他很多的方法。不過我們平常用的單次點擊事件就是這三個。
在移動手勢中，也有它自己的生命周期方法。這里不做詳解。通過下面一個小的案例進行解說。
四、案例
滑動解鎖：手指按壓的滑塊跟隨手指移動，按壓的監(jiān)視區(qū)域隨著手指移動而變化
從圖中我們可以看到，在這個RN界面中需要返回一個頂級元素view,然后在里面添加一個滑塊槽，之后是按鈕。
這個按鈕會有一個樣式，我們可以將它切成一個圓的樣子。并且，這個按鈕是需要滑動的，所以要給它添加一個表示距離滑動槽原點的位置。而這個樣式是需要及時改變的，所以我們可以定義一個狀態(tài)機。用leftPoint來表示它的位置。
export default class GusDemo extends Component {
constructor(props){
super(props);
this.watcher = null; //監(jiān)視器
this.startX = 0; //開始的左邊
this.state = {leftPoint:1} //狀態(tài)機變量用來保存最左邊的卡槽
}
返回的UI界面
render() {
return (
<View style={styles.container}>
<View style = {styles.barViewStyle}>
<View style = {[styles.buttonViewStyle,{left:this.state.leftPoint}]}
{...this.watcher.panHandlers} //將監(jiān)視器與監(jiān)視區(qū)域掛接
/>
</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部分已經(jīng)構建完畢，現(xiàn)在要做的就是到componentWillMount()方法里面去建立監(jiān)視器。為啥要在這個方法里面呢，是因為這個方法在UI渲染之前運行的，我們可以讓它來做一些定義變量或賦值的操作。所以我們將事件的按下、移動和結束的方法都寫到這邊來。分別給這幾個屬性各自定義一個方法。
componentWillMount(){
this.watcher = PanResponder.create({ //建立監(jiān)視器
onStartShouldSetPanResponder:()=>true, //判斷是否要監(jiān)聽，這里直接返回true
onPanResponderGrant:this._onPanResponderGrant, //事件,按下
onPanResponderMove:this._onPanResponderMove, //移動
onPanResponderEnd:this._onPanResponderEnd, //結束
});
}
這些方法我們都用簡寫的方式，所以到構造函數(shù)中將它們綁定一下。
export default class GusDemo extends Component {
constructor(props){
super(props);
this.watcher = null; //監(jiān)視器
this.startX = 0; //開始的左邊
this.state = {leftPoint:1} //狀態(tài)機變量用來保存最左邊的卡槽
this._onPanResponderGrant = this._onPanResponderGrant.bind(this);
this._onPanResponderEnd = this._onPanResponderEnd.bind(this);
this._onPanResponderMove = this._onPanResponderMove.bind(this);
}
現(xiàn)在來具體實現(xiàn)自定義的方法。雖然我們看到的是簡寫的方法，但是實際上，系統(tǒng)按下的方法會給我們自定義的這個方法傳入兩個參數(shù)，一個是事件，而另外一個是手指觸摸的位置。在開始的時候，我們要將開始偏移的位置給記錄下來。因為每次開始滑動的時候位置其實都是不一樣的。
_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; //在后面可以寫解鎖或者是跳轉(zhuǎn)效果。
}
this.setState(()=>{
return {leftPoint}; //改變狀態(tài)機
})
}
當手指松開之后，我們在這里不做復雜的判斷，直接讓它移動到最原始的位置。
_onPanResponderEnd(e,gestureState){
let leftPoint = 1;
this.setState(()=>{
return {leftPoint}; //改變狀態(tài)機到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; //監(jiān)視器
this.startX = 0; //開始的左邊
this.state = {leftPoint:1} //狀態(tài)機變量用來保存最左邊的卡槽
this._onPanResponderGrant = this._onPanResponderGrant.bind(this);
this._onPanResponderEnd = this._onPanResponderEnd.bind(this);
this._onPanResponderMove = this._onPanResponderMove.bind(this);
}
componentWillMount(){
this.watcher = PanResponder.create({ //建立監(jiān)視器
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; //在后面可以寫解鎖或者是跳轉(zhuǎn)效果。
}
this.setState(()=>{
return {leftPoint}; //改變狀態(tài)機
})
}
_onPanResponderEnd(e,gestureState){
let leftPoint = 1;
this.setState(()=>{
return {leftPoint}; //改變狀態(tài)機到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);
