Compreender a exposição no ecossistema nativo de reação

Reagir aplicativos nativos são construídos com JavaScript, mas dependem de módulos nativos para recursos como câmera, Bluetooth ou GPS. Tradicionalmente, configurar esses módulos nativos requeria o Android Studio, Xcode, Gradle e CocoaPods – uma curva de aprendizagem íngremes para recém-chegados. Expo abstrai essa complexidade. Fornece um fluxo de trabalho gerenciado onde a maioria das capacidades nativas são pré-configuradas, permitindo que você escreva código e veja os resultados imediatamente. Expo não é uma estrutura separada; é uma coleção de ferramentas -[Expo CLI[, Expo Go[ (a aplicação do cliente para testes), e [Expo SDK[[] (um conjunto de bibliotecas que embrulham APIs nativas).

A distinção chave é entre os fluxos de trabalho geridos e em aberto dentro da Expo. Iniciantes quase sempre começam com o fluxo de trabalho gerenciado, onde a Expo lida com a configuração nativa. À medida que seu aplicativo cresce, você pode “ejetar” para um fluxo de trabalho nu (agora chamado “expo prebuild”) e assumir o controle total do código nativo. Este caminho garante que você nunca está bloqueado, enquanto ainda desfruta de um início suave.

Por que a exposição é importante para iniciantes (e além)

Antes da Expo, muitos desenvolvedores passaram dias apenas obtendo um ambiente nativo para compilar. Pontos comuns de dor incluem descompassos de versão entre SDKs Android, vinculando bibliotecas nativas manualmente e depurando erros de compilação criptografados. Expo elimina estes obstáculos:

  • Configuração nativa do Zero: Não há necessidade de instalar o Android Studio ou Xcode para iniciar. Use o aplicativo Expo Go do seu telefone para visualizar instantaneamente.
  • SDK unificado: Todas as bibliotecas Expo são versionadas juntas. Você não precisa se preocupar com biblioteca A sendo incompatível com biblioteca B.
  • Atualizações sobre o ar (OTA): Empurre as alterações do JavaScript diretamente para os usuários sem passar por comentários de lojas de aplicativos.
  • Compartilhamento instantâneo: Gere um código QR para compartilhar seu aplicativo em andamento com colegas de equipe ou clientes.
  • Comunidade forte e documentação: Os documentos oficiais da Expo estão entre os melhores do ecossistema nativo React.

Por essas razões, a Expo é agora o ponto de partida recomendado pela própria equipa React Native. O guia oficial React Native docs iniciantes para usar a Expo se forem novos para o desenvolvimento móvel.

Configurar seu ambiente de exposição

Pré-requisitos

  • Node.js (versão 16 ou posterior) – download de nodejs.org[.
  • A editor de código (O código VS é altamente recomendado).
  • A dispositivo móvel com a aplicação Expo Go instalada iOS ou Android].
  • (Opcional) Uma conta Expo para publicação e partilha – inscreva-se na exposição.dev.

Instalando Expo CLI

Expo CLI é a ferramenta de linha de comando que você usa para criar, executar e construir aplicativos. Instale-o globalmente através do npm:

npm install -g expo-cli

Se você usar o Fio, você pode executar em vez disso. Verifique a instalação com . Observe que a partir de 2024, a Expo está mudando para como o inicial padrão. Enquanto ainda funciona, recomendamos usar o método mais novo:

npx create-expo-app MyFirstApp --template blank

Isso cria um projeto mínimo com a versão mais recente do Expo SDK e suporte embutido para TypeScript, se desejar.

Explorando a Estrutura do Projeto

Once your project is created, open it in your editor. Key files and directories:

  • App.js (ou App.tsx) – o ponto de entrada de sua aplicação. Tudo que você renderiza começa aqui.
  • pacote.json – lista dependências (reagir, reagir-nativo, expo, e quaisquer módulos Expo que você instalar).
  • app.json – arquivo de configuração para o seu projeto Expo (nome da aplicação, ícone, tela de abertura, permissões, etc.).
  • node módulos – contém todos os pacotes instalados.
  • .expo – estado local para Expo, não commit to version control.

A beleza da Expo é que você não verá pastas android/ ou iOS/ a menos que você execute mais tarde. Tudo é gerenciado através da Expo SDK.

Executando sua aplicação pela primeira vez

Navegue para o seu diretório de projeto:

cd MyFirstApp

Iniciar o servidor de desenvolvimento:

npx expo start

Um código QR aparece no terminal (ou uma página Web abre com o código QR). Importante: No iOS, use a aplicação Câmera padrão; no Android, use a aplicação Expo Go para verificar. A aplicação carregará no seu dispositivo, e quaisquer alterações que você salvar no seu editor de código irão refletir imediatamente (recarregamento a quente). Você também pode usar um emulador Android/iOS no seu computador se você tiver as alterações configuradas.

Resolver problemas comuns no início

  • Problemas de conexão: Certifique-se de que seu telefone e computador estão na mesma rede Wi-Fi. Se isso falhar, use o modo pressionando ] no terminal Expo CLI. Isso funciona mesmo em diferentes redes.
  • Expo Go app mostra “Não é possível encontrar um aplicativo”: Isso geralmente significa que o servidor não começou completamente. Espere os registros para dizer “Metro empacotador pronto.” Em seguida, digitalize novamente.
  • Bundler encravou : Delete a pasta e tente para limpar o cache.

Construindo sua primeira tela: Um exemplo prático

Vamos criar uma tela simples com um botão que mostra um alerta. Substitua o conteúdo de com:

import React from 'react';
import { View, Text, Button, Alert, StyleSheet } from 'react-native';

export default function App() {
 const showAlert = () => {
 Alert.alert('Hello!', 'You clicked the button.');
 };

 return (
 <View style={styles.container}>
 <Text style={styles.title}>Welcome to Expo!</Text>
 <Button title="Click Me" onPress={showAlert} />
 </View>
 );
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#f0f0f0',
 },
 title: {
 fontSize: 24,
 marginBottom: 20,
 },
});

Salve o arquivo. Seu dispositivo deve mostrar instantaneamente a tela. Pressionar o botão ativa o alerta nativo. Observe que você não escreveu nenhum código Java/Kotlin ou Swift—Expo lidou com a ponte.

Adicionando navegação com o Roteador Expo

A maioria dos aplicativos tem várias telas. Expo Router é a biblioteca de navegação recomendada porque usa roteamento baseado em arquivos (semelhante ao Next.js). Ele suporta links profundos, guias, pilhas e modais diretamente da caixa.

Instalar o Roteador de Exposição

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants

Então ajuste o seu para definir o ponto de entrada para . Crie um diretório no seu root do projeto. Dentro dele, crie para o ecrã inicial e para um segundo ecrã. Estrutura do ficheiro:

app/
 index.js
 about.js
 _layout.js (optional, for shared layout)

Em :

import { Link } from 'expo-router';
import { View, Text } from 'react-native';

export default function Home() {
 return (
 <View>
 <Text>Home Screen</Text>
 <Link href="/about">Go to About</Link>
 </View>
 );
}

Quando o usuário toca no link, o aplicativo navega para sem nenhuma configuração. Este padrão escala para centenas de telas e é muito mais fácil do que as configurações tradicionais de navegação React.

Acessando recursos do dispositivo com Expo SDK

A Expo oferece mais de 50 módulos para a funcionalidade do dispositivo. Alguns comumente usados:

Câmera

npx expo install expo-camera

Você pode solicitar permissões, tirar fotos e gravar vídeo. Uso do exemplo:

import { Camera } from 'expo-camera';
// ... request permission with Camera.requestCameraPermissionsAsync()

Localização

npx expo install expo-location

Obtenha a posição atual do usuário, as alterações de localização do relógio ou endereços de geocódigo.

Notificações

npx expo install expo-notifications

Agendar e lidar com notificações locais e push. Expo ainda fornece um serviço de notificação push para que você não precise de uma infra- estrutura personalizada para enviar tokens.

Sistema de Ficheiros

npx expo install expo-file-system

Leia, escreva e gerencie arquivos no dispositivo. Útil para cache de imagens ou baixar conteúdo.

Como estes módulos já estão ligados no fluxo de trabalho gerenciado da Expo, você pode começar a usá- los imediatamente após instalar o pacote npm. Nenhum comando de ligação nativo necessário.

Depurando e Inspecionando sua Aplicação

A depuração é simples na Expo. Quando você executa [[FLT: 31], o pacote Metro fornece um menu de desenvolvimento. No seu dispositivo, agite-o (ou use o menu de depuração na tela no Android) para acessar opções:

  • Recarregar – recarregar o pacote JavaScript.
  • Inspetor aberto – abre React DevTools em um navegador para inspetor componente.
  • Alternar Depuração remota de JS – habilita depuração em DevTools Chrome (você pode definir pontos de interrupção em seu JavaScript).
  • Mostrar Element Inspector – toque em elementos de UI para ver seus adereços e estilos.

Para solicitações de rede, você pode usar ferramentas como Reagir Depurador Nativo ou o inspetor de rede embutido no Chrome DevTools quando a depuração remota está ligada. Além disso, os registros da Expo aparecem no terminal onde você iniciou o servidor, mostrando traços de pilha e saída de console.log.

Usar o Flipper com a Expo

Se você preferir o depurador Flipper do Facebook, você pode configurar o fluxo de trabalho da Expo para apoiá-lo, mas para o fluxo de trabalho gerenciado, as ferramentas incorporadas geralmente são suficientes. Muitos desenvolvedores dependem de Registros de desenvolvedor da Expo e Reagir DevTools[] para 90% das tarefas de depuração.

Estado-Maior numa Aplicação Expo

Os aplicativos Expo são aplicativos React Native, então o gerenciamento de estado funciona exatamente da mesma forma. Você pode usar:

  • Reagir o Contexto e usar o Redutor para o estado simples a moderadamente complexo.
  • Zustand ou Jotai] para uma biblioteca de estado leve, sem caldeira.
  • Redux Toolkit para aplicações em grande escala com muitas fatias de estado interligadas.

A Expo não impõe qualquer escolha específica. Para iniciantes, é recomendável começar com os ganchos embutidos do React. Você sempre pode migrar para uma solução mais sofisticada mais tarde.

Exemplo com o Contexto de Reagir:

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
 const [theme, setTheme] = useState('light');
 return (
 <ThemeContext.Provider value={{ theme, setTheme }}>
 {children}
 </ThemeContext.Provider>
 );
}
export const useTheme = () => useContext(ThemeContext);

Testando sua aplicação

Expo suporta o Jest fora da caixa. Execute e configure o Jest no package.json. Você pode escrever testes unitários para seus componentes e instantâneos. Para testes de ponta a ponta, Detox[ funciona bem, mas requer construções nativas. Para o fluxo de trabalho gerenciado, considere Maestro[ – uma ferramenta de teste de interface móvel que funciona com Expo Go.

Exemplo de um teste simples para o componente do botão:

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import App from '../App';

test('button shows alert', () => {
 const { getByText } = render(<App />);
 fireEvent.press(getByText('Click Me'));
 // Assert that Alert was called (use jest.spyOn)
});

Construindo e publicando seu aplicativo

Uma vez que seu aplicativo estiver pronto, você vai querer publicá-lo na App Store e Google Play. Expo simplifica isso com serviços de construção em nuvem.

Serviços de aplicações de exposição (EAS)

EAS Build cria binários nativos prontos para produção sem que você tenha que instalar Xcode ou Android Studio. Passos:

  1. Instalar :
  2. Entrar em:
  3. Configurar com perfis de compilação (desenvolvimento, visualização, produção).
  4. Executar: ou ]

O EAS constrói seu aplicativo na nuvem e retorna um arquivo .ipa ou .apk. Você pode então enviar para lojas usando .

Atualizações de ar livre

Com , você pode empurrar as atualizações do JavaScript diretamente para os usuários sem reenviar para as lojas. Configure um canal no app.json e execute (ou use a atualização do EAS). O aplicativo verifica se há atualizações no lançamento e baixa o pacote mais recente. Este é um trocador de jogo para corrigir erros rapidamente.

Exemplo de configuração de atualização app.json:

{
 "expo": {
 "updates": {
 "url": "https://u.expo.dev/YOUR_PROJECT_ID",
 "enabled": true
 }
 }
}

Limitações do fluxo de trabalho gerenciado

Embora a Expo seja poderosa, existem cenários em que você pode precisar ejetar para um fluxo de trabalho nu:

  • Módulos personalizados nativos não disponíveis na Expo SDK (por exemplo, uma nova biblioteca Bluetooth que não foi embrulhada).
  • Atribuições de fundo que precisam ser executadas indefinidamente (Expo Go e aplicativos gerenciados têm limitações na execução de fundo).
  • Push notification customization além do que a Expo oferece (por exemplo, sons de notificação personalizados ou mídia rica).
  • Grandes tamanhos de arquivos com certas bibliotecas nativas (aplicações gerenciadas incluem toda a Expo SDK, que adiciona ~20MB).
  • Precisa executar o código antes da inicialização do aplicativo (aplicações gerenciadas têm um ponto de entrada fixo).

Felizmente, você pode “ejectar” (realmente executar ]] a qualquer momento. Isso gera as pastas e , permitindo que você personalize o código nativo. Depois de fazer isso, você pode continuar usando as ferramentas da Expo, mas perder a conveniência de visualização instantânea com Expo Go. No entanto, você ainda pode usar as atualizações EAS Build e OTA.

Melhores práticas para o desenvolvimento da exposição

Manter a sua Expo SDK Actualizada

A Expo lança uma nova versão SDK a cada poucos meses. Atualizar é relativamente indolor: execute e corrija qualquer alteração de quebra. A manutenção atual garante que você tenha as mais recentes APIs e patches de segurança.

Usar o Tipo de Texto a partir do Início

Expo first-class suporta TypeScript. Quando você executa , escolha o modelo TypeScript. Ele captura muitos erros precocemente e melhora o preenchimento automático do IDE.

Otimizar os Activos de Imagem

Use para comprimir imagens para o seu aplicativo. Além disso, alavancagem para carregamento de imagens performantes com cache e placeholders.

Aproveite a Expo Community

O servidor de Discord, fóruns e discussões do GitHub são extremamente ativos. Muitos problemas comuns foram resolvidos. Antes de escrever código personalizado, procure por Documentação de Expo ou receitas comunitárias.

Plano para os requisitos da App Store

Mesmo com a Expo, você deve cumprir as políticas da Apple e do Google. Certifique-se de que seu aplicativo tenha manifestos de privacidade, ícones adequados e telas de abertura. Use para definir permissões e metadados de aplicativos.

Pistas comuns e como evitá - las

  • Esquecendo-se de instalar dependências de pares: Ao usar módulos Expo, às vezes você precisa instalar manualmente pacotes relacionados (por exemplo, ] para navegação). O CLI frequentemente avisa.
  • Sobreusando console.log na produção: Remova todas as instruções do console antes de construir. Use para automatizar isso.
  • Dimensões de codificação difícil: Use gancho de Reagir Nativo para suportar diferentes tamanhos de tela, incluindo tablets.
  • Reliing on Expo Go for final testing: Expo Go é ótima para o desenvolvimento, mas algumas APIs podem se comportar de forma diferente em uma compilação autônoma. Sempre teste em uma compilação de produção (EAS Build) antes de lançar.

Passando de Iniciante para Produção

Expo não é apenas uma ferramenta de aprendizagem; é usada por muitos aplicativos de produção, incluindo aplicativos para grandes empresas. O fluxo de trabalho gerenciado pode lidar com aplicativos de moderada complexidade. Se seu aplicativo precisa de integrações nativas pesadas, o fluxo de trabalho nu está sempre disponível. A chave é iniciar simples e apenas adicionar código nativo quando necessário.

Ao dominar a Expo, você está aprendendo padrões padrão de Reagir padrões nativos que transferem para qualquer projeto nativo. As habilidades que você ganha – design de componentes, gerenciamento de estado, navegação e integração de APIs – são exatamente o que você precisa para o desenvolvimento móvel profissional.

Próximos Passos e Recursos

  • Leia o tutorial oficial da Expo ] para uma caminhada passo a passo.
  • Explore o aplicativo Expo Go para ver o que está disponível.
  • Junte-se à Discórdia Expo para suporte comunitário.
  • Confira Expo Snack para protótipo diretamente no seu navegador.

Construir aplicativos móveis com a Expo elimina as barreiras iniciais e permite que você se concentre no que importa: a lógica, o design e a experiência do usuário do seu aplicativo. Comece hoje e experimente o quão rápido o desenvolvimento móvel pode ser.