Touch response function in the react-native

Source: Internet
Author: User



When we do the app, the touch response is different from the desktop application.



Web page support for touch response differs greatly from native apps.



Basic usage


componentWillMount: function () {
    this._panResponder = PanResponder.create ({
      // Request to become a responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

      onPanResponderGrant: (evt, gestureState) => {
        // Start gesture operation. Give users some visual feedback and let them know what's going on!

        // gestureState. (x, y) 0 will now be set to 0
      },
      onPanResponderMove: (evt, gestureState) => {
        // The last movement distance is gestureState.move {X, Y}

        // Cumulative gesture movement distance from the beginning of becoming a responder is gestureState.d {x, y}
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {
        // The user releases all touch points, and at this point the view has become a responder.
        // Generally this means that a gesture operation has been successfully completed.
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // Another component has become a new responder, so the current gesture will be canceled.
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // Returns a Boolean value that determines whether the current component should prevent the native component from becoming a JS responder
        // Returns true by default. Currently only android is supported.
        return true;
      },
    });
  },

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

// Comment:  //Comment:             


Touch-responsive functionality in react-native


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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.