zoukankan      html  css  js  c++  java
  • React-native 中的触摸响应功能

    我们在做APP的时候,与桌面应用系统不同的是触摸响应。

    web页面对触摸响应的支持和原生的APP有着很大的差异。

    基本用法

     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 现在会被设置为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} />
        );
      },

    //注释一下:


  • 相关阅读:
    [Swoole系列入门教程 5] UDP协议和demo
    [Swoole系列入门教程 3] 心跳检测
    [Swoole系列入门教程 1] CentOs 上的Swoole安装
    PHP CURL 异步测试
    layui 表格点击图片放大
    Laravel 指定日志生成目录
    联系我
    npm config set registry 与 cnpm的区别
    qq邮箱html邮件,图片不显示的问题
    qq邮箱问卷,测试不支持form表单
  • 原文地址:https://www.cnblogs.com/wanghualiang/p/5403966.html
Copyright © 2011-2022 走看看