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-appEtapa 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 MyReactNativeDepois 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 startSe 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 ejectIsso 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-androidMas, 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\\Sdkaqui, 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.
