React-Native PanResponder手势识别器

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

不要的吝啬你的赞赏和☆

转载于:https://my.oschina.net/roycehe/blog/871505

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值