Instalando dependências

Você precisará do Node, Watchman, a interface da linha de comandos React Native, um JDK e Android Studio.

Embora você possa usar qualquer editor de sua escolha para desenvolver seu aplicativo, será necessário instalar o Android Studio para configurar as ferramentas necessárias para criar seu aplicativo React Native para Android.

Node, Watchman e JDK

Recomendamos instalar o Node, Watchman e JDK usando o Homebrew . Execute os seguintes comandos em um terminal após instalar o Homebrew:

brew install yarn
brew install node
brew install watchman
brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8

Se você já instalou o Node no seu sistema, verifique se é o Nó 8.3 ou mais recente.

Watchman é uma ferramenta do Facebook para assistir mudanças no sistema de arquivos. É altamente recomendável que você o instale para obter melhor desempenho.

Se você já instalou o JDK em seu sistema, verifique se é o JDK 8 ou mais recente.

A CLI nativa do React

O node é fornecido com o npm, que permite instalar a interface da linha de comandos do React Native.

Execute o seguinte comando em um terminal:

npm install -g react-native-cli

Se você receber um erro como Cannot find module 'npmlog', tente instalar npm diretamente: curl -0 -L https://npmjs.org/install.sh | sudo sh.

Ambiente de desenvolvimento Android

A configuração do seu ambiente de desenvolvimento pode ser um pouco entediante se você é novo no desenvolvimento do Android. Se você já conhece o desenvolvimento do Android, é necessário configurar algumas coisas. Em qualquer um dos casos, siga cuidadosamente as próximas etapas.

1. Instale o Android Studio Baixe e instale o Android Studio . Escolha uma configuração “Personalizada” quando solicitado a selecionar um tipo de instalação. Verifique se as caixas ao lado de todas as opções a seguir estão marcadas:

Android SDK
Android SDK Platform
Performance (Intel ® HAXM)( Veja aqui para AMD )
Android Virtual Device
Em seguida, clique em “Avançar” para instalar todos esses componentes.

Se as caixas de seleção estiverem acinzentadas, você poderá instalar esses componentes posteriormente.

Depois que a instalação estiver concluída e a tela de boas-vindas aparecer, continue com a próxima etapa.

1. Instale o SDK do Android O Android Studio instala o SDK do Android mais recente por padrão. A criação de um aplicativo React Native com código nativo, no entanto, requer o Android 9 (Pie)SDK em particular. SDKs adicionais do Android podem ser instalados através do SDK Manager no Android Studio.

O SDK Manager pode ser acessado na tela “Bem-vindo ao Android Studio”. Clique em “Configurar” e selecione “Gerenciador de SDK”.

O Gerenciador de SDK também pode ser encontrado na caixa de diálogo “Preferências” do Android Studio, em Aparência e comportamento → Configurações do sistema → SDK do Android .

Selecione a guia “Plataformas do SDK” no Gerenciador de SDK e marque a caixa ao lado de “Mostrar detalhes do pacote” no canto inferior direito. Procure e expanda a Android 9 (Pie)entrada e verifique se os seguintes itens estão marcados:

Android SDK Platform 28

Intel x86 Atom_64 System Image ou Google APIs Intel x86 Atom System Image
Em seguida, selecione a guia “Ferramentas do SDK” e marque a caixa ao lado de “Mostrar detalhes do pacote” aqui também. Procure e expanda a entrada “Android SDK Build-Tools” e verifique se 28.0.3 está selecionada.

Por fim, clique em “Aplicar” para baixar e instalar o Android SDK e ferramentas de criação relacionadas.

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

Adicione as seguintes linhas ao seu arquivo $HOME/.bash_profileou $HOME/.bashrcconfig:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

.bash_profile é específico para bash. Se você estiver usando outro shell, precisará editar o arquivo de configuração específico do shell apropriado.

Digite source $HOME/.bash_profilepara carregar a configuração no seu shell atual. Verifique se ANDROID_HOME foi adicionado ao seu caminho executando echo $PATH.

Certifique-se de usar o caminho correto do SDK do Android. Você pode encontrar a localização real do SDK na caixa de diálogo “Preferências” do Android Studio, em Aparência e comportamento → Configurações do sistema → SDK do Android .

Criando um novo aplicativo

Use a interface da linha de comandos do React Native para gerar um novo projeto do React Native chamado “AwesomeProject”:

react-native init AwesomeProject

Isso não é necessário se você estiver integrando o React Native em um aplicativo existente, se “ejetado” do Create React Native App ou se estiver adicionando suporte Android a um projeto existente do React Native (consulte o Código específico da plataforma ). Você também pode usar uma CLI de terceiros para iniciar seu aplicativo React Native, como Ignite CLI .

[Opcional] Usando uma versão específica
Se você deseja iniciar um novo projeto com uma versão específica do React Native, use o --version argumento:

react-native init AwesomeProject --version X.XX.X
react-native init AwesomeProject --version react-native@next

Preparando o dispositivo Android

Você precisará de um dispositivo Android para executar seu aplicativo React Native Android. Pode ser um dispositivo Android físico ou, mais comumente, você pode usar um Dispositivo Virtual Android que permite emular um dispositivo Android no seu computador.

De qualquer forma, você precisará preparar o dispositivo para executar aplicativos Android para desenvolvimento.

Usando um dispositivo físico

Se você possui um dispositivo Android físico, pode usá-lo para desenvolvimento no lugar de um AVD conectando-o ao computador usando um cabo USB e seguindo as instruções aqui .

Usando um dispositivo virtual

Se você usar o Android Studio para abrir ./AwesomeProject/android, poderá ver a lista de dispositivos virtuais Android (AVDs) disponíveis, abrindo o “AVD Manager” no Android Studio. Procure um ícone parecido com este:

Gerenciador Android AVD Studio

Se você acabou de instalar o Android Studio, provavelmente precisará criar um novo AVD . Selecione “Criar dispositivo virtual …”, escolha qualquer telefone da lista e clique em “Avançar” e selecione a imagem Nível 28 da API de torta .

Se você não tiver o HAXM instalado, siga estas instruções para configurá-lo e volte ao Gerenciador do AVD.

Clique em “Avançar” e depois em “Concluir” para criar seu AVD. Nesse ponto, você deve poder clicar no botão triângulo verde ao lado do seu AVD para iniciá-lo e prosseguir para a próxima etapa.

Executando seu aplicativo React Native

Execute react-native run-androiddentro da pasta do projeto React Native:

cd AwesomeProject
react-native run-android

Se tudo estiver configurado corretamente, você verá o novo aplicativo em execução no emulador do Android em breve.

react-native run-android é apenas uma maneira de executar seu aplicativo – você também pode executá-lo diretamente no Android Studio.

Se você não conseguir fazer isso funcionar, consulte a página Solução de problemas .

Modificando seu aplicativo

Agora que você executou o aplicativo com sucesso, vamos modificá-lo.

Abra App.js no seu editor de texto de sua escolha e edite algumas linhas.
Pressione a R tecla duas vezes ou selecione Reload no menu Desenvolvedor ( ⌘M) para ver suas alterações!
É isso aí!
Parabéns! Você executou e modificou com êxito seu primeiro aplicativo React Native.

O que agora?

Ative o Live Reload no menu do desenvolvedor. Seu aplicativo será recarregado automaticamente sempre que você salvar as alterações!
Se você deseja adicionar esse novo código do React Native a um aplicativo existente, consulte o Guia de integração .