文档章节

React-Native PanResponder手势识别器

她吃西红柿
 她吃西红柿
发布于 2017/03/31 13:47
字数 585
阅读 257
收藏 1

PanResponder类可以将多点触摸操作协调成一个手势。它使得一个单点触摸可以接受更多的触摸操作,也可以用于识别简单的多点触摸手势 它提供了一个对触摸响应系统响应器的可预测的包装。对于每一个处理函数,它在原生事件之外提供了一个新的gestureState对象。

原生事件nativeEvent

  • changedTouches - 在上一次事件之后,所有发生变化的触摸事件的数组集合(即上一次事件后,所有移动过的触摸点)
  • identifier - 触摸点的ID
  • locationX - 触摸点相对于父元素的横坐标
  • locationY - 触摸点相对于父元素的纵坐标
  • pageX - 触摸点相对于根元素的横坐标
  • pageY - 触摸点相对于根元素的纵坐标
  • target - 触摸点所在的元素ID
  • timestamp - 触摸事件的时间戳,可用于移动速度的计算
  • touches - 当前屏幕上的所有触摸点的集合

gestureState对象的属性

  • stateID - 触摸状态的ID。在屏幕上有至少一个触摸点的情况下,这个ID会一直有效。
  • moveX - 最近一次移动时的屏幕横坐标
  • moveY - 最近一次移动时的屏幕纵坐标
  • x0 - 当响应器产生时的屏幕坐标
  • y0 - 当响应器产生时的屏幕坐标
  • dx - 从触摸操作开始时的累计横向路程
  • dy - 从触摸操作开始时的累计纵向路程
  • vx - 当前的横向移动速度
  • vy - 当前的纵向移动速度
  • numberActiveTouches - 当前在屏幕上的有效触摸点的数量

首先在componentWillMount添加监视器

 componentWillMount() {
           // 添加监视器
    componentWillMount() { 
        this._PanResponder = PanResponder.create({
            onStartShouldSetPanResponder: () => true,
            //点击回调
            onPanResponderGrant:this._onPanResponderGrant.bind(this),
            //滑动回调
            onPanResponderMove:this._onPanResponderMove.bind(this),
        });

    };
//event原生事件
    //gestureState对象
    _onPanResponderGrant(event,gestureState){

        let touchPointX = gestureState.x0
        let progress = touchPointX / width;
        console.log(touchPointX,width,progress);
        this.setState({progress:progress,});
    };
    _onPanResponderMove(event,gestureState) {
        let touchMoveX = gestureState.moveX
        let progress = touchMoveX / width;
        console.log(touchMoveX,width,progress);
        this.setState({progress:progress});

     }

页面布局

 constructor(props) {
        super(props);
        this.state = {
            progress : 0,
            _PanResponder:null

        }

    };

 render() {

        return ( 
             <View style={styles.containerStyle}>
                <ProgressViewIOS 
                style={styles.ProgressViewStyle}
                progress={this.state.progress}
                />
                <Text style={styles.textStyle}>当前百分比{Math.round(this.state.progress * 100)}%</Text>
                {/*由于progress比较小,所有用一个背景透明的view来响应事件*/}
                <View style={styles.touchViewStyle}
                {...this._PanResponder.panHandlers}
                ></View>
            </View>


        );



    };

输入图片说明 代码地址:https://github.com/roycehe/react-native-100-Demos

不要的吝啬你的赞赏和☆

© 著作权归作者所有

她吃西红柿
粉丝 43
博文 52
码字总数 25812
作品 0
杭州
iOS工程师
私信 提问
react native之PanResponder手势识别初探

PanResponder平底锅的响应者 PanResponder类可以将多点触摸操作协调城一个手势,它使得一个单点触摸可以接受更多的触摸操作,也可以用于识别简单的多点触摸手势。 PanResponder的基本思想是:...

Chason-洪
2017/10/20
0
0
【译】使用 React Native 构建 Facebook Paper 类似的 UI

我模仿 Facebook 的 Paper 应用构建了一个开闭卡片的轮播效果作为技术演示.它使用了 React Native 及其动画库. 当人们听到 React Native 后第一反应会觉得它运行缓慢.这是因为一般人会去这样...

力谱宿云
2016/08/23
332
0
完美兼容React-Native View缩放和左右滑动

由于前段时间写了一个React-Native的项目Mung,里面有一个图片浏览的功能,一般图片浏览都需要放大缩小和左右滑动,后来找了两个这方面比较好的控件react-native-gallery和react-native-imag...

mochixuan
2017/10/24
0
0
完美兼容React-Native View缩放和左右滑动

由于前段时间写了一个React-Native的项目Mung,里面有一个图片浏览的功能,一般图片浏览都需要放大缩小和左右滑动,后来找了两个这方面比较好的控件react-native-gallery和react-native-imag...

mochixuan
2017/10/24
0
0
写一个轮播图,学会 React Native

我学习 Web 的第一课,就是学习写一个轮播图,在写轮播图时自然地将 html、css、js、DOM、组件设计等各方面简单的知识点给串起来了。学习 React Native 的时候,也自然用起了这个思路,挺好用...

穿越过来的键盘手
2018/07/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Activity启动模式二

上篇文章Activity启动模式一主要介绍了Activity的四种启动模式,这些启动模式都是在AndroidManifest中进行配置的。除此之外,Android系统还通过Intent类提供了一些标志位,同样可以指定Activ...

ltlovezh
21分钟前
4
0
三原色还原

1、Color Filter Array — CFA 随着数码相机、手机的普及,CCD/CMOS 图像传感器近年来得到广泛的关注和应用。 图像传感器一般都采用一定的模式来采集图像数据,常用的有 BGR 模式和 CFA 模式...

天王盖地虎626
32分钟前
3
0
kubernetes pod exec接口调用

正文 一般生产环境上由于网络安全策略,大多数端口是不能为集群外部访问的。多个集群之间一般都是通过k8s的ApiServer组件提供的接口通信,如https://192.168.1.101:6443。所以在做云平台时,...

码农实战
今天
8
0
3_数组

3_数组

行者终成事
今天
8
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部