Como emular React Native no Windows sem Expo

No tutorial de hoje, ensinarei como usar os emuladores/emuladores Android e iOS para testar aplicativos desenvolvidos com React Native.

Embora seja uma boa ideia usar seu próprio smartphone, dificilmente você tem uma tonelada de modelos disponíveis que permitirão cobrir bem seus testes em diferentes resoluções. Essa é a vantagem de usar um emulador.

A desvantagem que você pode ter conhecido ou ouvido falar: desempenho. O uso do emulador de smartphone costuma ser bastante pesado em máquinas sem SSD e pelo menos 8 GB de RAM.

React Native CLI no Windows

Antes de continuar, precisamos baixar algumas coisas.

Fica claro na documentação que se você é novo no desenvolvimento mobile, é melhor usar a ferramenta EXPO para simular sua aplicação, pois ela possui funcionalidades básicas para iniciantes.

No entanto, se você for um usuário mais avançado, o ideal é usar a CLI do React Native no Windows para configuração.

Então começamos:

Node.js, Python2, JDK 8 com Chocolatey

Começando com dependências, você precisa de node.js, python 2 e JDK8 instalados. Se você tiver Chocolatey (gerenciador de pacotes do Windows).

É recomendado que você o utilize para instalar, caso as dependências já estejam instaladas em sua máquina, verifique apenas a versão, jdk 8 e node 8.3 ou superior.

Se você deseja instalar o Chocolatey antes de continuar, abra o PowerShell como administrador e execute o seguinte comando:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Agora podemos instalar as outras dependências, isso pode ser realizado com uma linha de comando apenas ainda no powershell:

choco install -y nodejs.install python2 jdk8

Instalação de dependências sem Chocolatey

Se você optar por não usar o Chocolatey, poderá instalá-lo diretamente do site de dependências.

Em todos os casos, basta seguir a instalação padrão (próximo, próximo… terminar).

Android Studio

Para instalar o Android Studio, a documentação nativa do React diz para você selecionar uma opção personalizada, o que pode confundir qualquer um pelo simples motivo de que não há uma opção “personalizada” na tela inicial da instalação do Android Studio.

A tela que você precisa personalizar é o “Assistente de configuração do Android Studio”, que aparecerá após a conclusão da instalação inicial.

Clique em Personalizar e Avançar nesta tela. Algumas configurações padrão, como tema e diretório, serão solicitadas na próxima tela. Basta configurá-lo da maneira que achar melhor para você até chegar à tela de configuração dos componentes do SDK.

Nas opções deixe todas essas selecionadas:

Performance Intel ® HAXM (caso você utilize AMD o processo é um pouco diferente)

Android Virtual Device

Clique em next para realizar a instalação dos componentes.

Abrirá a tela do primeiro projeto no Android, antes de iniciar esse novo projeto, clique em Configure e acesse o SDK Manager.

Selecione o checkbox no canto inferior direito show package details.

Usando como exemplo o Android 9.0 (Pie), será apresentado uma lista com outras opções para instalação, antes de prosseguir verifique se essas opções estão selecionadas:

Clique na aba SDK TOOLS e show packages details, verifique as opções superiores a 28.0.3 estão selecionadas também.

Selecione Apply para instalar, essa etapa é um pouco demorada.

Escolha finish ao final e antes de clicar em OK, copie o caminho informado no “Android SDK Location”.

Variáveis de ambiente do React Native Windows

Estamos quase finalizando, vamos entrar nas variáveis de ambiente do Windows.

Agora, vá em:

Sistema >> Configurações avançadas do sistema >> Variáveis de ambiente.

Seleção de variáveis de ambiente

Crie um novo nas variáveis de usuário, a primeira sessão da tela que abrirá.

Será necessário colocar no nome da variável ANDROID_HOME e no valor será colado o caminho copiado anteriormente, clique em ok para finalizar.

Agora, em System Variables, clique em Path e Edit, na tela que se abre, clique em New, aqui você precisa vincular a ferramenta ao path, por padrão essa pasta se chama “Platform Tools”, mas antes de inserir, caso sua máquina exista , Podes verificar.

Será algo parecido com esse caminho:

Configurando o Celular para rodar o React-Native

Antes de iniciar a nossa aplicação, há mais um passo só que dessa vez no seu smartphone.

Precisamos habilitar o modo desenvolvedor dele, então vamos lá.

Para os dispositivos com o Android 9 ou superior será necessário entrar em:

Config. >> Sobre o telefone >> Informações de software >> Clique 7 vezes em Número da compilação

Para os dispositivos 8.0 e 8.1:

Config. >> Sistema >> Sobre o dispositivo >> Número da versão

Para os dispositivos 7.1 e anteriores:

Congif. >> Sobre o dispositivo >> Número da versão

Em opções do desenvolvedor procure a opção Depuração USB e Habilite.

Agora você pode conectar o seu smartphone na máquina.

Iniciando o React-Native no Celular

Vamos criar o primeiro projeto sem Expo, será necessário entrar no diretório onde está localizada sua aplicação através do terminal ou editor de sua preferência e digite:

npx react-native init nomeprojeto

Obs.: npx é um gerenciador para adicionar pacotes à sua aplicação sem instalá-los, muitas vezes é usado para adicionar pacotes raramente usados ​​ou até mesmo evitar incompatibilidades entre versões de pacotes.

Esse comando irá criar a pasta do projeto.

Para iniciar o react-native no projeto é necessário entrar no projeto criado, como no exemplo:

cd .\novoprojeto\

Agora execute o comando de inicialização:

npx react-native start

Abra um novo terminal, entre na pasta novamente e inicie o Android com o comando:

npx react-native run-android

Um pop-up pedindo permissão aparecerá na tela do seu telefone, conceda permissão para iniciar o projeto.

O aplicativo será instalado no seu smartphone, é só esperar que ele termine.

Feito isso, a tela de boas-vindas do react-native aparecerá, agora apenas programando.

Pode parecer um pouco complicado e você pode até não gostar de tudo que ele faz, mas com o tempo você entenderá cada passo que demos aqui e o porquê. Espero poder contribuir um pouco para o seu aprendizado contínuo.

lá? Você conseguiu? Encontrou alguma dificuldade? Você sente que algo está faltando? É muito importante deixar seu feedback.

Boa codificação para você! e até mesmo!