react-native – 同时有多个手势响应者

前端之家收集整理的这篇文章主要介绍了react-native – 同时有多个手势响应者前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要一些可以同时按下的按钮,但是目前如果你按下一个按钮,它“声称”响应性而其他按钮不能再被按下了.我该怎么做呢?
得到它了.您必须使用ReactNativeEventEmitter直接监听触摸事件并完全绕过手势响应程序.下面是一个装饰器类,只要收到这些触摸事件,它就会在包装类中调用onTouchStart,onTouchEnd和onTouchMove.
  1. 'use strict';
  2.  
  3. import React,{Component} from 'react-native';
  4. import ReactNativeEventEmitter from 'ReactNativeEventEmitter';
  5. import NodeHandle from 'NodeHandle';
  6.  
  7. export const multitouchable = BaseComponent => {
  8. return class extends Component {
  9.  
  10. constructor(props,context) {
  11. super(props,context);
  12.  
  13. this.comp = null;
  14. this.compId = null;
  15. }
  16.  
  17. componentDidMount() {
  18. if(this.comp && this.compId){
  19. this.comp.onTouchStart && ReactNativeEventEmitter.putListener(this.compId,'onTouchStart',e => this.comp.onTouchStart(e));
  20. this.comp.onTouchEnd && ReactNativeEventEmitter.putListener(this.compId,'onTouchEnd',e => this.comp.onTouchEnd(e));
  21. this.comp.onTouchMove && ReactNativeEventEmitter.putListener(this.compId,'onTouchMove',e => this.comp.onTouchMove(e));
  22. }
  23. }
  24.  
  25. componentWillUnmount() {
  26. if(this.comp && this.compId){
  27. this.comp.onTouchStart && ReactNativeEventEmitter.deleteListener(this.compId,'onTouchStart');
  28. this.comp.onTouchEnd && ReactNativeEventEmitter.deleteListener(this.compId,'onTouchEnd');
  29. this.comp.onTouchMove && ReactNativeEventEmitter.deleteListener(this.compId,'onTouchMove');
  30. }
  31. }
  32.  
  33. render() {
  34. return (
  35. <BaseComponent {...this.props} {...this.state}
  36. ref={c => {
  37. this.comp = c;
  38. const handle = React.findNodeHandle(c);
  39. if(handle)
  40. this.compId = NodeHandle.getRootNodeID(handle);
  41. }}
  42. />
  43. );
  44. }
  45. };
  46. }

猜你在找的React相关文章