Como emular React Native no Windows sem Expo

Logo que um estudante de programação inicia no mundo do mobile, um dos piores testes por qual ele passa, é fazer o procedimento de emular o React Native no windows e smartphone sem precisar de outras bibliotecas, ou seja, usando o React-native CLI e não o EXPO.

Por esse motivo eu trouxe para vocês esse passo a passo, afinal passei por isso a um certo tempo.

Mas calma, eu vim para te ajudar, vamos fazer juntos e então você vai ver que não é um bicho de sete cabeças como muita gente fala e não vai demorar dias, talvez alguns minutos, quase uma hora, vai depender da velocidade da sua internet.

Confira também >> Guia de React Native

React Native CLI no Windows

Vamos precisar baixar algumas coisas antes de prosseguir.

Na documentação está bem claro que se você for novo no desenvolvimento mobile é melhor que você utilize a ferramenta EXPO para emular a sua aplicação, já que ele possui os recursos básicos para um iniciante.

Mas caso você seja um usuário mais avançado, o ideal é que você configure usando o React Native CLI no windows.

Então vamos lá:

Node.js, Python2, JDK 8 com Chocolatey

Começando com as dependências, será necessário instalar o node.js, python 2 e o JDK8. Caso você tenha o Chocolatey (gerenciador de pacotes para Windows).

É recomendável que o utilize para instalar, caso você já tenha as dependências instaladas na sua máquina, valide apenas as versões, jdk 8 e node 8.3 ou superior .

Se preferir instalar o Chocolatey antes de continuar, abra o PowerShell como administrador e execute o comando abaixo:

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 utilizar o chocolatey, pode instalar diretamente dos sites das dependências.

Em todos os casos é necessário apenas seguir a instalação padrão (next, next… finish).

Android Studio

Para instalar o Android Studio, na documentação React-native informa para selecionar a opção customizar, o que pode causar uma confusão na cabeça de qualquer pessoa pelo simples motivos de que nas telas iniciais da instalação do Android Studio não há a opção “customizada”.

tela-inicial-de-instalacao-android-studio
Tela inicial da instalação do Android Studio

A tela onde será necessário customizar é a “Android Studio Setup Wizard”, que aparecerá após a finalização da instalação inicial.

android-studio-setup-wizard
Tela do Android Studio Setup Wizard
android-studio-setup-wizard-custom
Tela do Android Studio Setup Wizard Custom

Nessa tela clique em custom e next. Algumas configurações padrões como o tema e diretório serão solicitadas nas próximas telas. Apenas configure da maneira que achar melhor para você, até chegar na tela de SDK COMPONENTS SETUP.

sdk-components-setup
Tela do SDK Components Setup

Nas opções deixe todas essas selecionadas:

  • Android SDK
  • Android SDK Platform
  • 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.

sdk-manager
Seleção do SDK Manager

Selecione o checkbox no canto inferior direito show package details.

show-package-details
Seleção de 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:

  • Android SDK Platform 28
  • Intel x86 Atom_64 System Image ou Google APIs Intel x86 Atom System Image

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”.

android-sdk-location
Seleção de “OK” na tela de Android SDK Location

Desenvolvimento para mobile >> Ionic, React-Native ou Flutter, qual usar?

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.

variaveis-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 variáveis do sistema, clique em Path e Editar, na tela que abrir clique em novo, aqui será necessário vincular as ferramentas ao caminho, por padrão essa pasta tem o nome “platform-tools” mas antes de inserir, você pode conferir no explorar da sua máquina se existe mesmo.

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 o Expo, será necessário entrar no diretório onde ficará a sua aplicação através do terminal ou do editor de sua preferência e digitar:

npx react-native init nomeprojeto

Obs.: O npx é um gerenciador que serve para adicionar pacotes à sua aplicação sem a necessidade de instalá-los, geralmente é usado para adicionar pacotes que são usados poucas vezes e até mesmo para evitar problemas de incompatibilidade 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

Na tela do seu celular aparecerá um pop-up solicitando permissão, conceda a permissão para iniciar o projeto.

A aplicação será instalada no seu smartphone, é só aguardar a finalização.

Assim que finalizado, aparecerá a tela de boas vindas do react-native, agora é só programar.

Pode parecer um pouco complicado e talvez você nem tenha gostado de tudo o que foi necessário fazer, mas com o tempo você vai entender cada passo que fizemos aqui e o motivo. Espero ter contribuído um pouco para que você continue os seus estudos.

E aí? Conseguiu fazer? Sentiu alguma dificuldade? Achou que faltou alguma coisa? Deixe o seu feedback, ele é muito importante.

Boa codagem pra você! E até!

>> É desenvolvedor React Native? Encontre vagas React Native na plataforma da GeekHunter agora mesmo!

Compartilhar
You May Also Like