A comunidade React Native é uma das comunidades de código aberto mais vibrantes da web. De acordo com o GitHub , o repositório React Native é um dos repositórios mais bem avaliados com base no número de contribuintes. Você pode encontrar módulos e bibliotecas de terceiros para quase tudo que deseja implementar em seu próximo aplicativo móvel.
Você certamente encontrará problemas relacionados a pacotes obsoletos e sem manutenção, especialmente pacotes dos primeiros dias do React Native-é simplesmente um fato da vida. Acho que é um fardo aceitável, já que manter uma biblioteca React Native requer a manutenção de um projeto que pode depender de pelo menos três idiomas.
Bibliotecas de IU nativas do React que todo desenvolvedor móvel deve conhecer
É crucial saber quais bibliotecas usar para criar a melhor experiência possível para o usuário e o desenvolvedor. Neste tutorial, apresentaremos 15 bibliotecas de IU React Native que usei em praticamente todos os aplicativos React Native em que trabalhei até agora em 2021.
Cobriremos as melhores bibliotecas React Native UI para:
- Estilo
- Navegação
- Telas iniciais
- Ícones de aplicativos
- Carregando marcadores de posição
- Manipulação e rastreamento de erros
- Buscando dados
- Ícones
- Imagens
- Formulários
- Teste
Em seguida, veremos algumas dicas e práticas recomendadas para usar essas e outras bibliotecas de IU do React Native, incluindo como:
- Crie um modelo React Native
- Obtenha atualizações sobre novas bibliotecas
- Use TypeScript com React Native
Estilo
O estilo é um tópico muito opinativo na comunidade React e nas comunidades JavaScript em geral. Usei quase todas as abordagens CSS-in-JS para estilizar meu React e aplicativos React Native. Decidi usar Tailwind CSS para web e Restyle para React Native.
Restyle é uma biblioteca desenvolvida pela Shopify com um sistema imposto por tipo para a construção de componentes de IU. Com Restyle, você pode fazer um sistema de design completo, definindo cores, espaçamento e variações e criando seus componentes com base em componentes principais React Native e utilitários Restyle.
A melhor característica do Restyle é que ele força você a usar apenas configurações já declaradas em seu tema, o que mantém o aplicativo limpo e orienta seus colegas de trabalho, mantendo suas escolhas o mínimo possível.
O Restyle requer que você primeiro crie um tema que reflita a configuração do seu sistema de design (cores, espaçamento, pontos de interrupção e variantes), como este:
import {createTheme} de'@ shopify/restyle' paleta const={ purpleLight:'# 8C6FF7', purplePrimary:'# 5A31F4', purpleDark:'# 3F22AB', luz verde:'# 56DCBA', greenPrimary:'# 0ECD9D', greenDark:'# 0A906E', preto:'# 0B0B0B', branco:'# F0F2F3',
}; const theme=createTheme ({ cores: { mainBackground: palette.white, cardPrimaryBackground: palette.purplePrimary, }, espaçamento: { s: 8, m: 16, l: 24, xl: 40, }, pontos de interrupção: { telefone: 0, tablet: 768, },
}); tipo de exportação Theme=typeof theme;
exportar tema padrão;
Esta será a aparência de seus componentes usando Restyle:
Navigation
Se você tivesse me perguntado há dois anos, eu teria alertado contra o uso do React Navigation devido a alguns desafios de desempenho e recomendado o uso de um nativo biblioteca, como React Native Navigation , em vez disso.
Felizmente, a comunidade React Navigation, com alguma ajuda de Software Mansion , desenvolveu e otimizou três das bibliotecas mais usadas no React Native ecossistema: React Native Screens , React Native Gesture Handler e React Native Reanimated . Essas três bibliotecas são o segredo por trás da grande melhoria de desempenho que você notará a partir da versão 4.
Hoje, React Navigation deve ser sua primeira escolha; você não precisa pensar duas vezes.
Para começar a trabalhar com o React Navigation, você deve primeiro instalar todas as suas dependências:
yarn add react-native-reanimated react-native-gesto-handler react-native-screens react-native-safe-area-context @ react-native-community/masked-view
Você pode usar três tipos comuns de navegador com o React Navigation: Stack , Tab e Drawer . Você também pode combinar vários navegadores e criar uma arquitetura de aplicativo complexa.
Aqui está um exemplo simples de um navegador de pilha:
import {createStackNavigator} de'@ react-navigation/stack'; const Stack=createStackNavigator (); function MyStack () { Retorna ( );
}
Telas iniciais
Adicionar uma tela inicial ao seu aplicativo móvel é uma tarefa tediosa e a melhor maneira de realizar tarefas tediosas é automatizá-las. react-native-bootsplash permite que você crie uma tela de abertura sofisticada usando CLI. Tudo o que você precisa fazer é fornecer uma imagem e uma cor de fundo, e o pacote fará o trabalho para você.
Eu prefiro usar react-native-bootsplash em vez do pacote mais popular, react-native-splash-screen , porque o primeiro impede que você veja os erros vermelhos se você estiver enfrentando um problema na inicialização e, em vez disso, fica na tela de splash , o que é irritante.
O seguinte comando gera uma tela inicial em react-native-bootsplash :
yarn react-native generate-bootsplash assets/bootsplash_logo_original.png \ --background-color=F5FCFF \ --logo-width=100 \ --assets-path=assets \ --flavor=main
Ícones de aplicativos
Esta é outra tarefa tediosa que precisamos automatizar. Para automatizar a geração de ícones de aplicativos, usaremos um plug-in chamado React Native Make . O plug-in está disponível por meio do React Native CLI e foi projetado para ajudá-lo a gerar ícones de aplicativos para plataformas iOS e Android.
Para usar o react-native-make , você só precisa de uma versão 1024 × 1024 do ícone do seu aplicativo e você está pronto para gerar ativos de ícone do aplicativo usando os seguintes comandos:
react-native set-icon-caminho do caminho para a imagem
Carregando espaço reservado
Uma das perguntas mais comuns que recebo sobre os aplicativos móveis React Native é como criar uma experiência de carregamento semelhante a aplicativos como Facebook e YouTube.
Existem várias soluções para criar essa experiência, mas eu recomendaria usar o react-content-loader pacote. Este pacote é baseado em react-native-svg e Bibliotecas reanimadas , que parecem funcionar muito bem. O pacote também fornece um playground para ajudá-lo a criar um espaço reservado no seu navegador.
Aqui está um exemplo de um marcador de posição de carregamento semelhante ao do aplicativo do Facebook:
import React from"react"
import ContentLoader, {Rect, Circle, Path} de"react-content-loader/native" const MyLoader=(props)=> (
) exportar MyLoader padrão
Manipulação e rastreamento de erros
Todos nós pretendemos tornar nosso aplicativo React Native livre de bugs usando um sistema de digitação e aumentando a cobertura de teste. No entanto, mesmo com alta cobertura de teste, os usuários ainda têm certeza de encontrar e relatar bugs.
Portanto, é crucial lidar com seus erros e fornecer feedback aos usuários sempre que o aplicativo não estiver funcionando conforme o esperado. react-native-exception-handler oferece uma maneira simples de lidar com nativos e Erros de JavaScript e fornecer feedback aos usuários.
Para fazer o react-native-exception-handler funcionar, você deve instalar e vincular o módulo. Em seguida, registre seu manipulador global para JavaScript e exceções nativas, como:
import {setJSExceptionHandler, setNativeExceptionHandler} de"react-native-exception-handler"; setJSExceptionHandler ((erro, isFatal)=> { //Este é o seu gerenciador de erros global personalizado //Você faz coisas como mostrar uma caixa de diálogo de erro //ou acesse google analytics para rastrear travamentos //ou acesse uma API customizada para informar a equipe de desenvolvimento.
}); const exceptionhandler=(exceptionString)=> { //seu código de tratamento de exceção aqui
};
setNativeExceptionHandler ( manipulador de exceções, forceAppQuit, executeDefaultHandler
);
Você deve rastrear esses erros com uma ferramenta de terceiros que notifica sobre os erros que os usuários encontram em seu aplicativo para que você os corrija em versões futuras.
Buscando dados
Minha sugestão nesta seção dependerá de sua implementação de back-end. Se você estiver usando uma API REST, react-query é sua melhor escolha aqui. Mas em vez disso, se você estiver usando o graphQL, você pode usar urql . Essas duas bibliotecas fornecerão tudo de que você precisa para lidar com a API em seu aplicativo. Você se beneficiará de muitos recursos exclusivos, como cache, suporte offline, IU otimista, pré-busca e muito mais.
Depois de instalar o react-query, você pode criar seu próprio gancho para buscar tarefas como exemplo:
import {useQuery} de'react-query';
importar {cliente} de'./client'; const getTasks=async ()=> { const {data}=espera client.get ('/tasks'); dados de retorno;
}; export function useTasks () { return useQuery ('tarefas', getTasks);
}
`` `
E use-o dentro de seus componentes para buscar tarefas: `` `
export const Tasks=()=> { const {isLoading, data}=useTasks (); if (isLoading) { return
Ícones
A maioria dos artigos que vi sobre o uso de ícones no React Native sugere o uso de React Native Vector Icons como uma escolha padrão. É verdade que esta biblioteca tem vários ícones e fontes, mas na maioria das vezes, minha equipe se viu criando novas fontes para acompanhar designs personalizados em nossos ícones. Na minha opinião, criar uma fonte personalizada com react-native-vector-icon contribui para uma experiência abaixo do ideal porque você precisa gerar uma nova fonte sempre que quiser adicionar um novo ícone.
Em vez disso, minha equipe começa a usar react-native-svg para nossos ícones com o incrível pacote SVGR , que pode gerar um componente React a partir de qualquer arquivo SVG. Você pode até exportar diretamente um componente React de um arquivo Figma.
Abaixo está um exemplo simples de um ícone SVG gerado como componentes React Native usando o plugin SVGR Figma :
import * as React from"react" ícone de função (adereços) { Retorna ( )
} exportar ícone padrão
Imagens
Se seu aplicativo depende principalmente de imagens, você notará alguns problemas de desempenho, especialmente com listas e visualização de rolagem.
Usar FastImage , um componente de imagem React Native de alto desempenho, ajudará você a melhorar seu aplicativo sem nenhum acréscimo esforço. Ele substitui exatamente o componente de imagem do React Native e adiciona alguns recursos incríveis, como armazenamento em cache, priorização e recarregamento.
Formulários
Existem algumas soluções excelentes para lidar com formulários no React Native, incluindo Formik e React Hook Form .
Eu costumava usar o Formik, mas estou viciado no React Hook Form desde que o descobri. Na minha opinião, esta é a melhor solução para lidar com formulários simples e complexos no React.
Outros benefícios de usar o React Hook Form incluem gerenciamento de estado, validação, gerenciamento de erros e vários campos de array.
Teste
Se você já trabalhou com as bibliotecas de teste para testar seus aplicativos front-end, seu conhecimento e experiência serão aplicáveis aos testes no React Native. React Native Testing Library tem virtualmente a mesma API.
Aqui está um teste de unidade de contador simples usando React Native Testing Library:
import"react-native";
importar React de"react";
importar {fireEvent, render} de"@ testing-library/react-native"; it ("renderiza corretamente", ()=> { //renderizar o componente const {getByText}=render (
Para testar o comportamento do seu aplicativo com confiança, eu recomendaria escrever testes de ponta a ponta usando a biblioteca Detox do Wix.
Dicas e práticas recomendadas para usar as bibliotecas de IU nativas do React
Abaixo estão algumas dicas extras para ajudá-lo a obter o máximo das bibliotecas React Native detalhadas acima.
Criar um modelo React Native
Se você pretende usar todas essas bibliotecas em seus próximos projetos React Native, pode valer a pena criar um modelo simples para que possa iniciar um novo projeto facilmente.
Recentemente, criamos um modelo para nossa equipe móvel iniciar novos projetos com todas as bibliotecas mencionadas. Aqui está, se você quiser usá-lo:
npx react-nativo init MyApp--template https://github.com/obytes/react-native-template-obytes
Obtenha atualizações sobre novas bibliotecas
Uma das maneiras mais eficazes de se atualizar sobre novas bibliotecas e práticas recomendadas é seguir projetos de código aberto. Gosto de verificar o arquivo package.json para cada projeto React Native compartilhado em minha rede. Sempre que encontro uma nova biblioteca, procuro para aprender mais.
Além disso, certifique-se de seguir o tópico react-native na página de exploração do GitHub . Você receberá muitos projetos e discussões do React Native.
Use TypeScript com React Native
Comecei a usar o TypeScript como a linguagem principal para projetos React Native há cerca de um ano e meio, e gostaria de ter feito isso antes. Usar o TypeScript ajuda a melhorar a qualidade do seu código e a experiência do desenvolvedor, pois ajuda a evitar erros durante a digitação e melhora a funcionalidade de preenchimento automático.
É importante observar que o TypeScript é apenas um superconjunto JavaScript com digitação estática opcional. Não exige que você aprenda um idioma totalmente novo.
Conclusão
Espero que você tenha achado este tutorial do React Native interessante, informativo e divertido. Discutimos os benefícios de usar as bibliotecas React Native para alavancar recursos nativos em seu aplicativo móvel, ferramentas específicas recomendadas para ajudá-lo com estilização, depuração, busca de dados e muito mais, e delineamos algumas dicas e práticas recomendadas para ajudá-lo a obter o máximo deles React bibliotecas nativas.
A postagem As melhores bibliotecas React Native para aproveitar os recursos nativos apareceu primeiro no LogRocket Blog .
