Mehrere Touch-Responder/Aktionen gleichzeitig

Question

Ich habe 2 Paare von <View> innerhalb <TouchableNativeFeedback>, die als 2 separate Zähler, die bei Berührung auslösen, aber ich bin nicht in der Lage, sie gleichzeitig zu berühren.

class TouchBox extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {counter: 0} 
    } 

    render() { 
    return (
     <TouchableNativeFeedback style={{flex: 1}} onPress={() => {this.setState({counter: this.state.counter + 1})}}> 
     <View style={this.props.style}> 
      <Text style={{fontSize: 75}}>{this.state.counter}</Text> 
     </View> 
     </TouchableNativeFeedback> 
    ); 
    } 
} 

Ich habe versucht zu tun:

<View style={this.props.style} onStartShouldSetResponder={() => {this.setState({counter: this.state.counter + 1}}> 
      <Text style={{fontSize: 75}}>{this.state.counter}</Text> 
</View> 

aber es hat nicht funktioniert.

Meine Hauptkomponente ist:

class TouchTest extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <TouchBox style={{backgroundColor: 'skyblue', width: 200, height: 100, alignItems: 'center'}}/> 
     <Text>Test</Text> 
     <TouchBox style={{backgroundColor: 'skyblue', width: 200, height: 100, alignItems: 'center'}}/> 
     </View> 
    ); 
    } 
} 

Edit: Ich möchte in der Lage sein, sowohl der Zähler gleichzeitig zu berühren und sie arbeiten. Gerade jetzt, wenn ich einen berühre, wird es der einzige Responder und blockiert alle anderen Berührungen, während mein Finger gedrückt wird.

Answer 1

Ansicht, die außerhalb des TouchableNativeFeedback ist muss wahr zurück, wie folgt aus: -

<View style={this.props.style} onStartShouldSetResponder={(e) => {this.setState({counter: this.state.counter + 1}) return true;}}> 
      <Text style={{fontSize: 75}}>{this.state.counter}</Text> 
</View>