반응 원시에서 여러 버튼을 동시에 터치 할 수있게하려면 어떻게해야합니까?

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

이 문제는 제스처 응답자 방법을 사용하지 않고 View 구성 요소의 onTouchEnd 소품을 사용하여 쉽게 해결할 수 있습니다.

그래서 수정 된 코드는이 그럼 난 단순히 동시에 누를 필요가 버튼을 감싸는 여러 버튼

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> 
     ); 
    } 
} 

내 솔루션 구성 요소를가는 가지

<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

모양을

<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> 
     ); 
    } 
}