RN 手勢響應系統基本用法和獲取坐標判斷用戶手勢方向

1. 基本使用，
注意兩點

（1）將手勢系統的函數放在“componentWillMount”生命周期函數里面，當時會有警告，警告自己看吧

（2）將方法使用ES6擴展運算符展開

 

import React from 'react';
import {Text,View} from 'react-native';


export default class DetailScreen extends React.Component{
    UNSAFE_componentWillMount(){  
      // 申請成為觸摸事件響應者 -> 成為觸摸事件響應者 -> 處理觸摸事件 -> 釋放觸摸事件 -> 觸摸事件結束
      
　　　let [beginX,beginY,endX,endY] = [0,0,0,0];
      this.gestureHandlers = {
         onMoveShouldSetResponder: (evt) => {
             console.log('onMoveShouldSetResponder');
             return true;
         },
         // 現在要開始響應觸摸事件了。這也是需要做高亮的時候，使用戶知道他到底點到了哪里。
         onResponderGrant:(event)=>{
             console.log('onResponderGrant');
             console.log(event.nativeEvent);
             let obj = event.nativeEvent;
             beginX = parseInt(obj.locationX);
             beginY = parseInt(obj.locationY);
         },
         
         //具體響應事件：（1）用戶正在屏幕上移動手指時 ，“注意”觸發次數過於頻繁
         onResponderMove:(event)=>{
             console.log('用戶正在移動手指，且沒離開');
         },
         onResponderRelease:(event)=>{              
             console.log('手指移動后，釋放');
             console.log(event.nativeEvent);
             let obj = event.nativeEvent;
             endX = parseInt(obj.locationX);
             endY = parseInt(obj.locationY);
             let result = Math.abs(endX-beginX)>Math.abs(endY-beginY)
             if(result){
                 console.log('橫向移動之后，判斷是做正負');             
                 if(endX>beginX){
                     console.log('向右');
                     console.log(this.props);
                 }else{
                     console.log('向左');
                     
                 }
             }else{
                 console.log('豎向移動');
             }
         }
     } 
    }
    render(){
        return (           
            <View
                style={{flex:1,backgroundColor:'yellow'}}
                {...this.gestureHandlers}
            >
                <Text>詳情界面</Text>
            </View>          
        )
    }
}

 

*** 判斷手勢方向 ， 我定義了 四個變量 （beginX，beginY,endX,EndY），在 onResponderGrant函數里，獲得初始位置坐標 ， 在onResponderRelease函數里，獲取最終位置坐標，之后，先判斷，是橫向移動還是豎向移動，確定好了方向，再通過正負值，判斷具體方向