如何在 React Native 中同时启用多个按钮的触摸?

IT技术 javascript ios reactjs react-native multi-touch
2021-03-29 14:04:16

我需要当我触摸并按住一个按钮时,我也应该能够触摸按钮 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)。我希望我可以在录制视频时点击翻转相机按钮。

4个回答

使用 View 组件的 onTouchStart、onTouchEnd 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>
如果在按下两个按钮时设置布尔值,这对多点触控不起作用,它将始终保持 (true false) 或 (false true) 似乎它们只是相互抵消。我将尝试使用 pan 响应器来查看是否可以使用它。facebook.github.io/react-native/docs/panresponder.html
2021-05-26 14:04:16
不幸的是,这似乎只适用于 iOS 而不是 Android
2021-06-20 14:04:16

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

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>

干杯!

更新

由于原生 react 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>
        );
    }
}
我试了一下, onTouchStart 中的元素总是被记录为第一个被触摸的按钮。我在每个按钮上添加了左右两边的道具并记录下来,如果我按住右边的按钮然后点击左边的右边总是被记录下来。
2021-06-19 14:04:16

我使用了 react-native-gesture-handler。安装它并更换

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/react-native-gesture-handler/docs/component-touchables.html

这个库还提供了可以直接使用的按钮组件,而不是用 TouchableOpacity 包裹 Text

尝试:

import { TouchableOpacity } from 'react-native';

代替:

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

将帮助您进行多个按钮。

比如你在aTouchableOpacity里面有一个TouchableWithoutFeedback,when TouchableOpacity is touched,它只会调用TouchableOpacity的onPress,而不会调用onPress的TouchableWithoutFeedback