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


export default class DetailScreen extends React.Component{
    UNSAFE_componentWillMount(){  
      // 申請成為觸摸事件響應(yīng)者 -> 成為觸摸事件響應(yīng)者 -> 處理觸摸事件 -> 釋放觸摸事件 -> 觸摸事件結(jié)束
      
　　　let [beginX,beginY,endX,endY] = [0,0,0,0];
      this.gestureHandlers = {
         onMoveShouldSetResponder: (evt) => {
             console.log('onMoveShouldSetResponder');
             return true;
         },
         // 現(xiàn)在要開始響應(yīng)觸摸事件了。這也是需要做高亮的時候，使用戶知道他到底點到了哪里。
         onResponderGrant:(event)=>{
             console.log('onResponderGrant');
             console.log(event.nativeEvent);
             let obj = event.nativeEvent;
             beginX = parseInt(obj.locationX);
             beginY = parseInt(obj.locationY);
         },
         
         //具體響應(yīng)事件：（1）用戶正在屏幕上移動手指時 ，“注意”觸發(fā)次數(shù)過于頻繁
         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('橫向移動之后，判斷是做正負(fù)');             
                 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>          
        )
    }
}