React-Native觸摸組件PanResponder的使用

已經找到詳細文檔了:

http://reactnative.cn/docs/0.26/panresponder.html

DEMO:

import React, { Component } from 'react';
import {
  Alert,
  StyleSheet,
  Text,
  View,
  Navigator,
  PanResponder
} from 'react-native';

export default class Login extends Component{
  constructor(props){
    super(props);
    this.state = {
     eventName:'',
     pos: '',
  	};
    this.myPanResponder={}
  }

  componentWillMount() {
      this.myPanResponder = PanResponder.create({
      //要求成爲響應者：
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
      onPanResponderTerminationRequest: (evt, gestureState) => true,

      //響應對應事件後的處理:
      onPanResponderGrant: (evt, gestureState) => {
        this.state.eventName='觸摸開始';
        this.forceUpdate();
      },
      onPanResponderMove: (evt, gestureState) => {
        var _pos = 'x:' + gestureState.moveX + ',y:' + gestureState.moveY;
        this.setState( {eventName:'移動',pos : _pos} );
      },
      onPanResponderRelease: (evt, gestureState) => {
        this.setState( {eventName:'擡手'} );
      },
      onPanResponderTerminate: (evt, gestureState) => {
        this.setState( {eventName:'另外一個組件已經成爲了新的響應者'} )
      },
    });
  }

  render(){
    return (
      <View style={styles.container} {...this.myPanResponder.panHandlers}>
        <Text>eventName:{this.state.eventName}|{this.state.pos}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    backgroundColor:"#fff",
    flex:1
  }
});