Em primeiro lugar, gostaria de lembrar que React Native (RN) é uma tecnologia de plataforma cruzada para a construção de aplicativos móveis. Muita gente pensa que sua principal vantagem é o uso de um único codebase para duas aplicações, mas não considero isso o mais valioso no RN. O valor principal é usar o React com todos os seus benefícios, incluindo a comunidade mais ampla de desenvolvimento da web. Faz todo o sentido para os desenvolvedores do React começarem a construir aplicativos móveis com o React Native depois de ter uma experiência sólida com o React. Mas o mundo móvel é muito diferente da web. Hoje, quero compartilhar o que devemos ter em mente ao mergulhar no mundo do desenvolvimento móvel.
1. Compacidade da tela
CSS assume que você está trabalhando com um pixel como uma unidade física de 1/96 de polegada. Isso é útil se você estiver criando um site apenas para computadores desktop, mas ao trabalhar em um site para dispositivos móveis, é necessário considerar diferentes densidades de tela. É por isso que você precisa de margens diferentes, preenchimento para dispositivos diferentes, bem como ativos diferentes (como imagens) para eles. Há um bom artigo que explica a abordagem móvel. Como alternativa, você pode consultar diretamente o recurso Android Developer .
2. Navegação
Um navegador da web geralmente tem a página atual, um botão Voltar para armazenar o histórico e outras âncoras. Na versão mobile do site, ao invés, temos telas, e navegação entre elas, agindo em padrões claros: navegação pelas abas, ao longo da pilha e retrocesso. Você não pode usar o roteador React para isso, mas pode usar a biblioteca de navegação React para uma navegação responsiva .
Navegação de guia animada no React-Native
3. Estilos
Aqui no mundo móvel, CSS não funciona, e nenhuma das soluções que funcionam com ele funciona. Você não pode usar CSS-in-JS, LESS ou qualquer outra coisa. Em vez disso, você pode usar objetos JSON para definir estilos de componentes.
Nota:
- sempre use StyleSheet.create ({}) para que o React-Native possa armazenar estilos em cache;
- Flexbox ainda está aqui, só que tem um nome diferente.
Exemplo de estilos de React-Native
4. Rede
Se você estiver criando um site ou aplicativo de desktop com React (digamos, Electron), pode contar com uma conexão de Internet boa e razoavelmente estável. Mas agora estamos falando de dispositivos móveis, e aqui a Internet pode ser muito lenta, instável ou até ausente. Portanto, é necessário desenvolver uma aplicação com esta particularidade em mente: solicitações de conexão, trabalhando offline (cache, por exemplo). A conexão também pode ser interrompida durante a operação, portanto, você precisa estar preparado para isso.
5. Assinatura
Ao contrário de um site, que pode simplesmente ser implantado em um armazenamento compatível com S3, um aplicativo móvel deve ser assinado digitalmente para que o telefone verifique se o desenvolvedor é confiável. Este processo pode ser muito trabalhoso, especialmente para iOS, onde você precisa comprar um programa para um desenvolvedor, criar um id de aplicativo, um perfil, gerar e exportar um certificado de assinatura ... Na plataforma Android parece mais simples: você pode gerar todos os dados necessários usando uma linha de comando ou usando Android Studio e distribua o aplicativo imediatamente.
6. Disseminação
Novamente: você não pode simplesmente fazer upload de conteúdo para o S3 ou uma máquina virtual. Você precisa acessar o Google Play e a App Store ou distribuir seu aplicativo fora da loja oficial, por exemplo, se o aplicativo for corporativo, destinado apenas a funcionários de uma organização. A App Store, no entanto, simplesmente não permitirá a publicação do aplicativo diretamente na App Store, você terá que usar algum tipo de solução MDM ou simplesmente distribuí-la via MS App Center, Firebase Distribution, etc.
Além disso, existem muitas regras nas lojas que devem ser seguidas. Isso inclui ícones, gráficos, diretrizes de interface do usuário , permissões, segurança e muito mais.
7. Ferramentas
Você também pode usar VSCode ou WebStore ou até mesmo Vim para edição de código e Chrome como um depurador, ou você pode usar Xcode e Android Studio para obter mais benefícios, como logs, ferramentas de monitoramento, edição de arquivo e muito mais. Você também vai adorar o Flipper, o Reactotron e outras ferramentas que irão acelerar o seu trabalho com o React-Native.
React-Native no WebStorm IDE
8. Emuladores, simuladores e dispositivos
Para o desenvolvimento da web, vários navegadores são suficientes. Para desenvolvimento móvel, você precisa executar o código em um dispositivo móvel: você pode usar seu telefone, mas é improvável que tenha dispositivos com Android e iOS em mãos.
Boas notícias: você pode usar emuladores Android (que podem ser baixados e executados do Android Studio) ou simuladores iOS construídos a partir do Xcode se você estiver em um Mac (não, você não pode ter simuladores iOS em qualquer outro hardware, pelo menos legalmente ) É uma experiência totalmente nova, mas divertida.
9. Relacionamento com o código nativo
Seu código js permanecerá com você, mas também interagirá com o código nativo (Kotlin, Swift). O aplicativo deve estar conectado corretamente, caso contrário, ele pode travar ou funcionar incorretamente. A boa notícia é que ao trabalhar com o React-Native desde a versão 0.60, a vinculação ocorre automaticamente para a maioria das bibliotecas externas.
Arquitetura de um aplicativo React-Native
10. Reutilização de código
Ótimas notícias, finalmente! Se você estiver construindo um aplicativo da web e um aplicativo móvel, poderá reutilizar parte do código. Definitivamente, você pode reutilizar todo o domínio e código de rede, uma vez que não há especificidade para a Internet ou dispositivos móveis. Provavelmente, você também poderá reutilizar a lógica de negócios, mas isso é menos provável.
Em artigos futuros, espero examinar mais de perto cada um desses pontos.