Boa tarde, residentes de Khabrovsk. Hoje, estamos compartilhando com você a tradução de um artigo cuja tradução foi preparada especificamente para o primeiro lançamento do curso
ReactJS / React Native-Developer . Boa leitura.
Se você é novo no mundo React Native, sabe que ele tem algumas armadilhas que você gostaria de evitar. Em alguns casos, você terá que fazer uma escolha antecipada sem ter a menor idéia de como ou o que isso afetará.
Abaixo, compilei uma lista das melhores dicas práticas da minha experiência pessoal que espero que sejam úteis para você :)
Use o Expo-Kit apenas se você realmente souber o que está fazendo.
Expo é uma ferramenta gratuita de código aberto para o React Native. É possível que este seja o melhor conjunto de ferramentas para criar aplicativos no React Native, no entanto, ele também tem suas limitações.
Use Expo:- Se você deseja apenas criar uma caixa de proteção, não crie um repositório para o seu aplicativo. Basta criar um novo aplicativo usando o pacote create-react-native-app .
- Se você realizou um estudo antes de criar o aplicativo e percebeu que todas as suas necessidades podem ser atendidas pelas soluções que a Expo oferece.
- Se você não possui um computador Mac OS, mas ainda deseja criar aplicativos para iPhone. Essa é a única alternativa para criar executáveis IPA.
Não use Expo:- Se você é novo no React Native e acha que essa é a única maneira de criar um aplicativo. Antes de tudo, verifique se ele atende aos seus requisitos.
- Se você planeja usar pacotes RN de terceiros com módulos de usuário nativos. O Expo não suporta essa funcionalidade; nesse caso, você precisará extrair o (ejetar) Expo-Kit . Na minha opinião, se você inicialmente deseja extrair qualquer conjunto de ferramentas, não deve usá-lo. O procedimento de extração complicará a criação do aplicativo, comparado com se você não o usou.
Em geral, acho que a Expo é uma ótima ferramenta e uso o
Expo Snack para compartilhar o código React Native. No entanto, no momento, isso só pode ser útil para criar certos tipos de aplicativos.
Como estruturar pastas e arquivos do seu aplicativo
Organizar um aplicativo no React Native não é diferente de organizar um aplicativo no React. Portanto, se você estiver familiarizado com isso, siga a mesma lógica. No entanto, se esse não for o caso, a lógica descrita abaixo será útil:
- Adicione a pasta à raiz e nomeie-a como "app";
- Crie pastas dentro do "aplicativo":
assets - Dentro dele, tenho até três pastas com fontes, ícones e imagens.
components - Aqui você colocará todos os componentes do React compartilhados. Normalmente, esses são os componentes que chamamos de "fictícios" porque não possuem lógica de estado e podem ser facilmente reutilizados dentro do aplicativo.
views - Essas são as telas de nossos aplicativos, aquelas com as quais passamos de uma para outra. Os componentes de reação também são armazenados aqui, os que chamamos de contêineres, porque eles armazenam seu próprio estado.
modules - As peças que não possuem uma vista correspondente (JCX) são armazenadas lá. Exemplos típicos são o módulo de cores (contém todas as cores do aplicativo) e o módulo de utilitários (contém funções de utilitário que podem ser reutilizadas).
services - Aqui estão as funções que envolvem chamadas de API.
i18n - A tradução é armazenada aqui para usuários com diferentes idiomas e localidades.
Todos os aplicativos exigem um certo tipo de configuração, então geralmente crio um arquivo chamado
config.js e o armazeno lá. Se houver muitas linhas no arquivo de configuração, você poderá criar uma pasta de
config separada e dividi-la em vários arquivos.
Se você possui uma biblioteca de gerenciamento de estado, também precisará de pastas para seus componentes. No caso do Redux, são usadas 2 ou mais pastas, uma para
actions e outra para
reducers . Se você não usar pacotes externos e preferir usar a API do React Context, poderá criar seus próprios provedores, que podem ser colocados na pasta modules ou na nova pasta de
providers .
Selecionamos a biblioteca de navegação de acordo com suas necessidades
Infelizmente, o RN ainda não possui uma solução completa ou pelo menos um substituto digno para o antigo componente Navigator; portanto, agora vamos nos concentrar em como a comunidade resolve esse problema. Portanto, se você estiver criando um projeto e quiser saber qual biblioteca de navegação usar, esta seção é apenas para você.
Em geral, existem dois tipos de bibliotecas de navegação: navegadores JavaScript e navegadores nativos. As primeiras são escritas em JavaScript, enquanto as bibliotecas nativas são escritas em módulos nativos de acordo com a plataforma (Android, iOS) e conectadas aos módulos JavaScript para serem lançadas no código. Os primeiros são muito mais fáceis de configurar, enquanto os segundos são muito mais eficientes. Reserve um tempo para descobrir qual o tipo que melhor combina com você e, em seguida, escolha entre muitas bibliotecas desse tipo.
Spencer Carly fez um ótimo trabalho e desenvolveu as opções de navegação atuais no mundo React Native, você pode ler o
artigo dele sobre esse tópico. As soluções mais populares agora são
React Navigation , como uma solução JavaScript, e
React Native Navigation , como uma solução nativa.
Por conveniência, use a biblioteca wrapper CSS-in-JS
No React Native, o CSS é escrito em JavaScript. Aqui não temos escolha. Pessoalmente, em vez de usar o método
StyleSheet.create e o código CSS em JavaScript puro, eu uso a biblioteca
Styled Components . Componentes estilizados tornam o CSS claro novamente e tornam o JSX mais semântico.
Recentemente, escrevi um artigo sobre por que prefiro usar Componentes com estilo em aplicativos
React Native . Você pode lê-lo para entender melhor o tópico.
Decida com antecedência como deseja que o aplicativo seja dimensionado em diferentes dispositivos com diferentes tamanhos de tela.
Provavelmente, você está desenvolvendo um aplicativo para mais de um dispositivo e tamanho de tela. Agora, existem duas abordagens para o design e o desenvolvimento de aplicativos.
Você pode optar por um UX / UI diferente, dependendo do tamanho da tela. Para a maioria dos tipos de aplicativos, essa é provavelmente a melhor opção, mas exige muito esforço, pois você precisa criar e implementar várias opções de tela. Os tamanhos de tela podem ser determinados usando a
API de dimensões . Por outro lado, você pode usar um pacote de terceiros que, imediatamente, fornece algumas ferramentas, como a
interface do usuário do
React Native Responsive .
Ou você pode usar a mesma interface do usuário / UX, que será dimensionada proporcionalmente para todos os tamanhos de tela. Essa é a melhor opção se, por exemplo, você estiver desenvolvendo um jogo. Novamente, você pode usar um pacote de terceiros, por exemplo,
React Native responsive Screen .
Isenção de responsabilidade: eu sou o criador do pacote React Native Responsive Screen .
Cuidado com a animação
A animação é crucial para aplicativos móveis, mas o desempenho do React Native é ruim.
Para se proteger contra erros, você precisa testar a animação no dispositivo, pois o emulador não fornece o feedback correto. Você também precisa usar
useNativeDriver (com true) sempre que possível, pois isso ajudará a obter melhor desempenho.
Se você quiser mais dicas sobre como obter um melhor desempenho, dê uma olhada no meu
artigo anterior.
Lembre-se também
- O React Native não possui elementos DOM. Em vez disso, trabalhamos com elementos nativos.
- Sobre CSS:
- Nem todos os recursos são suportados, pelo menos ainda não. Para saber mais, consulte a documentação: Exibir propriedades de estilo , propriedades de estilo de imagem, propriedades de estilo de texto .
- As propriedades taquigráficas nem sempre funcionam bem; portanto, é melhor usar propriedades específicas (como margem inferior, margem superior, margem esquerda, margem direita, em vez de margem).
- Nem todas as propriedades suportam porcentagens. Por exemplo, o seguinte: margem, largura da borda e raio da borda. Se alguém tentar usar valores percentuais, o RN os ignorará ou o aplicativo falhará em princípio.
- RN suporta flex fora da caixa. Examine-o e use-o quando apropriado. Este é o melhor aliado do CSS!
Só isso. Saiba mais sobre o curso
aqui .