Criando aplicativos móveis com React Native: design dinâmico e responsivo

Os aplicativos móveis tornaram-se uma parte essencial do nosso dia a dia, trazendo comodidade e funcionalidade ao nosso alcance. À medida que a demanda por aplicativos móveis cresce, aumenta também a necessidade dos desenvolvedores produzirem aplicativos de alta qualidade e fáceis de usar, compatíveis com múltiplas plataformas. É aqui que entra o React Native, um poderoso framework que permite aos desenvolvedores criar facilmente aplicativos móveis multiplataforma.

Neste artigo, exploraremos como conseguir o que foi dito acima com foco no design móvel e responsivo. Além disso, mergulharemos nos fundamentos do React Native, incluindo seus principais conceitos e componentes, e discutiremos as melhores práticas para designs responsivos, adaptados a diferentes tamanhos de tela.

Quer você seja um desenvolvedor iniciante ou experiente em busca de expandir seu conjunto de habilidades, este artigo fornecerá o conhecimento e as ferramentas necessárias para criar aplicativos móveis usando React Native.

O que é React Native?

Também chamado de RN, React Native é um framework JavaScript que permite aos desenvolvedores criar aplicativos móveis renderizados nativamente para iOS e Android com a mesma base de código, resultando em menos tempo e recursos. React Native usa componentes e APIs semelhantes aos usados ​​​​no React, a popular biblioteca JavaScript para aplicativos da web. React Native foi lançado pelo Facebook e é amplamente utilizado por desenvolvedores em todo o mundo.

Outro ponto que deve ficar claro é a diferença entre React e React Native. Ambos são frameworks baseados em JavaScript criado pelo Facebook, mas têm usos e capacidades diferentes. Enquanto React é uma biblioteca para criar UIs web usando HTML e CSS principalmente para aplicativos de página única, React Native é uma estrutura para criar aplicativos móveis nativos usando componentes pré-construídos para mapear elementos de UI nativos para iOS e Android.

Além disso, o React Native permite a reutilização de código e compatibilidade entre plataformas, enquanto o React é frequentemente usado em conjunto com outras bibliotecas ou estruturas, como Redux ou Next.js.

Por que você precisa do React Native?

Como já mencionei, o ponto chave do React Native é que ele permite escrever código uma vez e implantá-lo nas plataformas iOS e Android, economizando tempo e esforço no desenvolvimento. Abaixo explico alguns dos principais motivos para aprender React Native:

1. Desenvolvimento multiplataforma: Com o React Native, os desenvolvedores podem criar aplicativos móveis que funcionam perfeitamente nas plataformas iOS e Android com uma única base de código, o que significa menos tempo e esforço na criação de aplicativos separados para plataformas diferentes.
2. Desenvolvimento mais rápido: React Native permite que os desenvolvedores criem aplicativos móveis com mais rapidez, oferecendo componentes de UI pré-construídos que podem ser facilmente personalizados e suportam recarga a quente, permitindo que você veja as alterações feitas em tempo real.
3. Ótima comunidade e recursos: tem uma comunidade grande e ativa de desenvolvedores, o que significa que há muitos recursos e suporte disponíveis para ajudar os desenvolvedores a aprender e solucionar problemas.
4. Rentável: Como o React Native permite o desenvolvimento multiplataforma, você pode economizar custos reduzindo o tempo de desenvolvimento e eliminando a necessidade de contratar desenvolvedores autônomos para plataformas iOS e Android.
5. Popularidade e demanda: É popular para a criação de aplicativos móveis e muito procurada no mercado de trabalho. Aprender React Native pode abrir novas oportunidades de carreira para você.
   

Resumindo, aprender React Native fornece habilidades valiosas que permitirão desenvolver aplicativos móveis de maneira eficiente, econômica e com alto grau de flexibilidade e personalização.

Reagir nativo: noções básicas

O React Native possui certos fundamentos que são muito semelhantes ao React, bem como seus componentes nativos que diferem dos componentes da web usados ​​no React. Nos parágrafos seguintes falarei sobre os conceitos mais importantes do React Native e seus componentes.

Conceitos e componentes básicos

Componentes: São pedaços de código reutilizáveis, modulares e autônomos; usados ​​para criar interfaces complexas e são classificados em componentes funcionais e de classe. React Native fornece componentes integrados como View, Text, Image, ScrollView, TextInput e muitos mais. Você também pode gerar seus próprios componentes personalizados reunindo os já integrados e adicionando seus próprios estilos e funções, de acordo com suas necessidades.

Props: É uma forma abreviada de propriedades. Servem para passar dados de um componente para outro, fornecendo componentes reutilizáveis ​​e modulares. Props são somente leitura e não podem ser modificados pelo componente que os recebe. Em vez disso, eles são passados ​​de um componente pai para componentes filhos. Isso permite uma hierarquia de componentes onde os dados fluem de cima para baixo e cada componente só precisa se preocupar com suas próprias responsabilidades específicas.

View: É um componente básico da interface do usuário semelhante a um <div> em HTML, usado para gerar um contêiner retangular que, por sua vez, é usado para estilizar outros componentes em seu aplicativo. Ele fornece uma maneira flexível e eficiente de definir o layout da interface do usuário e pode ser aninhado para layouts mais complexos.

Estilos: Eles são definidos por objetos JavaScript que contêm pares chave-valor, onde as chaves representam as propriedades do estilo e os valores estão vinculados a essas propriedades. Para estilizar nossos componentes, podemos usar estilos inline (não recomendado) ou StyleSheet, um componente de estilo React Native semelhante ao CSS, mas com algumas diferenças. Por exemplo, em vez de usar nomes de propriedades hifenizados como font-size em CSS, use nomes de propriedades camelCase como fontSize em React Native.

Melhores práticas

Abaixo compartilho algumas práticas recomendadas ao criar suas aplicações com React Native:

1. Mantenha os componentes simples: É importante manter os componentes simples e focados em uma única tarefa, em vez de tentar fazer muitas coisas ao mesmo tempo. Isso os torna mais fáceis de manter e testar.
2. Use a API StyleSheet: Como já mencionado, a API StyleSheet é uma forma de criar estilos em React Native, semelhante ao CSS. É importante usá-lo para manter seus estilos organizados e otimizados para desempenho.
3. Evite estilos embutidos: Os estilos embutidos podem levar a um desempenho ruim e tornar os estilos mais difíceis de manter. É melhor usar a API StyleSheet para criar estilos, em vez de configurá-los diretamente no componente.
4. Mantenha a administração do estado simples: O gerenciamento de estado pode ser complexo no React Native, por isso é importante mantê-lo o mais simples possível. Use bibliotecas de gerenciamento de estado como Redux ou MobX somente se forem necessárias.
5. Otimizar imagens: As imagens podem ocupar muita memória e diminuir o desempenho do aplicativo. É importante otimizar as imagens compactando-as e utilizando o formato adequado ao dispositivo.
6. Teste o aplicativo em diferentes dispositivos: É importante testar o aplicativo em diferentes dispositivos para ter certeza de que funciona bem e fica bem em todos eles. Utilize simuladores e dispositivos reais para testar a aplicação.
7. Siga as diretrizes específicas da plataforma: iOS e Android têm diretrizes de design e convenções de interface de usuário diferentes. É importante segui-los para que o aplicativo pareça nativo em cada plataforma.
   

Resumindo, seguindo essas práticas recomendadas, você criará aplicativos móveis de alta qualidade, desempenho e fáceis de usar com React Native.

Design responsivo

Tornar um aplicativo React Native responsivo envolve projetar e codificar o aplicativo de forma que ele tenha uma boa aparência e funcione bem em uma ampla variedade de dispositivos com diferentes tamanhos de tela, proporções e resoluções. Aqui estão algumas dicas para tornar seu aplicativo React Native totalmente responsivo:

1. Use Flexbox para design: React Native usa o sistema de layout Flexbox para definir a posição e o tamanho dos componentes. Isso permite criar layouts flexíveis e responsivos que se adaptam a diferentes tamanhos e orientações de tela.
2. Aplicar tamanhos de fonte responsivos: Em vez de usar tamanhos de fonte fixos como pixels, aplique unidades rem ou uma biblioteca de fontes responsivas como react-native-responsive-fontsize para ajustar automaticamente os tamanhos das fontes com base no tamanho e densidade da tela.
3. Use imagens responsivas: usa o componente Image e seu acessório resizeMode para redimensionar imagens com base no tamanho da tela e na proporção da tela. Você também pode usar ferramentas como react-native-responsive-image para dimensionar imagens automaticamente com base no tamanho da tela.
4. Lidar com a API de dimensões: Esta API permite obter o tamanho e a orientação da tela, útil para ajustar o layout e estilo da sua aplicação.
5. Considere o módulo da plataforma: O módulo de plataforma no React Native permite detectar a plataforma em que seu aplicativo está sendo executado (iOS ou Android) e ajustar o estilo e o comportamento de acordo.
   

Shopping list: aplicativo móvel com React Native

Agora é hora de aplicar toda a teoria vista para criar um aplicativo mobile para uma lista de compras. É um aplicativo simples, mas ao mesmo tempo perfeito para explicar como implementar operações básicas com React Native.

Para seguir esta parte com mais facilidade, você deve ter algum conhecimento prévio em:

• TypeScript, HTML y CSS.
• Funções, objetos, arrays e classes.
  

Com isso em mente, é hora de começar a usar o aplicativo. A primeira coisa será criar e lançar um projeto com React Native usando Expo CLI, uma ferramenta de interface de linha de comando para desenvolver e publicar aplicações React Native com o framework Expo.

Insira os seguintes comandos:

Então, para iniciar nosso projeto, apenas executamos npm start. Antes de continuar, o componente react-native-check-bouncy deve ser instalado para os itens da lista, então usamos o comando npm install react-native-bouncy-checkbox. Agora estamos prontos para iniciar a aplicação onde criaremos o modelo de dados, os componentes que formarão nossa lista de compras e as visualizações.

Para criar o modelo de dados, devemos criar uma nova pasta chamada models e, dentro dela, gerar o arquivo item.model.ts, onde por sua vez criaremos o modelo IItem com o id, comprado como booleano para determinar se possui foi comprado ou não e texto para descrevê-lo.

Este é o modelo de dados que usaremos. A seguir, criaremos os diferentes componentes. Para salvar os arquivos dos componentes, você precisa da pasta de componentes e gerar os arquivos dentro dela. Criaremos três componentes: item, itemList e menu (em inglês).

O primeiro componente servirá para representar cada item da lista de compras, e neste componente utilizaremos o modelo de dados criado anteriormente. No componente itemList será utilizado FlatList do react-native com o qual renderizaremos todos os itens de nossa lista de compras. Para adicionar um novo item à lista de compras, criaremos o componente menu.

Agora criaremos a view ShoppingListView, um modal que será exibido para nos permitir adicionar um novo item à lista.

Por fim, pegamos todos os elementos criados e os mesclamos na interface principal do App.tsx. Aqui teremos um array onde armazenaremos os dados do item, bem como a propriedade isShoppingListViewVisible para visibilidade do modal. Para lidar com todos os estados, o conhecido hook React useState será usado.

E desta forma temos agora a nossa primeira aplicação com React Native, algo simples para os itens de uma lista de compras, mas que dá uma ideia clara das bases desta tecnologia. Como você viu, aprendê-lo não é difícil e oferece grandes possibilidades.

Encorajo você a experimentar e continuar aprendendo mais sobre o React Native.

Até mais!