如何在本机中同时启用触摸多个按钮?

我需要的是当我触摸并按住一个按钮时,我也应该能够触摸按钮1。

 this.console("Button 2 Clicked")}> BUTTON 2  this.console('Button 1 pressed')} onPressOut={()=>this.console('Button 1 released')}>  BUTTON 1    

基本上,我有一个屏幕,我可以通过点击并按住录制按钮(按钮1)来录制video。 在同一个屏幕上,我有一个翻盖相机按钮(按钮2)。 我希望我能够在录制video时点击翻盖相机按钮。

使用onTouchStart,onTouchEnd视图组件的道具可以轻松解决此问题,而无需使用手势响应方法。

所以修改后的代码看起来就像

  this.console("Button 2 Clicked")}> BUTTON 2  this.console('Button 1 pressed')} onTouchEnd={()=>this.console('Button 1 released')}> BUTTON 1   

这是我的多个按钮的解决方案

 import React, { Component } from 'react'; import { View, PanResponder, } from 'react-native'; import ReactNativeComponentTree from'react-native/Libraries/Renderer/shims/ReactNativeComponentTree'; export default class MultiTouch extends Component{ constructor(props) { super(props); this.onTouchStart = this.onTouchStart.bind(this); this.onTouchEnd = this.onTouchEnd.bind(this); this.onTouchCancel = this.onTouchCancel.bind(this); this.triggerEvent = this.triggerEvent.bind(this); } onTouchStart(event){ const element = ReactNativeComponentTree.getInstanceFromNode(event.target)._currentElement; this.triggerEvent(element._owner, 'onPressIn'); } onTouchEnd(event){ const element = ReactNativeComponentTree.getInstanceFromNode(event.target)._currentElement; this.triggerEvent(element._owner, 'onPressOut'); } onTouchCancel(event){ const element = ReactNativeComponentTree.getInstanceFromNode(event.target)._currentElement; this.triggerEvent(element._owner, 'onPressOut'); } onTouchMove(event){ // console.log(event); } triggerEvent(owner, event){ // Searching down the if(!owner || !owner.hasOwnProperty('_instance')){ return; } if(owner._instance.hasOwnProperty(event)){ owner._instance[event](); }else{ this.triggerEvent(owner._currentElement._owner, event); } } render(){ return (  {this.props.children}  ); } } 

然后我简单地用组件包裹需要同时按下的按钮

     

干杯!

UPDATE

由于本机反应v.0.51中的更改​​中断,我以前的解决方案不再起作用。 但我设法创造一个新的。 我没有使用TouchableWithoutFeedback和onPress,而是在每个应该有多点触控的按钮上使用View和onTouch。

 import React, { Component } from 'react'; import { View, } from 'react-native'; export default class RoundButtonPart extends Component{ constructor(props) { super(props); this.state = { active: false }; this.onTouchStart = this.onTouchStart.bind(this); this.onTouchEnd = this.onTouchEnd.bind(this); this.onTouchCancel = this.onTouchCancel.bind(this); } onTouchStart(event){ this.setState({ active: true }); this.props.onPressIn && this.props.onPressIn(); } onTouchEnd(event){ this.setState({ active: false }); this.props.onPressOut && this.props.onPressOut(); } onTouchCancel(event){ this.setState({ active: false }); this.props.onPressOut && this.props.onPressOut(); } onTouchMove(event){ } render(){ return (  {this.props.children}  ); } }