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 jdk8Instalaçã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”.
A tela onde será necessário customizar é a “Android Studio Setup Wizard”, que aparecerá após a finalização da instalação inicial.
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.
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.
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:
- 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”.
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.
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 nomeprojetoObs.: 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 startAbra um novo terminal, entre na pasta novamente e inicie o Android com o comando:
npx react-native run-androidNa 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!
