反応したネイティブで複数のボタンを同時にタッチできるようにするにはどうすればよいですか？

Question

私は基本的に、私は記録することができ、画面を持って、私はタッチし、1つのボタンを押していたとき、私はまた、ボタン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コンポーネントの小道具です。

ので、変更されたコードが

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