react-native 手勢響應以及觸摸事件的處理

react-native 的觸摸事件：

　　TouchableHighlight , TouchableNativeFeedBack , TouchableOpacity , TouchableWithoutFeedBack。

　　在onPress事件觸發的函數中都會攜帶事件參數（event）包含一個參數 ：nativeEvent 參數如下

locationX 和 locationY 是觸摸的位置相對於組件的位置

pageX 和 pageY 是觸摸的位置相對於屏幕的位置

timestamp 是時間戳

手勢操作  PanResponder

用法參見React-native實例：

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

      onPanResponderGrant: (evt, gestureState) => {
        // 開始手勢操作。給用戶一些視覺反饋，讓他們知道發生了什么事情！

        // gestureState.{x,y} 現在會被設置為0
      },
      onPanResponderMove: (evt, gestureState) => {
        // 最近一次的移動距離為gestureState.move{X,Y}

        // 從成為響應者開始時的累計手勢移動距離為gestureState.d{x,y}
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {
        // 用戶放開了所有的觸摸點，且此時視圖已經成為了響應者。
        // 一般來說這意味着一個手勢操作已經成功完成。
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // 另一個組件已經成為了新的響應者，所以當前手勢將被取消。
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // 返回一個布爾值，決定當前組件是否應該阻止原生組件成為JS響應者
        // 默認返回true。目前暫時只支持android。
        return true;
      },
    });
  },

  render: function() {
    return (
      <View {...this._panResponder.panHandlers} />
    );
  },

　　

如果想要詳細的了解觸摸或者點擊事件的機制或者詳細的參數信息  參閱：RN官網https://reactnative.cn/docs/gesture-responder-system/ ， https://reactnative.cn/docs/panresponder/  以及這篇文章 ：https://www.race604.com/react-native-touch-event/