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

來源:互聯網
上載者:User

標籤:移動   his   觸摸   handler   image   組件   fun   java   mes   

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/

 

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.