Estou desenvolvendo um aplicativo de anotações Markdown chamado Inkdrop, e disponibilizei recentemente um novo aplicativo mobile para iOS e Android. Ele foi criado usando React Native, uma estrutura para o desenvolvimento de aplicativos móveis nativos usando JavaScript e React.
Eu aprendi muito com esse projeto sobre como criar aplicativos mobile de alta qualidade com React Native, e gostaria de compartilhar algumas dicas nesse artigo. Espero que esse conteúdo seja útil para todos aqueles que já desenvolveram ou que estão em processo de desenvolvimento de um aplicativo móvel React Native.
Aqui está um resumo sobre o que vamos cobrir nesse artigo:
- Escolha bibliotecas de terceiros com cuidado
- Evite usar extensões nativas quando possível
- Suporte para interface de usuário (UI)
- Adicione suporte para tablets
- Mantenha o desempenho
- Faça uma tela inicial perfeita
- Não use CodePush
Escolha bibliotecas de terceiros com cuidado
Ao contrário do UIKit no iOS, o React Native não fornece muitas possibilidades para a criação de UI’s legais ou navegações. Isso acontece pelo fato dele ser focado no fornecimento de uma renderização básica da interface do usuário e acesso à API do dispositivo com React e JavaScript.
Então, você tem que fazer muitas coisas para que ele se pareça realmente com aquilo que você deseja. Honestamente, não teria sido possível construí-lo sem usar os ótimos módulos para React Native que estão disponíveis por aí. Vou te dizer quais bibliotecas eu usei para o meu aplicativo.
Navegação
Como você pode ver acima, meu app tem uma sidebar que pode ser ativada deslizando da borda esquerda da tela ou tocando em um botão da barra de ferramentas, stack screens e modal screens (empilhar telas e telas modais).
Para realizar esse roteamento e navegação, meu aplicativo adota react-navigation. Você pode implementar roteamento flexível e transições suaves de tela com facilidade. Mas observe que ele não fornece telas modais. Você deve usar o react-native-modal, que fornece telas modais react-native melhoradas, animadas e personalizáveis.
Eu recomendo que você os use se não precisar de padrões de roteamento muito especiais. Se você fizer isso, confira este ótimo artigo.
Ricos componentes de interface de usuário multiplataformas
iOS e Android têm diretrizes diferentes de Interface do Usuário. É difícil e demorado implementar botões, tabelas e cabeçalhos em conformidade com cada plataforma.
Existem diversos componentes de terceiros com boa aparência por aí, mas é necessário ter muitos módulos instalados no seu aplicativo, o que eventualmente fará com que ele apresente bugs e problemas.
O NativeBase, uma coleção de componentes essenciais de interface de usuário para o React Native, resolve esse problema. É algo parecido com o Twitter Bootstrap para React Native. Ele fornece não apenas um conjunto básico e bem projetado de componentes prontos para uso, mas também alguns componentes de layout.
Você não precisa se preocupar com a plataforma em que seu aplicativo está, porque os estilos dos componentes são alternados automaticamente.
Evite usar extensões nativas o máximo possível
Como o React Native é uma tecnologia de ponta, a API frequentemente muda. Isso geralmente quebra bibliotecas de terceiros. Se um problema reside no lado nativo, resolvê-lo será um inferno. É sempre difícil para os autores da biblioteca por que:
Descobrimos que a maioria dos projetos de software livre React Native foi escrita por pessoas que tiveram experiência com apenas um ou dois. (Airbnb)
Nem sempre são profissionais de todas as plataformas. Eu criei um plug-in nativo SQLite3 para o React Native e também achei que manter as duas plataformas é bastante difícil. Se você decidir instalar uma biblioteca com pontes nativas, você precisa manter isso em mente.
Muitas vezes, tive que procurar no código nativo para depurar problemas, então você precisa ter experiência com iOS e Android. Evitar essas bibliotecas nativas de ponte seria bom para minimizar essa dor.
Aqui estão todas as bibliotecas com pontes nativas usadas no meu aplicativo:
react-native-wkwebview-reborn – WKWebView para iOS
• react-native-image-picker – Permite usar a interface nativa do usuário para selecionar mídia da biblioteca de dispositivos ou diretamente da câmera;
• react-native-japanese-tokenizer (feita por mim) – Japanese Tokenizer
• react-native-sqlite-2 (feita por mim) – SQLite3
Menos dependências em extensões nativas facilitariam a manutenção do aplicativo para as versões futuras do React Native.
Suporte para Interface do Usuário (UI)
O suporte a temas é um desafio para os apps React Native, porque tudo depende de como você processa as visualizações. Ao contrário do iOS UIKit, o React Native não fornece proxies de aparência, portanto, você precisa de um equivalente para o React Native.
Felizmente, o NativeBase tem suporte de temas. Você pode personalizar facilmente a aparência dos componentes do NativeBase, definindo apenas as variáveis.
Mas isso não é suficiente, por que ele não funciona para componentes que não estão no NativeBase. Então, eu usei react-native-extended-stylesheet, que permite que você use variáveis no seu StyleSheets, como:
Muito fácil. Agora, você pode definir a aparência para todos os seus componentes!
Obs: é necessário reiniciar para aplicar um novo tema, porque o NativeBase StyleProvider armazena em cache os estilos e, atualmente, não há como liberar.
Adicione suporte para tablets
Se você quiser fazer um layout de duas colunas para tablets, é fácil:
No entanto, são necessários alguns hacks para oferecer suporte à alternância de layouts com base no tamanho da tela, porque há um problema no qual o [Dimensions] não é compatível.
Você sempre obtém as mesmas dimensões com o [Dimensions.get], mesmo se o aplicativo estiver em “Split View” (exibição dividida) ou “Slide Over” (deslizar sobre) em um iPad.
Então, você precisa obter um tamanho real da window de alguma forma.
Para fazer isso, é necessário ter uma visão que seja a mais externa das suas visualizações com o estilo [flex: 1]. Defina o evento [onLayout] para obter seu tamanho e lembre-se de algum lugar como uma Redux store.
Aqui está o meu código para isso!
Mantenha o desempenho
Use PureComponents
À medida que os aplicativos evoluem, você eventualmente precisará aumentar o desempenho do seu app. No React Native, você pode usar muitas dicas de desempenho para aplicativos React, como as seguintes:
Uma dica básica comum para manter seu aplicativo rápido é usar shouldComponentUpdate( ) para que os componentes evitem renderizações duplicadas e desnecessárias. O React.PureComponent é útil para isso, porque ignora automaticamente a renderização se seus objetos não forem alterados.
Pessoalmente, prefiro usar o padrão recompose [pure] para componentes de ordem superior (HOC).
Não faça funções de retorno de chamada no Render( )
Agora você tem o PureComponents, mas não faz sentido se você tiver um método render( ) como esse:
Como uma função transmitida ao onPress é criada toda vez que uma CommentList está sendo renderizada, o Comment (PureComponent) determina que seus props sejam sempre alterados. Portanto, renderizar uma lista de comentários custa muito, pois todos os comentários são renderizados novamente. Para evitar isso, não crie retornos de chamada.
Se a sua lista for longa, o FlatList é altamente recomendado.
Faça uma tela inicial perfeita
Se você tentou configurar uma tela inicial no React Native, você pode ter experimentado a ocorrência de uma tela branca antes do carregamento do seu conteúdo.
Se seu aplicativo tiver um fundo branco, isso geralmente não é muito perceptível, mas ainda assim é um problema.
Vou te indicar este artigo, que mostra o caminho para criar uma tela inicial perfeita para iOS e Android. Muito útil!
Não use CodePush
O CodePush te permite adicionar facilmente uma experiência de atualização dinâmica aos seus aplicativos.
Com o CodePush, você não precisa lançar uma versão corrigida na loja todas as vezes, então você consegue corrigir problemas rapidamente.
Mas eu não recomendo que você o use. Em primeiro lugar, o tempo de revisão da App Store é muito curto. Ele requer apenas 2 dias em média, o que geralmente é rápido o suficiente para o seu negócio.
Em segundo lugar, ele torna seu aplicativo complicado, porque a biblioteca CodePush é um módulo nativo. Como mencionei acima, você deve evitar a adoção de extensões nativas para manter seu aplicativo simples e limpo.
Eu espero que você tenha achado este artigo útil!
Este é um artigo traduzido, você pode acessar a versão original em inglês aqui.
Todos os créditos para o autor: Takuya Matsuyama
Last modified: 06/02/2020