React-Native PanResponder手势识别器
发布时间:2020-12-15 07:27:21 所属栏目:百科 来源:网络整理
导读:PanResponder类可以将多点触摸操作协调成一个手势。它使得一个单点触摸可以接受更多的触摸操作,也可以用于识别简单的多点触摸手势 它提供了一个对触摸响应系统响应器的可预测的包装。对于每一个处理函数,它在原生事件之外提供了一个新的gestureState对象。
PanResponder类可以将多点触摸操作协调成一个手势。它使得一个单点触摸可以接受更多的触摸操作,也可以用于识别简单的多点触摸手势 它提供了一个对触摸响应系统响应器的可预测的包装。对于每一个处理函数,它在原生事件之外提供了一个新的gestureState对象。 原生事件nativeEvent
gestureState对象的属性
首先在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,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
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |