如何在React Native中同时启用多个按钮

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 props of 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，我使用的是每个应该具有多点触摸的按钮上的视图和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>
        );
    }
}

Answer 3

尝试：

import { TouchableOpacity } from 'react-native';

而不是：

import { TouchableOpacity } from 'react-native-gesture-handler';

将帮助您使用多个按钮。

例如，如果您在TouchableWithoutFeedback内有TouchableOpacity，则在TouchableOpacity is touched时，它只会调用touchableOpacity的OnPress，并且不会称为TouchableWithoutFeedback。

Answer 4

我使用了反应式手机处理程序。安装它，只需替换

import { TouchableOpacity } from 'react-native';

import { TouchableOpacity } from 'react-native-gesture-handler';

示例

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

链接：https：//software-mansion.github.io/reeact-native-gesture handler/docs/component-touchables.html

此库还提供可以直接使用的按钮组件，而不是用touchableOpationa包装文本