如何在原生反应中同时启用多个按钮上的触摸？

Question

我需要的是，当我触摸和保持一个按钮，然后我也应该能上的按钮触摸1.

<View> 
 
    
 
    <View 
 
    onStartShouldSetResponder={()=>this.console("Button 2 Clicked")}> 
 
    <Text>BUTTON 2</Text> 
 
    </View> 
 
    
 
    <TouchableOpacity 
 
    onPressIn={()=>this.console('Button 1 pressed')} 
 
    onPressOut={()=>this.console('Button 1 released')}> 
 
    <View> 
 
     <Text>BUTTON 1</Text> 
 
    </View> 
 
    </TouchableOpacity> 
 

 
</View>

基本上，我有一个屏幕，在这里我可以记录点击并按住录制按钮（按钮1）。在同一屏幕上，我有一个翻转照相机按钮（按钮2）。我希望在录制视频时能够点击翻转相机按钮。

Answer 1

此问题可以使用onTouchStart，onTouchEnd View组件的props轻松解决，无需使用手势响应方法。

因此，修改后的代码看起来像

<View> 

    <View onTouchStart={()=>this.console("Button 2 Clicked")}> 
    <Text>BUTTON 2</Text> 
    </View> 

    <View 
    onTouchStart={()=>this.console('Button 1 pressed')} 
    onTouchEnd={()=>this.console('Button 1 released')}> 
     <Text>BUTTON 1</Text> 
    </View> 

</View> 

Answer 2

这是我多个按钮

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 (
      <View 
       onTouchStart={this.onTouchStart} 
       onTouchEnd={this.onTouchEnd} 
       onTouchCancel={this.onTouchCancel} 
       onTouchMove={this.onTouchMove}> 
       {this.props.children} 
      </View> 
     ); 
    } 
} 

解决方案然后，我只是换，需要在同一时间按下按钮枝条组件

<MultiTouch style={this.style.view}> 
    <UpDownButton /> 
    <UpDownButton /> 
</MultiTouch> 

干杯！

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 (
      <View 
       onTouchStart={this.onTouchStart} 
       onTouchEnd={this.onTouchEnd} 
       onTouchCancel={this.onTouchCancel} 
       onTouchMove={this.onTouchMove}> 

       {this.props.children} 
      </View> 
     ); 
    } 
}