Introdução ao React Native – Parte 3

Nas primeiras duas partes desta série sobre React Native nós aprendemos o que é, para que serve e como podemos criar um app em React para dispositivos móveis e depois estudamos sobre tags e estilos JSX e componentes de informações nas telas React Native.

Hoje, nós vamos ver mais alguns conceitos básicos e ir além, avançando ainda mais!

Parametrizando um componente

Outro conceito importante de componentes em React é parametrização. Quando usamos um mesmo componente em diferentes partes da nossa aplicação, podemos configurar ele passando parâmetros ao mesmo, da mesma forma que faríamos com tags HTML na web.

Mas para que isso seja possível, devemos modificar a nossa função Header (dentro de Header.js) para que ela espere um objeto de propriedades e, a partir desse objeto, pegamos as informações que queremos e as juntamos ao JSX usando chaves {}.

No exemplo acima, estaremos esperando as propriedades do componente como parâmetro da função e usamos somente uma propriedade hipotética title (entre chaves, para ocorrer o evaluation da propriedade) para tornar o Text do componente configurável.

Mas como que passamos essa configuração?

Da mesma maneira que faríamos com HTML comum, diretamente onde chamamos a tag Header no módulo App.js, passando a propriedade title.

O resultado é que o título renderizado na página agora é modificado de acordo com a propriedade title da tag Header.

Header configurável
Header configurável

Agora experimente colocar várias vezes o componente Header na sua App.js, apenas mudando o title entre eles, para ver o que acontece.

Esse é o poder de componentes parametrizados!

Criando apps para empresas com Android

Estados do componente

Outro conceito muito importante de aprender antes que possamos de fato começar a construir apps em React Native é o conceito de Estados.

Estados são a forma como o React permite que os componentes mantenham informações alteradas/inputadas/manipuladas pelo usuário na interface. Por exemplo, e se quisermos alterar um contador a cada toque de um botão? Para conseguirmos fazer isso precisamos manter o estado desse contador entre um clique e outro, certo?

Para fazer isso, vamos modificar o nosso App.js para criar uma variável de contagem e imprimi-la na tela. Essa declaração e toda a lógica de interface é da mesma forma que você faria com JavaScript tradicional.

Se você olhar lá na aplicação verá que está marcando 0 cliques. Isso mostra como podemos imprimir uma variável local na interface. Mas e como fazemos para, a cada toque em um botão, esse contador aumente?

Para colocar um botão, mesmo que ainda sem comportamento, existem diversas formas de fazer, sendo que vou optar por uma que eu acho bem simples e, mais tarde, a gente opta por uma mais complexa. Primeiro passo, import do TouchableOpacity.

O próximo passo, é usar este novo componente TouchableOpacity na nossa interface, colocando-o onde você julgar mais conveniente.

Note que declarei um estilo para ele, que ainda não existe na nossa App.js, então trate de adicionar, sendo que o código abaixo do estilo button é apenas uma sugestão.

Certo, com esses códigos novos, temos um botão na tela com a aparência abaixo, mas que ainda não faz nada, certo? Ou quase, porque se você clicar nele, vai notar que ele tem o comportamento de mudar levemente a opacidade para mostrar que foi clicado, o que já é alguma coisa…

TouchableOpacity
TouchableOpacity

Para que nosso botão dispare uma ação, primeiro devemos criar uma function JavaScript dentro da function App (sim, é uma function dentro de outra function, não se preocupe).

E no nosso botão/TouchableOpacity, vamos referenciar essa function na propriedade onPress dentro de chaves.

No entanto, se você executar esse código, verá que ele imprime o contador incrementalmente a cada toque do botão no console, mas que na interface, ele não está mudando o contador impresso.

Isso porque ainda não estamos usando estados!

Para usar estados, primeiro precisamos adicionar mais um import da lib do React, o useState, como abaixo.

Depois, poderemos usar essa function useState para armazenar estados da nossa aplicação ao invés de armazenar variáveis comuns. Isso vem com um pró e um contra. A vantagem é obviamente o fato de manter a nossa interface plugada na nossa lógica de front-end. A desvantagem é referente ao conceito de imutabilidade.

Todo estado é imutável em React, isso quer dizer que não podemos manipular um estado já existente, mas ao invés disso, nós temos de usar uma função para criar um novo estado sobre o antigo. Isso é feito usando a function useState que importamos agora há pouco, quando chamada (passando o valor inicial do estado) retorna um array com duas posições: na primeira, o valor atual do estado, na segunda, a função que “altera” o mesmo.

No código acima, eu não declaro mais uma variável contador simples, mas carrego um contador e uma função de mudança de estado usando o useState e passando a ele o valor inicial do estado (0 neste caso), utilizando as duas na function de increment.

Com isso, já temos o nosso “press and increment” funcionando, independente se você testa no seu smartphone ou no simulador!

Botão funcionando
Botão funcionando

Curso React Native

Reorganizando nosso app

Até agora estávamos fazendo tudo apenas em nosso App.js, mas isso não é nada profissional e já está na hora de começarmos a complicar um pouco mais as coisas. Vamos começar criando uma pasta Pages na raiz do nosso projeto e dentro desse pasta Pages o nosso arquivo Header e um novo arquivo Home.js.

Dentro do Home.js vamos colocar o conteúdo que antes era do nosso App.js. Isso porque vamos manter no App.js apenas elementos essenciais para inicialização da aplicação, ao invés de uma tela em específico.

Então, voltando ao App.js, vamos apenas incluir nele uma chamada para a tela inicial, enquanto não aprendemos a rotear telas…por enquanto…

A ideia aqui é que você coloque todas as páginas/telas da sua aplicação dentro de Pages. Opcionalmente, você pode ainda criar subpastas dentro de Pages, para ter subdivisões.

Para exercitar este conceito e antes de avançarmos para tópicos mais avançados, crie mais um arquivo dentro de pages, chamado Form.js, como abaixo.

Ele não tem nada demais, mas exercita a componentização, pois usa o componente Header que criamos anteriormente e deixa espaço para que futuramente a gente coloque conteúdo nessa tela.

Mas se nosso App.js aponta diretamente para a tela Home.js, como faremos para testar essa Form.js? Por enquanto, mude manualmente no App.js para importar para Form.js e futuramente vou mostrar como você pode transicionar de uma tela para outra através do clique de um botão.

E com isso, nós encerramos esta terceira parte da nossa série sobre React Native, e se você começou a perceber, com o conteúdo dessa aula abre-se um universo de possibilidades pois já conseguimos ter um app dinâmica, então já aproveita e emenda a quarta parte!

Gostou do tutorial de hoje? Conheça meu curso online de Node.js clicando no banner abaixo.

Curso Node.js e MongoDB

Publicado por

Luiz Duarte

Pós-graduado em computação, professor, empreendedor, autor, Agile Coach e programador nas horas vagas.