Question

我在<View>内有2对<TouchableNativeFeedback>，它们作为2个单独的计数器触发时触发，但我无法同时触摸它们。

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

我尝试过：

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

但它不起作用。

我的主要成分是：

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

编辑：我希望能够同时触摸两个计数器并让它们工作。现在，如果我触摸它，它就成为唯一的响应者，并在我的手指按下时阻止所有其他触摸。

Answer 1

查看TouchableNativeFeedback之外的内容需要返回true，如下所示： -

<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>

多个触摸响应者/动作同时进行

1 个答案: