rocketseat-docs-rn

Windows

Capa

Dependências

Para configurar o ambiente Android no Windows, iremos realizar 6 instalações principais:

  • Chocolatey;
  • Node.js;
  • Yarn 1;
  • Python 2;
  • JDK 8;
  • Android Studio e dependências.

Não será realizada a instalação global do react-native-cli pois ela tem causado erros. Para criar e executar nossos projetos React Native, utilizaremos os comandos via npx

Instalando Chocolatey

Para instalar as libs no Windows, vamos utilizar um gerenciador de pacotes do Windows chamado Chocolatey. Esse gerenciador nos possibilita instalar dependências e ferramentas no sistema com poucos comandos e tudo pelo terminal. Execute o powershell como administrador utilizando a tecla Windows + X ou clicando com o botão direito sobre o botão “Iniciar”:

Powershell

Execute o comando abaixo para verificar se você possui permissões para instalar dependências com o terminal:

Get-ExecutionPolicy

Caso o retorno desse comando seja diferente de “Restricted”, pule para o próximo passo. Porém, se o retorno for “Restricted”, execute o seguinte comando em seu terminal:

Set-ExecutionPolicy AllSigned

Agora, execute o seguinte comando para instalar o Chocolatey:

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, teste se a instalação ocorreu corretamente executando o seguinte comando no seu terminal (nada irá acontecer, mas não deve retornar erros):

Nesse passo pode ser necessário reiniciar seu terminal

choco

Agora vamos instalar o Node.js, Yarn 1, Python2 e a JDK 8 (Java Development Kit 8).

Se você já tiver o Node.js instalado em sua máquina, certifique-se que sua versão é superior à 7 e caso esteja com o JDK instalado em sua máquina, certifique-se que sua versão seja a 8.

choco install -y nodejs-lts yarn python2 jdk8

A versão 8 do JDK é obrigatória, não utilize versões mais recentes.

Agora reinicie o Powershell e execute, um de cada vez, os seguintes comandos para verificar se instalou corretamente:

node -v
npm -v
yarn -v
python --version
java -version

Se todas apresentaram os valores das suas versões, a instalação foi um sucesso. Desses valores, precisamos anotar apenas um: uma parte do java -version. Supondo que o resultado desse comando tenha sido:

java version "1.8.0_151"
Java(TM) SE Runtime Environment (build 1.8.0_151-b12)
Java HotSpot(TM) Client VM (build 25.151-b12, mixed mode)

Anote apenas o valor da versão, que está entre aspas, apresentado na primeira linha (ex.: 1.8.0_151). Você vai precisar desse valor mais pra frente.

Preparativos Android Studio

Crie uma pasta em um local desejado para instalação da SDK (Ex.: C:\Android\Sdk). É muito importante que esse caminho não possua espaços ou caracteres especiais pois irá causar erros.

Anote esse caminho para ser utilizado posteriormente

Agora, no Painel de Controle do Windows, abra o item “Sistema e Segurança” ou “Sistema”, clique em “Configurações avançadas do sistema”, selecione “Variáveis de ambiente” e clique no botão “Nova variável de ambiente”, indique o nome da variável como ANDROID_HOME, adicione o caminho utilizado acima (Ex.: C:\Android\Sdk) como segundo parâmetro e clique em OK.

Add System Variable

Faça o mesmo processo para criar a variável JAVA_HOME com o caminho da pasta instalada. Lembra que anotamos o valor da versão do Java? Pois então chegou a hora de utilizarmos!

Usando como base o caminho

C:\Program Files\Java\jdk[VERSÃO_ANOTADA_POR_VOCÊ]

Substitua o [VERSÃO_ANOTADA_POR_VOCÊ] pelo valor anotada na etapa anterior (ex.: C:\Program Files\Java\jdk1.8.0_151)

Na mesma janela de "Variáveis de ambiente" no Windows, clique na variável PATH e então em "Editar". Haverá uma lista de caminhos e você deve adicionar esses quatro novos caminhos no fim da lista:

%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin
%ANDROID_HOME%\platform-tools

Se sua versão do Windows for menor que a 10 sempre coloque ponto-e-virgula ";" no final dos caminhos para eles não se juntarem

Instalando Android Studio

Android

Acesse a página do Android Studio e clique no botão Download Android Studio.

Caso seu Windows seja a versão 32 bits, será baixada a opção .zip que não vem com o instalador .exe. Basta extrair a pasta android-studio em um local de preferência (Ex.: C:\) e executar o arquivo studio.exe dentro da pasta bin. Feito isso, você pode pular até a próxima seção

Vá até a pasta onde o arquivo foi salvo e execute o instalador.

A primeira janela que deve aparecer é para escolher o que vai ser instalado. Por padrão, a opção Android Studio já vem selecionada. Selecione também a opção Android Virtual Device e clique em Next.

Na sequência, será perguntado sobre o local de instalação do Android Studio. Pode deixar o caminho padrão e clicar em Next.

Em seguida, será perguntado sobre a pasta no menu Iniciar. Deixe o padrão e clique em Install.

Nessa etapa será realizada instalação. Quando terminar, clique em Next.

Por fim, será apresentada a janela de fim da instalação. Deixe a opção Start Android Studio marcada e clique em Finish.

Configurando Android Studio

Com o Android Studio instalado, chegou a hora de fazer a configuração inicial do programa.

A primeira janela a ser apresentada deve ser perguntando sobre a importação de configurações de outro Android Studio. Selecione a opção Do not import settings e clique em OK.

Em seguida, o Android Studio começará a carregar. Em algum ponto do carregamento, será apresentada uma janela sobre compartilhamento de dados anônimos com a Google. Essa opção é pessoal, escolha o que preferir.

Após o carregamento terminar, deve aparecer uma página de Welcome. Clique em Next.

Na sequência, será pedido o tipo de instalação. Escolha a opção Custom e clique em Next.

Nesse momento, será pedido para escolher a localização do pacote JDK instalado. Clique em ⬇ e escolha a opção JAVA_HOME. Verifique se ela está apontando para a JDK 8. Clique em Next

JDK Location

Em seguida, será perguntado sobre qual tema será utilizado. Escolha o que preferir e clique em Next

Chegamos na etapa mais importante do processo, a instalação da SDK. A janela apresentará algumas opções, marque todas.

SDK Location

  • A SDK é o pacote que vai possibilitar que sua aplicação React Native faça o build. Por padrão, ele instala a última SDK estável (nesse caso a 29);
  • O Intel HAXM é para melhorar a performance da emulação (Se você for utilizar o Hyper-V ou possuir um processador AMD, não marque essa opção. Siga esse guia ao final da instalação do Android Studio);
  • O Android Virtual Device vai criar um emulador padrão pronto para execução.

Um fator essencial nessa etapa é o caminho de instalação da SDK. Utilize a pasta que você criou na seção Preparativos para o Android Studio (Ex.: C:\Android\Sdk). Não utilize espaços ou caracteres especiais pois causará erros mais para frente e o próprio Android Studio alerta se o seu caminho não está bom.

Se tudo estiver correto, clique em Next.

Na sequência, temos uma janela perguntando sobre a quantidade de RAM que será disponibilizada para que o HAXM utilize. Essa etapa não irá aparecer para todos pois nem todo computador é compatível com esse recurso. Deixe o recomendado pelo programa e clique em Next.

Em seguida, será apresentada uma janela com um resumo de todas as opções escolhidas até aqui. Verifique se está tudo certo, principalmente os caminhos da SDK e do JDK. Clique em Finish.

Por fim, será realizada a instalação das configurações selecionadas. Quando o programa terminar, clique em Finish.

SDK Manager

Atualmente, o React Native utiliza a SDK 28 como padrão para projetos Android. Ao executar o app no android, a cli detecta se você possui a SDK 28 e se aceitou as licenças necessárias. Caso contrário, ela já instala parcialmente a SDK 28 para você. Exemplo do log:

**info** JS server already running.
**info** Installing the app...
Checking the license for package Android SDK Platform 28 in /home/rocketseat/Android/Sdk/licenses
License for package Android SDK Platform 28 accepted
Preparing "Install Android SDK Platform 28 (revision 6)".
Installing Android SDK Platform 28 in /home/rocketseat/Android/Sdk/platforms/android-28
"Install Android SDK Platform 28 (revision 6)" complete.
"Install Android SDK Platform 28 (revision 6)" finished.

Porém, para não depender apenas da cli, nesse tópico será ensinado como instalar a SDK 28 pelo SDK Manager do Android Studio.

Abra o Android Studio. No canto inferior direito da janela, clique em Configure e escolha a opção SDK Manager.

SDK Manager

Caso o botão Configure não esteja visível, expanda a parte inferior da janela arrastando ela pra baixo até que o botão apareça.

Em seguida, na aba SDK Platforms selecione o Android 9.0 (Pie), que corresponde à API (SDK) 28, e clique em Apply.

SDK Default List

Nesse momento, será apresentada uma janela informando os componentes a serem instalados, o tamanho do download e da instalação e o espaço disponível na pasta SDK. Clique em OK.

Na sequência, serão apresentadas as licenças da SDK. Selecione a opção Accept e clique em Next.

Por fim, será realizada a instalação. Ao fim do processo, clique em Finish e repare que a agora a API 29 (instalada por padrão) e 28 estão com status Installed.

SDK New List

Windows Hypervisor Platform - WHPX (Extra)

Caso você tenha um processador AMD ou queira utilizar o Hyper-V, a melhor opção é utilizar o WHPX em vez do HAXM. Para isso, é preciso verificar primeiramente se você atende aos requisitos mínimos:

  • Processador Intel: compatibilidade com os recursos de Tecnologia de virtualização (VT-x), Tabelas de páginas estendidas (EPT, na sigla em inglês) e Unrestricted Guest (UG). A VT-x precisa estar ativada nas configurações do BIOS de computador.
  • Processador AMD: o processador AMD Ryzen é recomendado. A virtualização ou o SVM precisa estar ativado nas configurações do BIOS do computador.
  • Android Studio 3.2+.
  • Android Emulator 27.3.8+.
  • Windows 10 com atualização de abril de 2018 ou posterior.

Caso não saiba se a virtualização está ativa na BIOS, basta acessar o Gerenciador de Tarefas do Windows (Ctrl + Shift + ESC) acessar a aba Desempenho e verificar se, a escolhar a opção CPU, na parte inferior direita aparece a configuração Virtualização: Habilitada

virt

Atendidos todos os requisitos, clique com o botão direito no símbolo do Windows na barra de tarefas e escolha a opção Apps e Recursos.

whpx1

Na janela que abrir, role até o final da página e escolha a opção Programas e Recursos na seção Configurações Relacionadas.

whpx2

Será apresentado o Painel de Controle. Escolha a opção Ativar ou desativar recursos do Windows.

whpx3

Novamente será aberta uma nova janela. Nela, basta selecionar a opção Plataforma do Hipervisor do Windows, clicar em OK e reiniciar a máquina.

whpx4

Emulador

Com o Android Studio, é possível configurar um emulador Android e executar a sua aplicação nele.

Porém, esses emuladores consomem bastante recursos do seu computador. Por isso, se você possui um dispositivo físico Android e sua máquina tenha configurações modestas (ex.: ⬇ i3, ⬇ 4gb RAM), é recomendado executar a aplicação diretamente no dispositivo físico.

Para aprender a configurar o seu emulador no Android Studio e executar a sua aplicação React Native nele, clique aqui

Dispositivo Físico

Caso você tenha um dispositivo físico Android, também é possível executar a aplicação diretamente nele. Caso tenha interesse em configurar essa etapa, clique aqui

Edit this page on GitHub