Comece a desenvolver para Android usando o React Native

Este guia irá ajudá-lo a começar a usar o React Native no Windows para criar um aplicativo multiplataforma que funcionará em dispositivos Android.

Visão geral

O React Native é um framework de aplicativos móveis de código aberto criado pelo Facebook. Ele é usado para desenvolver aplicativos para Android, iOS, Web e UWP (Windows), fornecendo controles de interface do usuário nativos e acesso total à plataforma nativa. Trabalhar com o React Native requer uma compreensão dos fundamentos do JavaScript.

Comece a usar o React Native instalando as ferramentas necessárias

1. Instale o Visual Studio Code (ou seu editor de código de escolha).

2. Instale o Android Studio para Windows e defina a variável de ambiente ANDROID_HOME. Siga as instruções em Configurar seu ambiente - React Native. Certifique-se de definir a seleção do sistema operacional de desenvolvimento como "Windows" e a seleção do sistema operacional de destino como Android.

3. Defina a variável de ambiente JAVA_HOME. A ferramenta Gradle usada para construir aplicativos Android requer um requisito de versão específico para o Java SDK. Para encontrar a versão suportada, no Android Studio, vá para Definições->Construção, Execução, Implantação->Ferramentas de Construção->Gradle. Anote o caminho selecionado na lista suspensa JDK do Gradle. Defina a variável de ambiente JAVA_HOME para esse caminho usando as seguintes etapas:

   • No menu de pesquisa do Windows, digite: "Editar as variáveis de ambiente do sistema", isso abrirá a janela Propriedades do Sistema.
   • Escolha Variáveis de Ambiente... e, em seguida, escolha Novo... em Variáveis de usuário.
   • Defina o nome da variável como JAVA_HOME e o valor para o caminho que você recuperou do Android Studio.

4. Instalar o NodeJS para Windows Você pode querer considerar o uso do Node Version Manager (nvm) para Windows se estiver trabalhando com vários projetos e versão do NodeJS. Recomendamos a instalação da versão LTS mais recente para novos projetos.

Crie um novo projeto com o React Native

1. Use npx, a ferramenta de executor de pacotes instalada com npm para criar um novo projeto React Native. a partir do Prompt de Comando do Windows, PowerShell, Windows Terminalou do terminal integrado no VS Code (Ver > Terminal Integrado).

   npx react-native init MyReactNativeApp
   

   Se você quiser iniciar um novo projeto com uma versão específica do React Native, poderá usar o argumento --version. Para obter informações sobre versões do React Native, consulte Versions - React Native.

   npx react-native@X.XX.X init  <projectName> --version X.XX.X
   

2. Abra seu novo diretório "MyReactNativeApp":

   cd MyReactNativeApp
   

3. Se você quiser executar seu projeto em um dispositivo Android de hardware, conecte o dispositivo ao computador com um cabo USB.

4. Se você quiser executar seu projeto em um emulador Android, você não deve precisar tomar nenhuma ação, pois o Android Studio é instalado com um emulador padrão instalado. Se você quiser executar seu aplicativo no emulador para um dispositivo específico. Clique no botão do AVD Manager na barra de ferramentas.

   .

5. Para executar seu projeto, digite o seguinte comando. Isso abrirá uma nova janela do console exibindo o Node Metro Bundler.

   npx react-native run-android
   

   

   

   Observação

   Se você estiver usando uma nova instalação do Android Studio e ainda não tiver feito nenhum outro desenvolvimento Android, poderá receber erros na linha de comando ao executar o aplicativo sobre como aceitar licenças para o Android SDK. Como "Aviso: Licença para o pacote Android SDK Platform 29 não aceita". Para resolver isso, você pode clicar no botão SDK Manager no Android Studio . Ou, você pode listar e aceitar as licenças com o seguinte comando, certificando-se de usar o caminho para o local do SDK em sua máquina.

   C:\Users\[User Name]\AppData\Local\Android\Sdk\tools\bin\sdkmanager --licenses
   

6. Para modificar o aplicativo, abra o diretório do projeto MyReactNativeApp no IDE de sua escolha. Recomendamos VS Code ou Android Studio.

7. O modelo de projeto criado por react-native init usa uma página principal chamada App.js. Esta página é pré-preenchida com muitos links úteis para informações sobre o desenvolvimento do React Native. Adicione algum texto ao primeiro elemento Text, como a cadeia de caracteres "HELLO WORLD!" mostrada abaixo.

   <Text style={styles.sectionDescription}>
     Edit <Text style={styles.highlight}>App.js</Text> to change this
     screen and then come back to see your edits. HELLO WORLD!
   </Text>
   

8. Recarregue o aplicativo para mostrar as alterações feitas. Existem várias maneiras de fazer isso.

   • Na janela do console do Metro Bundler, digite "r".
   • No emulador de dispositivo Android, toque duas vezes em "r" no teclado.
   • Em um dispositivo Android de hardware, agite o dispositivo para abrir o menu de depuração do React Native e selecione 'Recarregar'.