 |
|
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: 1807 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);
}
}
|
 Link para compartilhar na Internet ou com seus amigos: |
React Native ::: React Native - Componentes Visuais ::: Button |
Como detectar um clique em um botão do React Native e exibir uma mensagem AlertQuantidade de visualizações: 1258 vezes |
|
Nesta dica mostrarei como detectar um evento onPress em um botão do React Native e exibir uma mensagem usando o método alert() do componente Alert. Note que o evento onPress é disparado quando o usuário pressiona o botão. Veja o código completo para o exemplo: ----------------------------------------------------------------------
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 {View, Button, Alert} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={{backgroundColor: '#eeeeee',
padding: 30}}>
<Button onPress = {() =>
Alert.alert("Bem-vindo(a) ao React Native")}
title="Clique" />
</View>
);
}
}
Veja que este exemplo define o código a ser chamado quando o botão for clicado diretamente em sua declaração. Em outras dicas dessa seção você verá como clicar no botão e chamar uma função JavaScript residente fora da declaração do botão. |
React Native ::: React Native - Componentes Visuais ::: Image |
Como exibir imagens e fotos em aplicações React Native usando o componente ImageQuantidade de visualizações: 965 vezes |
|
O componente Image do React Native é usado quando queremos carregar imagens e exibí-las em nossas aplicações mobile. Este componente possibilita a exibição de diferentes tipos de imagens, incluindo imagens remotas (em um site, por exemplo), recursos estáticos, imagens em locais temporários e imagens a partir do armazenamento local, tais como imagens da câmera. Veja uma aplicação React Native completa que mostra como carregar uma imagem da internet e exibí-la em um componente Image. Note que a imagem a ser exibida é a logo do nosso site. Eis o código: ----------------------------------------------------------------------
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, View} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={{padding: 10, flexDirection: 'column'}}>
<Image style={{width: 237, height: 49}} source={{uri:
'https://www.arquivodecodigos.com.br/logo2.jpg'}} />
</View>
);
}
}
É importante observar que, quando a imagem estiver sendo carregada de uma rede (internet, por exemplo) ou via propriedade data, temos que, manualmente, indicar as dimensões da imagem a ser exibida. |
Veja mais Dicas e truques de React Native |
Dicas e truques de outras linguagens |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
