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>

        )

    }

}