Criação de um Botão de Toque no React Native com o TouchableHighlight

Aula 05

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16

Summary

# Resumo do Tutorial sobre Imagens e Botões no React Native

## Carregando Imagens com URI

- Para carregar uma imagem a partir de um link, use um objeto com a chave `uri` e forneça o URL.
- **Importante:** A imagem deve estar em um servidor que suporte HTTPS, pois o React Native não aceita HTTP. 

### Exemplo de Carregamento

```javascript
const imageSource = { uri: 'https://example.com/image.png' };

Ao carregar imagens de servidores externos, é necessário especificar manualmente as dimensões, pois ao usar require, as dimensões são definidas automaticamente.

Adicionando Botões

Para adicionar um botão, utilize o componente TouchableHighlight.
Lembre-se de importar o componente no topo do arquivo:

import { TouchableHighlight } from 'react-native';

Implementação do Botão

Adicione o TouchableHighlight sob a imagem.
Dentro, inclua um componente Text.
Defina o estilo usando StyleSheet, incluindo bordas e preenchimento.

Exemplo de Estilo

const styles = StyleSheet.create({
  button: {
    borderWidth: 1,
    borderColor: 'red',
    borderRadius: 16,
    padding: 15,
    backgroundColor: 'antiquewhite'
  },
  buttonText: {
    color: 'purple',
    fontWeight: 'bold',
    fontSize: 20
  }
});

Para fazer algo ao clicar no botão, adicione a propriedade onPress e defina uma função.

Exemplo de Função no onPress

<TouchableHighlight onPress={() => alert('Botão pressionado!')}>
  <Text style={styles.buttonText}>Clique aqui</Text>
</TouchableHighlight>

Considerações Finais

Sempre gebruik um estilo apropriado para suas imagens e botões.
Utilize estados do React para manter informações dinâmicas, como cliques de botões.

Video Transcript

Vamos agora ver como é que foi uma imagem usando o link. Se a gente tivesse uma imagem aqui, vamos ver se a imagem eu tinha uma imagem aqui. Vamos ver se eu copio o link aqui, se vê se funciona. Vamos copiar esse link em vez de rodar, de carregar a imagem do local, vamos por o link. O jeito que você faz aqui é, em vez de require, você vai aqui e adiciona um object. E nesse object você tem a chave URI, URI aqui, aí você dá o URL, né? Aí vai dar assim. Vamos ver se funciona. Eita, cada imagem. Então um detalhe aqui, se você rodar, se você carregar imagens de outro servidor, olha aqui, HTTP, dois pontos. Não funciona no React Native aqui, se não tiver o HTTPS, se não for protegido, HTTPS não vai rodar, não vai carregar. Então eu vou aqui, eu achei outra imagem que é um servidor de HTTPS. Se que é protegido, então ter o card lá, tá tudo bem, o React Native vai aceitar. Vamos copiar o link lá. Note HTTPS agora. É um detalhe que quase ninguém nota. Já tive, tava ajudando as pessoas nesse negócio e notei, eles estavam tentando adicionar a imagem e notei, o que é que tá acontecendo nisso? Ah, porque a imagem não é do servidor HTTPS. Vamos ver como é que tá aqui. Aí, agora tem imagem. Então lembre, se for rodar a imagem de outro servidor, tem que ter HTTPS. Só um... Lembre-te aqui, se você rodar a imagem, carregar a imagem do servidor e não tiver estilo aqui, eu removi o estilo. Note que não aparece. Se você ler a documentação do componente de imagem no React Native, ele diz que se você adicionar a imagem localmente usando o require, as dimensões são automaticamente incluídas. Então ele vai saber com as dimensões. Se você carregar a imagem de um website servidor de fora, diz aqui que você precisa manualmente especificar as dimensões. Por isso que não aparece. Então vamos lá e adicionar o estilo de volta. Tá bom? Então lembre-te isso. Sempre bom, define o width and height, as dimensões aí da imagem. Tá aí. Note que essa imagem é uma imagem diferente, né? Eu escolhi outra. É diferente da outra aqui. Ah, vamos mudar aqui esse negócio. Roda automaticamente. É. Eu acho que essa imagem não é a quadrada, por isso que não tá parecendo tudo. Vamos ver. Sei lá. Enquanto não é. Vamos continuar. Então é isso como é que se adicionar a imagem com o componente image react-native. É só botar a imagem, adicionar a propriedade do source. Você pode pôr URI como object ou require, né? Normalmente, melhor pôr localmente. Vamos botar local require, mesmo diretório. React logo, tng. Lá. Tá aí. Tá aí. Tá aí. E propriedade estilo, pra definir o estilo da imagem, vamos definir dimensões, né? Agora vamos aprender a adicionar um negócio de talk, fazer um espécie de botão. Então o componente que a gente vai usar nesse caso, vamos usar o Totable Highlight. Ok? Se lembre, senso que adicionar o componente na sua... Lembre no topo do arquivo, vai lá, adiciona os componentes pra importar. Nesse caso é do react-native, então põe lá. Totable Highlight. Vamos pôr o Totable Highlight aqui, debaixo da imagem. Abre a negócio, o tag. Totable Highlight. Nesse caso, dentro do botão, vai ter um texto, né? Se não, não vai ter nada, a gente não sabe. O que é que a gente vai clicar? Clicar nada? Então vamos botar um texto lá. Lembre-se que se você digitar qualquer texto, tem que pôr dentro da tag de text. A tag ou se falar mais certo, o componente. Componente. Vamos pôr aí. Desse jeito já tá bom, já tá lá, não tem nenhum estilo, por isso que parece só a texta. Mas tá lá. Não acontece nada quando eu clico, tô clicando, não acontece nada. Porque a gente não adicionou a propriedade pro Totable Highlight pra fazer alguma coisa. Vou adicionar um estilo aqui. Esse botão é muito feio. Vamos botar style, né? Adiciona a propriedade do componente. Vamos botar styles, porque se referência a folha aqui, style sheet, folha de styles que a gente criou. Vamos adicionar, sei lá. Vamos chamar de botão. A gente vai definir esse, bota botão a borda. Vamos botar uma borda aí. Botão, define a chave e o valor é um objeto de JavaScript. Eu boto a vírgula pra calção. Se esquecer depois, não dá erro. Não dá erro aí. Vamos pôr botão e eu quero pôr um botão aí. Vamos pôr botão as duas. Vamos ver o que acontece. Vamos botar um padding que está muito feio. O botão, o texto está se rossando com a borda. Vamos botar uns pads de 20. Vamos ver. É muito? Não. Está bom aí. Está demais. Vamos botar um pê. 15, 15. Está bom. Deixa assim, né? Eu não vou botar outras coisas. Se quiser, você gosta de mexer com estilo, pode botar color, essas coisas. Vou botar um color red aí pra você. Pode até botar, eu acho, Gradius. Bota o radius, 16. Veio. Adicionei uma cor vermelha pra borda e botou uma borda circular com borda radius. Tem várias propriedades aí, se quiser explorar. Tem também background color pra mudar o background, a cor. Vamos botar aí um... Eu gosto dessa cor aqui, antique white. Sei lá, acho legal. Vamos ver. Deixe aí. Agora pra mudar a cor do texto, você tem que ir no texto. A gente mudou o botão, mas vamos no texto. O texto, né? A gente tem que adicionar o style pro texto. Aí vamos botar aí... Vamos ver. Vamos criar um estilo também. Texto do botão. Sei lá, um texto do botão. Essas coisas aí. Vamos definir texto do botão. Vamos botar um outro cor. Sei lá. Color... Será que tem purple? Roche. Eita. Tá aí. Vamos botar um bold font-weight. Aí. Vamos aumentar... tamanho, bota 20. Font size. É, legal, né? A gente brincar com os estilos. Mas vamos continuar agora. Então tem esse botão aí, parre nada quando eu clico. Esse touchable highlight. A gente toca o que? No celular, né? Smartphone. A gente usa nossos dedos pra tocar. Não é mais botão, né? Tá clicando em nada. Só tela de vídeo. Vamos ver aqui. A gente definiu os estilos, mas não tá acontecendo nada. A gente tem que adicionar a propriedade. É o componente touchable highlight, que é chamado on press. Essa propriedade, quando você clica, vai fazer o que você definida. Lá. Normalmente, eu tenho muita coisa aqui. Se a linha for muito longa, eu gosto de botar tudo no outro linha. Aí você põe o indentation aqui. A indentação. E às vezes, se quiser botar esse cara ali, pode por esse aqui. Aí o que fica muito melhor de visualizar. Aí botei um on press, né? Deu erro. O que aconteceu? É eu não defini nada no on press. Normalmente, você define a função aqui, só o nome, e aí você define fora aqui. Mas agora, vamos só definir a função lá, mesmo. Vamos usar a função aqui. Anônima do IS6. Isso aqui é a mesma coisa de falar function e essas coisas. Return qualquer coisa. A mesma coisa, não precisa mais falar function. Tira essa palavra e ponha esse negócio aqui. A gente chama error, error function. Error function. Como se fosse a flash, né? Função de flash. Esse negócio que parece um negócio apontando. Aí não precisa mais falar return aqui, nem esses negócios. Só opcional, a gente. A maioria de casos a gente põe. Aí vamos fazer esse negócio aqui. Vamos fazer... O que a gente vai fazer quando clicar o botão? Vamos ver... Eu acho que tem uma alerta. Mas vamos fazer um... Uma coisa aqui. Quando clicar o botão, vamos de... Vamos mudar... Vamos mudar o texto? Clica eu. Vou fazer uma coisa aí. Para isso a gente tem que manter... O tal negócio não variável, né? Mas o negócio, se você... React tem o estado do componente e tem as propriedades que foram dados pelo pai desse componente, né? Eu estou...

Comentários

Nenhum comentário ainda (loading...)

From YouTube

Nenhum comentário ainda (loading...)

Gostou da aula? 😆👍

Apoie nosso trabalho com uma doação:

Quero contribuir