Primeiros passos com React Native e Expo SDK

Expo é uma plataforma de código aberto que torna desenvolver aplicativos móveis multi-plataforma iOS e Android muito mais fácil do que antes. O Expo SDK é uma série de bibliotecas nativas para cada plataforma iOS e Android e permite que o JavaScript acesse os recursos do sistema do dispositivo, como câmera, notificações push, armazenamento local, contatos e outros APIs de hardware e sistema operacional.

Pré-requisitos

Para instalar o Expo, você precisa do Node.js versão 12 ou mais recente em sua máquina porque as ferramentas de linha de comando e gerenciamento de dependências da Expo dependem da plataforma Node. Você pode verificar sua versão do Node executando o comando Node-v em seu terminal.

Expo oferece uma interface de linha de comando chamada Expo CLI . Ele é usado para testar o aplicativo enquanto ele está sendo desenvolvido no iOS ou Android.

 npm install-g expo-cli

Instalando o cliente móvel Expo para iOS e Android

Para testar a funcionalidade de seu aplicativo móvel, você precisará do aplicativo cliente Expo para Android e iPhone. Você pode encontrá-los na Google Play Store e a App Store .

Construindo um aplicativo Expo

Vamos construir um aplicativo Expo e ver como funciona. Você pode criar um novo aplicativo Expo com o seguinte comando:

 expo init your_app_name

Substitua your_app_name pelo nome do aplicativo que deseja construir. Depois de pressionar Enter, você será solicitado a selecionar o tipo de modelo para seu aplicativo.

Você pode escolher qualquer modelo que funcione para o seu aplicativo. Por enquanto, vou escolher “ fluxo de trabalho em branco ” para simplificar.

Em seguida, você será solicitado a instalar o modelo por meio do Yarn . Se você já instalou o Yarn, escolha sim ou, caso contrário, escolha continuar . Depois de seguir as próximas etapas, seu aplicativo estará pronto para uso.

Passe para os seguintes comandos para iniciar o projeto.

 cd 
npm start ou yarn start

Depois de executar com sucesso os comandos acima, ele irá lançar um novo ambiente de desenvolvimento metro. Você receberá o código QR, que deve ser digitalizado por meio do aplicativo cliente da Expo no Android e do aplicativo Câmera padrão em iPhones. Agora, você está pronto para ir.

Configurando o projeto em Expo and React Native

Nosso projeto consiste em vários arquivos importantes: App.json tem todas as configurações do aplicativo, como nome do aplicativo, versão do SDK, ícone e assim por diante. As dependências do aplicativo são listadas no arquivo package.json . Depois, há o App.js , que é executado quando o aplicativo é iniciado. Lá, você verá o método render , que envolve todos os componentes dentro de um único componente dentro da instrução de retorno.

Você pode usar o objeto styles na parte inferior do arquivo App.js para especificar os estilos dos componentes da IU. Mover estilos para fora do método render aumentará a legibilidade do código no React Native.

Aqui está o código de exemplo em App.js :

 import React from'react';
import {StyleSheet, View, Text} de'react-native'; exportar a classe padrão Main extends React.Component { //renderizar o método que retorna componentes RN render () { Retorna (   Meu primeiro aplicativo   ); } }
//codifique seus estilos aqui
estilos const=StyleSheet.create ({ título: { //Seus estilos aqui }, title_txt: { //Seus estilos aqui }
});

O que é Expo SDK?

Expo vem com várias bibliotecas integradas que são freqüentemente encontradas na maioria dos aplicativos. Consulte a documentação da Expo para obter mais detalhes sobre isso. No entanto, as seguintes bibliotecas serão úteis na maioria dos aplicativos que você cria:

• AppAuth , AuthSession : autentica usuários via OAuth
• SplashScreen : cria uma tela inicial quando lançando o aplicativo
• localização : gerencia l10n/i18n de seu aplicativo para fins de localização
• AppLoading : carrega ativos, fontes, e semelhantes
• MapView : usa mapas dentro do aplicativo
• ImagePicker / ImageManipulator : abre imagens ou vídeos do dispositivo
• Compartilhamento : compartilha dados entre o aplicativo e o dispositivo
• SecureStore : salva os dados no armazenamento do dispositivo
• Câmera : captura fotos e vídeos usando o do dispositivo câmera

Aqui estão alguns recursos extras que o Expo oferece:

• Notificações : notificações push do serviço Expo Push
• Admob : SDK do Google para AdMob
• FacebookAds : Facebook SDK
• Branch : integrações usando branch.io
• Amplitude : análise de amplitude para aplicativos móveis

Além disso, você tem acesso a:

• Áudio : reproduz ou grava sons
• AV : reproduz áudio/vídeo
• ART : desenha coisas usando SVG
• Brilho : gerencia o brilho
• BackgroundFetch : executa tarefas em segundo plano
• Pagamentos : suporta integrações de pagamento via Stripe usando Apple Pay e Android Pay

Em geral, existem cerca de 80 APIs que você pode acessar depois de instalá-lo via Yarn, npm ou Expo sem fechar o empacotador metro, que é apenas outra maneira de acelerar seu progresso.

Criação de uma tela inicial usando Expo

Vamos aprender como a Expo funciona adicionando uma tela inicial. Primeiro, crie uma imagem no formato.png, que é apropriado para uma tela inicial em seu aplicativo. Em seguida, coloque essa imagem no diretório do seu aplicativo. Aqui, adicionei-o à raiz do diretório.

Agora, instale a biblioteca expo-splash-screen no aplicativo usando o seguinte comando:

 expo install expo-splash-screen

A seguir, crie um novo arquivo e importe a biblioteca acima. Depois disso, crie uma função para exibir a tela inicial, assim:

 import React, {useCallback, useEffect, useState} de'react';
import {StyleSheet, Text, View} de'react-native'; //importe a biblioteca da tela inicial aqui
import * como SplashScreen de'expo-splash-screen';
//importe sua imagem do diretório
import splashScreenImage de'./splashScreenImage.png' função padrão de exportação SplashScreen () { const [carregado, setLoaded]=useState (falso); useEffect (()=> { função assíncrona prepare () { tentar { //Mantenha nossa tela inicial ativada enquanto o aplicativo busca os recursos esperar SplashScreen.preventAutoHideAsync (); //Pré-carregue qualquer conteúdo aqui //Além disso, você pode fazer qualquer chamada de API aqui //Atrasar o carregamento por um segundo aguarda nova promessa (resolve=> setTimeout (resolve, 1000)); } catch (e) { console.warn (e); } finalmente { //Informe ao aplicativo que nossos recursos terminaram de carregar setLoaded (true); } } preparar(); }, []); const onLayoutRootView=useCallback (async ()=> { if (carregado) { //Agora, vamos informar nossa tela inicial para desaparecer à medida que nossos recursos são carregados. aguarde SplashScreen.hideAsync (); } }, [carregado]); if (! carregado) { return null; } Retorna ( //Faça aqui a sua visualização no Splash Screen.    );
}

Finalmente, importe o arquivo de seu App.js e chame nossa função SplashScreen lá.

 import React from'react';
import {StyleSheet, View, Text} de'react-native';
//importe nosso componente aqui
importe SplashScreen de'./SplashScreen.js'; exportar a classe padrão Main extends React.Component { render () { Retorna ( //coloque nosso componente aqui.    Meu primeiro aplicativo   ); }
}

Inicie seu aplicativo e veja o aplicativo cliente da Expo para ver os resultados!

Publicação e upload do aplicativo para lojas

Quando chegar a hora de lançar o aplicativo nas lojas, você terá algumas opções para selecionar.

 comando #Build
expo build: [ios | android]

Este comando iniciará a instalação de um pacote na nuvem em vez de localmente, eliminando a necessidade de um laptop ou PC de alto desempenho. Também não há problema se você for um usuário do Windows, porque nunca usou o Xcode. Basta esperar a conclusão da compilação e pronto.

Depois que a compilação entrar na fila, você pode sair do terminal sem hesitar. Se você precisa saber o status da construção, navegue até o URL abaixo do texto “Você pode monitorar a construção em”.

Lá, você encontrará um botão de download que estará disponível assim que a compilação for concluída. Enquanto isso, você pode esperar no terminal para obter uma conexão direta para fazer o download do pacote.

Agora, como fazemos upload para as lojas? A maneira mais fácil de fazer isso com o Expo é usar o seguinte comando:

 upload expo: [ios | android]

Ótimo! Tudo pronto!

Novos recursos adicionados à Expo em 2021

Vários novos recursos foram adicionados à Expo em 2021. Aqui estão alguns dos mais populares.

Ferramentas integradas para desenvolvedores

Por meio da CLI, você pode acessar o menu do desenvolvedor, inspecionar componentes e rastrear os resultados. Basta executar o Expo start e clicar em m para acessar o menu do desenvolvedor e shift + m para acessar o monitor de desempenho ou o inspetor de elemento em aplicativos nativos.

Forçar recarregamento

Pode ser difícil sacudir suas máquinas a cada poucos minutos! Ao pressionar r na IU do Terminal, você pode recarregar computadores, laptops, simuladores e navegadores conectados. Este método é compatível com iOS, Android, web e todos os dispositivos físicos.

Configuração automática para TypeScript

Como a instalação do TypeScript pode ser um incômodo, eles o tornaram totalmente automático. Simplesmente gere um arquivo tsconfig.json em branco e execute o comando de início da Expo, e a Expo cuidará do resto. Você pode encontrar mais detalhes sobre isso nos documentos da Expo em “TypeScript. ”

Erros significativamente melhores

Ninguém gosta de insetos. Então, eles os refinaram no SDK 41 para serem descritivos, úteis e práticos. Apenas os rastreamentos de pilha mais importantes são mostrados e os erros e avisos são identificados. Os mapas de origem também foram atualizados e os traços de código gerados foram silenciados.

Depure sua configuração

Agora você pode ver os resultados avaliados de app.config.js ou app.json usando a última ordem de configuração da Expo. Use o comando expo config--type public para ver o arquivo de manifesto do aplicativo usado na publicação da Expo.

Interações da Apple Store aprimoradas e capacidade de conexão por meio de seu terminal

A Expo CLI fornece conexões para corrigir problemas rapidamente, enquanto outras ferramentas mostram um 401. Se você precisar fazer uma alteração no pagamento ou assinar um contrato, basta resolver alguns cliques e voltar ao desenvolvimento.

Em geral, o Expo agora é mais rápido, oferece autenticação inteligente, gerenciamento de erros aprimorado e uma visão completa dos problemas dinâmicos diretamente do console.

Limitações da Expo

Embora haja muitos novos recursos impressionantes, você também deve estar ciente de algumas das limitações da Expo:

1. A execução de código em segundo plano não é compatível com os aplicativos Expo. Isso significa que você não pode executar o código que escuta as mudanças de localização enquanto o aplicativo está fechado.
2. Os aplicativos Expo são confinados às APIs nativas suportadas pelo Expo SDK. Isso significa que, se o aplicativo precisar de um caso de uso exclusivo, a única maneira de desenvolvê-lo é com o código React Native básico ou usando a biblioteca ExpoKit.
3. Expo liga você ao seu conjunto de ferramentas. Isso significa que você não poderá usar nenhuma das outras ferramentas para o desenvolvimento do React Native, incluindo ferramentas de linha de comando e estruturas de IU, simplesmente instalando-as. No entanto, a boa notícia é que o Expo SDK é compatível com aplicativos React Native básicos, de modo que ejetar seu aplicativo da Expo não será um desafio.
4. Binários autônomos em aplicativos Expo podem ser construídos apenas quando estão online. A ferramenta de linha de comando fornecida pela Expo permite que os desenvolvedores iniciem o processo de construção de seus aplicativos nos servidores da Expo. Quando terminar, você receberá um URL para acessar um arquivo.apk ou.ipa para download.

Apesar das limitações acima, Expo é valioso porque é uma plataforma totalmente funcional com amplo suporte para APIs Android e iOS proeminentes. Isso significa que ele cobre a maioria dos recursos que geralmente são exigidos pelos aplicativos. Como resultado, não é necessário olhar para fora da Expo para aplicar recursos nativos.

Conclusão

React Native é a estrutura mais popular para o desenvolvimento de aplicativos móveis nativos. Expo simplifica esse processo ainda mais com seu SDK e ferramentas de desenvolvedor. Se você é um desenvolvedor React Native, você deve sempre ficar de olho na Expo e aprender sobre suas vantagens e limitações.

Nesta postagem do blog, criamos e publicamos um aplicativo com a Expo, e você certamente pode estender esse aplicativo adicionando mais recursos. Em geral, Expo SDK é uma grande coleção de bibliotecas voltadas para quase todos os recursos que você deseja em um aplicativo móvel. Obrigado por ler.

A postagem Primeiros passos com React Native e Expo O SDK apareceu primeiro no LogRocket Blog .