Partilhar via

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.

Observação

Você também pode considerar instalar e usar o Terminal do Windows para trabalhar com a sua interface de linha de comando (CLI) preferida, assim como o Git para controlo de versão. O Java JDK vem com o Android Studio v2.2+, mas se você precisar atualizar seu JDK separadamente do Android Studio, use o Windows x64 Installer.

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.

    Captura de ecrã do botão AVD Manager .

  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

    Screenshot do Metro Bundler numa janela da consola

    Captura de tela do aplicativo padrão React Native em execução em um emulador 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 Captura de tela do botão SDK Manager. 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'. Captura de tela do menu de depuração do React Native