標籤:移動 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 手勢響應以及觸摸事件的處理