![]() |
|
||||
Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica. |
|||||
Você está aqui: React Native ::: React Native - Componentes Visuais ::: Image |
Como detectar um clique em uma imagem no React Native usando os componentes Image e TouchableOpacityQuantidade de visualizações: 2008 vezes |
|
Em algumas situações nós temos imagens no React Native e gostaríamos de efetuar alguma tarefa quando o usuário pressionar essas imagens, ou seja, detectar um evento onPress em um componente Image. O problema é que o componente Image, pelo menos até a versão 0.65 do React Native não possui o evento onPress. Por esse motivo, sempre que quisermos que uma Image reage ao evento onPress, temos que colocá-la dentro de um TouchableOpacity, que pode ser usado para envolver qualquer componente que pretendemos fazer responder ao toque na tela do aplicativo. Veja o exemplo completo no qual temos uma Image dentro de um TouchableOpacity. Quando o usuário clicar (pressionar) na imagem, uma mensagem Alert será exibida: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
import React, {Component} from 'react';
import {Image, Alert, TouchableOpacity, View}
from 'react-native';
type Props = {};
export default class App extends Component<Props> {
// caminho e nome da imagem
imagem = require('./imagens/carro2.jpg');
render(){
return (
<View style={{padding: 10, flexDirection: 'column'}}>
<TouchableOpacity onPress = {() =>
this.exibir_mensagem("A imagem foi clicada")}>
<Image source={this.imagem} />
</TouchableOpacity>
</View>
);
}
// permite exibir uma mensagem
exibir_mensagem(texto){
Alert.alert(texto);
}
}
|
|
|
Veja mais Dicas e truques de React Native |
Dicas e truques de outras linguagens |
|
JavaScript - Como calcular o coeficiente angular de uma reta em JavaScript dados dois pontos no plano cartesiano |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |





