Configurando o Ambiente de Desenvolvimento React Native no Windows 10

Existem duas formas de configurar um aplicativo React Native, uma delas é usando as ferramentas do Expo CLI e a outra forma é usando o React Native CLI. Para esse tutorial será usando o React Native CLI.

Mas para isso, precisamos instalar algumas dependências.

Instalando o Node.js

Se você já tem o Node.js 10 ou mais recente instalado em seu computador, você pode ignorar essa etapa.

Senão, acesse o site do Node.js e instale a versão LTS (Long Term Support).

Instalando e Configurando o JDK

Acesse o site da Oracle e faça o download do JDK 8 para o Windows x64. Aqui você vai precisar ter uma conta da Oracle para baixar, caso você não tenha é só fazer o cadastro.

Após baixar, prossiga com a instalação.

Configurando a Variável de Ambiente JAVA_HOME

Clique na Caixa de Pesquisa, localizado na Barra de Tarefa ao lado do botão Iniciar e digite: variáveis

Depois clique em Editar as variáveis de ambiente do sistema.

Nessa janela de Propriedades do Sistema, clique em Variáveis de Ambiente...

Na sessão das Variáveis do sistema, clique em Novo...

Em Nome da variável:, digite JAVA_HOME

Em Valor da variável:, digite o caminho do diretório de instalação do JDK, algo com: C:\Program Files\Java\jdk1.8.0_271

Depois clique em OK em todas essas janelas.

Instalando e Configurando o Android Studio

Baixe e instale o Android Studio.

Configurando o SDK (Software Development Kit)

Abra o Android Studio e clique em Configure, depois em SDK Manager.

Nesta lista, escolha o SDK mínimo que seu aplicativo vai suportar. Ao escolher um SDK mínimo, o seu aplicativo vai funcionar nos dispositivos que possuem essa versão do Android ou mais recente.

Escolher o SDK mais recente vai fazer com que o seu aplicativo tenha todos os recursos mais recentes do Android, porém ele só vai funcionar em uma fração pequena de dispositivos, mas escolher uma versão antiga significa que seu aplicativa não terá suporte aos novos recursos Android, mas vai funcionar em uma variedade maior de dispositivos.

Confira a Relação entre Versão da API e Porcentagem de Distribuição:

Isso depende da sua necessidade, no meu caso, vou escolher a API 22, eu também vou desmarcar o Android 11, que vem marcado por padrão após a Instalação do Android Studio.

Clique em OK e aguarde o Android Studio baixar e instalar o SDK.

Depois feche o Android Studio e abra novamente, pode ser que seja mostrado uma mensagem pedindo para atualizar o SDK, caso apareça, prossiga com a atualização.

Configurando o AVD (Android Virtual Device)

Para configurar o emulador, abra o Android Studio e clique em Configure, depois em AVD Manager.

Nessa janela, clique em + Create Virtual Device..., Deixe marcado o Pixel 2 e clique em Next.

A próxima etapa é escolher a Imagem do Sistema, ou seja, a API que escolhemos anteriormente. Ela não está aparecendo nas Recomentadas, mas ela está na aba x86 Images. Localize e selecione ela, depois clique em Next.

Depois disso, clique em Finish.

Você pode testar o emulador clicando no botão de executar, que está na coluna Actions.

Depois disso, feche o Android Studio.

Configurando a Variável de Ambiente do Android Studio

Clique na Caixa de Pesquisa, localizado na Barra de Tarefa ao lado do botão Iniciar e digite: variáveis

Depois clique em Editar as variáveis de ambiente do sistema.

Nessa janela de Propriedades do Sistema, clique em Variáveis de Ambiente...

Na sessão das Variáveis do sistema, clique em Novo...

Em Nome da variável:, digite ANDROID_HOME

Em Valor da variável:, digite %LOCALAPPDATA%\Android\Sdk

Depois clique em OK.

Agora na sessão das Variáveis de usuário, localize a variável Path e clique em Edita....

Nessa janela, clique em Novo e depois adicione a seguinte linha:

%LOCALAPPDATA%\Android\Sdk\platform-tools

Depois disso, clique em OK em todas essas janelas.

Criando um Novo Aplicativo

Para criar um aplicativo React Native, abra o Prompt de Comando, navegue até o seu diretório de desenvolvimento e digite o seguinte comando:

npx react-native init AwesomeProject

O comando npx irá instalar a versão mais recente do React Native direto no seu aplicativo, nenhum pacote será instalado globalmente.

Após isso, entre na pasta do seu projeto e abra o Visual Studio Code:

cd AwesomeProject
code .

Pode fechar o Prompt de Comando.

Dentro do VS Code, abra o terminal com o atalho Ctrl + ' e execute o seguinte comando:

npx react-native start

Esse comando irá iniciar o Empacotador Metro, ele irá adicionar todas as dependências e códigos JavaScript em um único arquivo. Além disso, ele mostra a saída Terminal, mostrando as mensagens de erro e do console.

Iniciando o Aplicativo

Crie um Novo Terminal, com o atalho Ctrl + Shift + ' e execute o seguinte comando:

npx react-native run-android

Esse comando irá iniciar o Emulador Android, com ele e o Metro aberto, qualquer alteração no código será enviada automaticamente para o Emulador.

Após terminar de abrir o Emulador e o Aplicativo for carregado, você pode fechar o novo terminar, mantendo aberto apenas o terminar do Metro.

Com isso feito, o seu aplicativo está pronto para começar o desenvolvimento.