当按下另一个可触摸的不透明度时，一个可触摸的不透明度不会按下

Question

I was making a program in React native in which there are two buttons which when pressed will increase a tap counter. The problem is when one button is pressed the other won't respond and doesn't increase the counter. The button is made with Touchableopacity and the action is done by onPress.

<View style = {{flex:1,flexDirection:'row',justifyContent:'center'}}>
            <View>
            <TouchableOpacity style = {styles.button}
            onPress = {() => this.start() }
            >
              <Text style={styles.buttonText}>
                Tap
              </Text>
            </TouchableOpacity>
            </View>
            <View>
            <TouchableOpacity style = {styles.button}
            onPress = {() => this.start() }>
              <Text style={styles.buttonText}>
                Tap
              </Text>
            </TouchableOpacity>
            </View>
          </View>
</View>

Answer 1

The problem i resolved by using and onTouchStart instead of and onPress

Answer 2

Try using onTouchStart instead of onPress .

So change:

<TouchableOpacity style={styles.button} onPress={() => this.start()}>

To:

<TouchableOpacity style={styles.button} onTouchStart={() => this.start()}>

The reason you want to to this is because while one button is still being pressed, the onPress action on another button won't fire until you stop pressing the original button.

Answer 3

I don't know what version of React Native the previous posters were using but "onTouchStart" is only available on View components not on Touchable Opacity.

Wrapping my touchable in a view mimics onPress behavior very well

<View onTouchStart={myEventHandler}>
  <TouchableOpacity>
    <Text>My Touchable Button</Text>
  </TouchableOpacity>
</View>