react native 手勢 - fantasy0107/notes GitHub Wiki

官方基本使用 PanResponder

import {  PanResponder } from 'react-native';

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this._panResponder = PanResponder.create({
      // Ask to be the responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      // 返回 true 時觸摸判斷為手勢

      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      // 是否為 PanResponder 當為 true 時, 再開始時不會把事件丟給子元素

      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      // 返回 true 時移動判斷為手勢

      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
      // 是否為 PanResponder 當為 true 時, 在移動時不會把事件丟給子元素     

      onPanResponderGrant: (evt, gestureState) => { // 開始手勢的時候
        // The gesture has started. Show visual feedback so the user knows
        // what is happening!
        // gestureState.d{x,y} will be set to zero now
      },
      onPanResponderMove: (evt, gestureState) => { // 手勢移動的時候(從按下去那一點判斷)
        // The most recent move distance is gestureState.move{X,Y}
        // The accumulated gesture distance since becoming responder is
        // gestureState.d{x,y}
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => { //放開手勢後
        // The user has released all touches while this view is the
        // responder. This typically means a gesture has succeeded
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // Another component has become the responder, so this gesture
        // should be cancelled
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // Returns whether this component should block native components from becoming the JS
        // responder. Returns true by default. Is currently only supported on android.
        return true;
      },
    });
  }

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

ReactNative手势上滑隐藏下滑显示
react native 手勢識別
https://facebook.github.io/react-native/docs/layoutanimation