Última atualização: 21/11/2024

O que você vai fazer

Preparar o ambiente de desenvolvimento de aplicações React Native em um sistema operacional Windows 10

Referências

Vamos usar a versão LTS (long-term support) mais recente que é v22.11.0. Baixe o instalador direto do site site oficial. Após a instalação, você poderá verificar a instalação com o comando:

node -v

O JDK 21 é a versão mais recente de Suporte de Longo Prazo (LTS) da Plataforma Java SE. O JDK 21 receberá atualizações sob o NFTC, até setembro de 2026. Baixe o instalador e instale o JDK para rodar o emulador Android.

Baixe o instalador do vscode e instale.

Apos a instalação do VS Code, adicione as seguintes extensões:

Prettier - Code formatter

JavaScript (ES6) code snippets

Node.js Modules Intellisense

Neste momento podemos optar por instalar a IDE Android Studio ou utilizar as ferramentas de linha de comando para instalar o Android SDK. Vamos abordar os dois caminhos.

1. Android Studio

A instalação do IDE será apenas para aproveitar a interface gráfica para realizar a instalação do Android SDK. Neste curso não usaremos a IDE para edição de código. Se quiser poderá utilizar a instalação usando as ferramentas de linha de comando e passar para o item 2.

1.1 Instalar o IDE

Baixe o instalador. Enquanto estiver no assistente de instalação do Android Studio, certifique-se de que as caixas ao lado de todos os itens a seguir estejam marcadas:

12. Instalar o Android SDK

O Android Studio instala o Android SDK mais recente por padrão. No entanto, construir um aplicativo React Native com código nativo requer o Android 14 (UpsideDownCake) SDK em particular.

SDKs Android adicionais podem ser instalados por meio do SDK Manager no Android Studio. Para fazer isso, abra o Android Studio, clique no botão "More Actions" e selecione "SDK Manager".

Android Studio Welcome

Selecione a aba "SDK Platforms" no SDK Manager, então marque a caixa ao lado de "Show Package Details" no canto inferior direito. Procure e expanda a entrada Android 14 (UpsideDownCake), então certifique-se de que os seguintes itens estejam marcados:

Em seguida, selecione a aba "SDK Tools" e marque a caixa ao lado de "Show Package Details" aqui também. Procure e expanda a entrada Android SDK Build-Tools, então certifique-se de que 34.0.0 esteja selecionado. Por fim, clique em "Apply" para baixar e instalar o Android SDK e as ferramentas de build relacionadas.

2. Instalando o Android SDK com ferramentas de linha de comando

  1. Faça o download do pacote de ferramentas de linha de comando
  2. Mova a pasta cmdline-tools descompactado para a pasta C:\Users\\AppData\Local\Android\Sdk.
  3. Defina a seguinte variável de ambiente (veja como fazer no passo 3 a seguir)

ANDROID_SDK_ROOT="C:\Users\\AppData\Local\Android\Sdk"

  1. Adicione à variável de ambiente PATH, os seguintes caminhos:

"C:\Users\\AppData\Local\Android\Sdk\cmdline-tools\latest\bin"

"C:\Users\\AppData\Local\Android\Sdk\emulator"

  1. Instalar a versão mais nova das cmdline-tools

entre na pasta C:\Users\\AppData\Local\Android\Sdk\cmdline-tools\bin e execute o comando:

sdkmanager --sdk_root=%ANDROID_SDK_ROOT% "cmdline-tools;latest"

  1. Instale as plataformas, ferramentas de compilação e extras

sdkmanager "platforms;android-33" "build-tools;33.0.2"

sdkmanager "extras;google;m2repository" "extras;android;m2repository"

sdkmanager "platform-tools" "tools"

sdkmanager --licenses

3. Configure a variável de ambiente ANDROID_HOME

As ferramentas React Native exigem que algumas variáveis ​​de ambiente sejam configuradas para criar aplicativos com código nativo. Abra as configurações do windows e procure por "variáveis de ambiente".

Clique em "Variáveis de Ambiente" e em "Novo..." (Variáveis do sistema) para criar uma nova variável de sistema ANDROID_HOME que aponta para o caminho para seu Android SDK:

O SDK é instalado, por padrão, no seguinte local: C:\Users\nome_do_usuário\AppData\Local\Android\Sdk

4. Adicionar platform-tools ao Path

Procure pela palavra Path na lista de variáveis do sistema e clique no botão Editar... e na janela que aparecer clique no botão Novo. O caminho é C:\Users\nome_do_usuário\AppData\Local\Android\Sdk\platform-tools.
  1. Ativar as opções de desenvolvedor do seu dispositivo Android
  2. Conectar o dispositivo ao computador com um cabo USB
  3. Baixe o aplicativo do github https://github.com/angoti/app-matematicando
  4. Execute no terminal Command Prompt: npm install
  5. Veja o vídeo.

Edite o arquivo \node_modules\react-native\ReactAndroid\cmake-utils\ReactNative-application.cmake e adicione o código string(REPLACE "\\" "/" input_SRC "${input_SRC}") antes da linha 42.
  1. Execute o comando para criar o projeto Android
npx expo prebuild
  1. Adicione a linha indicada abaixo no arquivo /android/build.gradle:
buildscript {
    ext {
        buildToolsVersion = "a.b.c"
        minSdkVersion = x
        compileSdkVersion = y
        targetSdkVersion = z
        googlePlayServicesAuthVersion = "20.7.0" // <--- 
    }
// ...

}
  1. Adicione as linhas abaixo no fim do arquivo /android/gradle.properties
# config para otimizar o build
org.gradle.daemon=true
org.gradle.configureondemand=true
org.gradle.parallel=true
org.gradle.caching=true

Para executar o App temos que usar o seguinte comando:

npx expo run:android

Para limpar o cache:

npx expo run:android --no-build-cache