-
Notifications
You must be signed in to change notification settings - Fork 0
How to start with Expo
Seja muito bem vindo ao tutorial de como começar um projeto com Expo!
O vídeo referente a este tutorial está disponível neste link.
Expo é uma estrutura e uma plataforma para aplicações React universais. É um conjunto de ferramentas e serviços criados em torno de plataformas React Native e nativas que ajudam a desenvolver, construir, implantar e iterar rapidamente em aplicativos iOS, Android e web a partir da mesma base de código JavaScript / TypeScript.
Para começar, vamos configurar nosso ambiente de desenvolvimento com algumas ferramentas fundamentais para nossa aplicação front-end.
Existem duas ferramentas que você precisa para desenvolver aplicativos com Expo: um aplicativo de linha de comando chamado Expo CLI, utilizado para inicializar e servir seu projeto, e um aplicativo chamado Expo Go, para visualizar e interagir com seu aplicativo no iOS e Android.
No terminal da sua máquina, execute o comando a seguir:
npm install --global expo-cliCaso não tenha familiaridade com a ferramenta NPM, consulte o tutorial sobre Node.js aqui.
O Expo Go permite que você abra aplicativos que estão sendo servidos por meio da Expo CLI. A seguir se encontram os links de acesso para fazer download do Expo Go:
Uma vez que o Expo CLI e o Expo Go forem instalados, podemos criar nosso primeiro aplicativo.
Neste ponto, devemos ter o Expo CLI instalado em nossa máquina de desenvolvimento e o aplicativo Expo Go em um dispositivo ou emulador físico iOS ou Android.
No terminal da sua máquina, execute o comando a seguir:
expo init meu-projetoApós a execução do comando, será preciso selecionar um template. Escolha a opção “blank (typescript)”.
Acesse o diretório da sua aplicação utilizando o comando a seguir:
cd meu-projetoPara iniciar seu aplicativo, utilize o comando a seguir:
expo startQuando você executa o expo start (ou npm start), o Expo CLI inicia o Metro Bundler, que é um servidor HTTP que compila o código JavaScript de nosso aplicativo usando Babel e o serve ao aplicativo Expo. Ele também exibe Expo Dev Tools, uma interface gráfica para Expo CLI.
No seu iPhone ou iPad, abra o aplicativo "Câmera" padrão da Apple e escaneie o código QR que você vê no terminal ou no Expo Dev Tools.
No seu dispositivo Android, pressione "Scan QR Code" na guia "Projects" do aplicativo Expo Go e digitalize o código QR que você vê no terminal ou no Expo Dev Tools.
Pronto! Agora qualquer mudança feita no código do seu aplicativo poderá ser visualizada quase em tempo real no seu dispositivo.
Agora, vamos desenvolver um aplicativo mais funcional. Serão desenvolvidas duas telas: uma de login e outra de perfil de um usuário. Antes de iniciar o desenvolvimento, será preciso fazer a configuração de ambiente para uso da biblioteca React Navigation, necessária para a navegação entre as páginas de login e perfil.
Instale o pacote react-navigation com o comando a seguir, via terminal:
npm install @react-navigation/nativeInstale as dependências:
npm install react-native-reanimated react-native-gesture-handler react-native-screens @react-native-community/masked-view @react-navigation/stackInstale a dependência react-native-safe-area-context:
expo install react-native-safe-area-contextPronto! Agora o ambiente está pronto para o desenvolvimento da aplicação. Um vídeo com a configuração do ambiente e o desenvolvimento da aplicação pode ser acessado no início da página.