这是我对多个按钮的解决方案
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>
);
}
}