React Native: View onPress não funciona


104

Estou enfrentando um problema estranho. No meu app nativo react, se eu definir o onPressevento para Viewele não é disparado, mas se eu definir o mesmo para Textdentro View, ele dispara. O que estou perdendo aqui?

<View style={{backgroundColor: "red", padding: 20}}>
  <Text onPress={()=> {
    console.log('works');
    }
  }>X</Text>
</View>


<View style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log('does not work');
    }
  }>
  <Text>X</Text>
</View>

Porque isto é assim? Este é um problema com o React Native? Estou usando a versão 0.43

Respostas:


175

Você pode usar TouchableOpacitypara o onPressevento. Viewnão fornece onPresssuporte.

<TouchableOpacity style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log('does not work');
    }
  }>
  <Text>X</Text>
</TouchableOpacity>

4
A documentação de referência completa está aqui: facebook.github.io/react-native/docs/touchableopacity.html
Muhammad Hannan

O onPress pode trabalhar com uma função assíncrona como retorno de chamada? Não vejo menção disso na documentação oficial.
ryanwebjackson

27

Você pode envolver a visualização com um TouchableWithoutFeedbacke, em seguida, usar onPresse amigos como de costume. Além disso, você ainda pode bloquear pointerEventsdefinindo o atributo na visualização filho, ele até bloqueia eventos de ponteiro no pai TouchableWithoutFeedback, é interessante, essa era minha necessidade no Android, não testei no iOS:

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html

<TouchableWithoutFeedback onPressIn={this.closeDrawer}>
    <Animated.View style={[styles.drawerBackground, styleBackground]} pointerEvents={isOpen ? undefined : 'none'} />
</TouchableWithoutFeedback>

2
Testado em iOS e funciona muito bem. Ambos com toque sem feedback e realce tocável
habitado em

Obrigado por compartilhar @habed! O pointerEventsNonebloco do filho pressiona o pai que envolve o filho?
Noitidart 01 de

6

Você pode usar TouchableOpacity, TouchableHighlight, TouchableNativeFeedback para fazer isso. O componente de visualização não fornece onPress como adereços. Então você usa isso em vez disso.

<TouchableNativeFeedback
        onPress={this._onPressButton}
</TouchableNativeFeedback>

OR

<TouchableHighlight onPress={this._onPressButton}>
</TouchableHighlight>

OR

<TouchableOpacity onPress={this._onPressButton}>
</TouchableOpacity>


2

Como alternativa, você também pode fornecer onStartShouldSetResponder à sua visualização, assim:

<View onStartShouldSetResponder={() => console.log("View click")}>
  // some code here
</View>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.