React Native - Configuração do Ambiente

Há algumas coisas que você precisa instalar para configurar o ambiente para React Native. Usaremos OSX como nossa plataforma de construção.

Sr. Não.	Programas	Descrição
1	NodeJS e NPM	Você pode seguir nosso tutorial de configuração do ambiente NodeJS para instalar o NodeJS.

Etapa 1: instalar create-react-native-app

Depois de instalar o NodeJS e o NPM com sucesso em seu sistema, você pode prosseguir com a instalação de create-react-native-app (globalmente como mostrado abaixo).

C:\Users\Tutorialspoint> npm install -g create-react-native-app

Etapa 2: Criar projeto

Navegue pela pasta necessária e crie um novo projeto reagente nativo conforme mostrado abaixo.

C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative

Depois de executar o comando acima, uma pasta com nome específico é criada com o seguinte conteúdo.

Etapa 3: NodeJS Python Jdk8

Certifique-se de ter Python NodeJS e jdk8 instalado em seu sistema, caso contrário, instale-os. Além disso, é recomendável instalar a versão mais recente do yarn para evitar certos problemas.

Etapa 4: instalar React Native CLI

Você pode instalar a interface de linha de comando react nativa no npm, usando o comando install -g react-native-cli conforme mostrado abaixo.

npm install -g react-native-cli

Etapa 5: comece a reagir nativo

Para verificar a instalação, navegue pela pasta do projeto e tente iniciar o projeto usando o comando start.

C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm start

Se tudo correr bem, você receberá um código QR conforme mostrado abaixo.

Conforme instruído, uma maneira de executar aplicativos nativos Rea em seu dispositivo Android é usando o Expo. Instale o cliente expo em seu dispositivo Android e escaneie o código QR obtido acima.

Etapa 6: Ejetar o projeto

Se você deseja executar o emulador do Android usando o Android Studio, saia da linha de comando atual pressionando ctrl+c.

Então, execute run eject command Como

npm run eject

Isso mostra as opções de ejeção, selecione a primeira usando as setas e pressione Enter.

Em seguida, você deve sugerir o nome do aplicativo na tela inicial e o nome do projeto do estúdio Android e projetos Xcode.

Embora seu projeto tenha sido ejetado com sucesso, você pode obter um erro como -

Ignore este erro e execute o react nativo para android usando o seguinte comando -

react-native run-android

Mas, antes disso, você precisa instalar o Android Studio.

Etapa 7: Instalando o Android Studio

Visite a página da web https://developer.android.com/studio/ e baixe o Android Studio.

Após baixar o arquivo de instalação do mesmo, clique duas vezes sobre ele e prossiga com a instalação.

Etapa 8: Configurando o AVD Manager

Para configurar o AVD Manager, clique no ícone respectivo na barra de menu.

Etapa 9: Configurando o AVD Manager

Escolha uma definição de dispositivo, Nexus 5X é sugerível.

Clique no botão Avançar para ver uma janela de imagem do sistema. Selecione osx86 Images aba.

Em seguida, selecione Marshmallow e clique em Avançar.

Finalmente, clique no botão Concluir para finalizar a configuração do AVD.

Após configurar seu dispositivo virtual, clique no botão play na coluna Actions para iniciar o emulador de Android.

Etapa 10: executando o Android

Abra o prompt de comando, navegue pela pasta do seu projeto e execute o react-native run-android comando.

Então, a execução do aplicativo começa em outro prompt, você pode ver seu status.

Em seu emulador de Android, você pode ver a execução do aplicativo padrão como -

Etapa 11: local.properties

Abra o android pasta na pasta do seu projeto SampleReactNative/android(nesse caso). Crie um arquivo com o nomelocal.properties e adicione o seguinte caminho nele.

sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk

aqui, substitua Tutorialspoint com seu nome de usuário.

Etapa 12: Recarga a quente

E para construir o aplicativo modifique o App.js e as mudanças serão atualizadas automaticamente no emulador do Android.

Caso contrário, clique em Android emulator pressione ctrl+m então, selecione Enable Hot Reloading opção.