Expo: a faca do exército suíço de React Native (e como testar seu aplicativo em todos os lugares)
Bem -vindo ao maravilhoso mundo da Expo! Se o React Native for o motor do seu aplicativo, a Expo é a garagem inteira – completa com ferramentas, peças de reposição e uma máquina de café muito agradável. Hoje estamos mergulhando no que torna a Expo Magical e como testar seu aplicativo de rastreador de compras em todos os dispositivos que se possa imaginar (incluindo aquele iPad antigo que sua mãe ainda usa). O que diabos é expo? 🤔 Pense na exposição como reagir nativo com superpotências e uma equipe UX muito boa. É uma plataforma que torna a construção, a implantação e o teste de aplicativos nativos se parecem menos com ciência de foguetes e mais … bem, ciência regular. O tipo divertido com menos explosões. Expo fornece: 📦 Módulos pré-construídos (câmera, notificações, etc.) 🔄 Atualizações de ar (pressionam as correções sem atrasos na loja de aplicativos) 🎯 Testes fáceis (SCAN QR, BOOM, App Runs) ☁️ Não é necessário que você não faça o que não possui um Mac! O ecossistema expo: seus novos melhores amigos 👥 expo cli: o centro de comando 💻 o novo comando favorito do seu terminal: npx expo start # inicia o servidor de desenvolvimento npx expo start -túnel Telefone para um dispositivo de teste. Faça o download de: App Store (iOS) Google Play (Android) Digitalizar o código QR do seu terminal e o boom – seu aplicativo aparece. É como o Uber, mas para aplicativos. Expo sdk: a caixa de ferramentas 🧰 módulos pré-construídos para tarefas comuns: // acesso à câmera Importar * como ImagePicker de ‘expo-image-picker’; // sistema de arquivos import * como sistema de arquivos de ‘expo-fil-system’; // Notificações Importar * como notificações de ‘Expo-Notificações’; // e literalmente centenas mais … Digite um passeio de teste de modo de tela cheia do modo de tela cheia: The Greatest Hits Tour 🎵 1. Navegador da web: a visualização rápida 🌐 Melhor para: UI Tweaks, Teste de Layout, Modo de Layout, Modo de Câmera de Câmera de Faculdade de Câmera de Câmera de Cântio NOTATRATEN EXTEMISTATEN EXTEMATEN (FELIMENTATION FEALIONSTERATOL (FELIMENTATION FeedaLoToL FealdAl Demast FeatherOl Desemptt DesequémfemoLoTool FeedaLOOTOL O MODO DE ESCRANHOS FELE ELVENSTROS DE FELIMENTOS DE FELIMENTOS DE FELIMENTOS Engine não exatamente como os usuários o verão 2. Simulador iOS: a experiência da Apple 🍎 Melhor para: Teste específico para iOS, App Store Screenshots Requisitos: apenas macOS (desculpe, pessoal do Windows) Xcode instalado NPM Run IOS # IOS ou pressione ‘i’ no terminal de exposição IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS ISS DEVERIORES ISS DEVERIORES IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS IOS ISS Device-Device Sizes Câmera/sensores 3. Emulador de Android: o Google Galaxy 🤖 Melhor para: Teste Android, Play Store Prep Requisitos: Android Studio Um computador que pode lidar com a emulação (também conhecido como uma batata) NPM Run Android # ou pressiona ‘a’ slumina slumina slumin shunls slumms shunings shunings shuns shuns shreles shuning shrelge shrelge shrelge shrelge shrelge shrelge shrelge shrelge shrelge shrelge shrelge shrelge shrelge shrelge shrelge shrelge shrelge shreldrecreen mode shrelge mode shreldrech mode shreldrech mode shreldrech Mode # 4. Dispositivos reais: A verdade melhor 📱 Melhor para: tudo! Desempenho, experiência real do usuário, configuração de teste real: Download Expo GO se conecta ao mesmo wi -fi que o seu código de computador QR Code Marvel the Magic ✨ Prós: Desempenho Real Câmera real/sensores A verdadeira experiência do usuário pode testar em qualquer lugar: requer que o seu telefone dependente de um telefone dependente de um outro. Veja como corrigi -lo: Solução 1: Modo de túnel (a opção nuclear) Iniciar NPX Expo -Tunnel Digite rotas no modo de tela cheia de tela cheia através dos servidores da Expo. Mais lento, mas funciona em todos os lugares. Solução 2: Modo LAN (o mundo ideal) NPX Expo Iniciar -LAN Digite o modo de saída de tela cheia de tela cheia usa sua rede local. Mais rápido, mas mais exigente sobre a configuração da rede. Solução 3: Localhost (The Fallback) NPX Expo Iniciar -Localhost Digite o modo de saída do modo de tela cheia funciona apenas com simuladores/emuladores na mesma máquina. Desenvolvimento de trabalho de desenvolvimento: a moagem diária ☕ Veja como uma sessão de desenvolvimento típica parece: # 1. Inicie o servidor NPM Iniciar nº 2. Abra na sua plataforma preferida # web para verificação rápida da interface do usuário # dispositivo real para teste real # simulador para teste de sistema operacional # 3. Para o menu do desenvolvedor # 6. Repita até que o # perfeito (ou até o prazo, o que ocorrer primeiro), digite o modo de tela cheia de tela cheia de teste de teste Pro Testing Dicas: Leve o seu jogo 🎮 1. Teste cedo, o teste geralmente não espere até o final para testar em dispositivos reais. É como apenas experimentar o seu vestido de noiva no dia do casamento – tecnicamente possível, mas arriscado. 2. Use vários dispositivos Teste de: Tamanhos de tela diferentes (telefone, tablet) Versões do sistema operacional diferentes (iOS 14, 15, 16+) Níveis de desempenho diferentes (novo carro -chefe, telefone orçamentário antigo) 3. Condições de rede Teste de matéria em: WiFi (Fast e Slow) Testes 4G/5G MOIL DA MOLED MODO (para a funcionalidade offline) 4. Verifique o tamanho do pacote NPX Expo Export-Public-URL # Monitor Desempenho # Use React DevTools # Verifique se há vazamentos de memória # Teste em dispositivos mais antigos Digite o modo de tela cheia de depuração da tela cheia: quando as coisas dão errado # Spoiler: expot expot) 🐛 problemas comuns e corrigir “não se conectará” # # tentativa de túneis de exposição-expot-tum) 🐛 Os problemas e corrigem o mesmo servidor ” # TELHE # expoiler-expot-tum) 🐛 TUNLENEN TUNNELEN # TUNENEL # CHEGA # Modo de tela cheia Modo de tela cheia Modo “Módulo não encontrado” # Módulos de nó transparente rm -rf node_modules package -lock.json npm install # clear expo cache cache npx exposição Iniciar -Clear Enter Modo FullScreen Modo Exibir Modo de tela cheia “Construa” # verificação de exposição de exposição NPX # Atualização de dependentes de dependentes NPX NPX Arsenal 🛠️ Os logs do console aparecem no Terminal React Devtools para a guia Rede de inspeção de componentes para a API Debugging Performance Monitor for Optimization Expo Devtools para todo o resto Testando nosso rastreador de compras: a lista de verificação ✅ Aqui está o que testar em todas as plataformas: Funcionalidade do núcleo
[ ] O aplicativo é lançado sem falhas
[ ] Obras de navegação (guias domésticas, digitalizadas, perfil)
[ ] Exibição de cartões de compra corretamente
[ ] “Take Photo” gera novas compras
[ ] Detalhes da compra mostram na torneira
[ ] Puxe para atualizar os trabalhos específicos da plataforma
[ ] iOS: áreas seguras adequadas, sensação nativa
[ ] Android: comportamento do botão de volta, design de material
[ ] Web: layout responsivo, desempenho de navegação do teclado
[ ] Animações suaves
[ ] Rolagem rápida da lista
[ ] Startup de aplicativo rápido
[ ] Uso de memória casos de borda razoável
[ ] Sem conexão com a Internet
[ ] Nomes de lojas muito longas
[ ] Grande número de compras
[ ] Diferentes orientações da tela O futuro: além da exposição GO 🚀 À medida que o aplicativo cresce, você pode precisar: o desenvolvimento personalizado é construído para quando você precisar de módulos nativos que não estão no expo SDK: NPX Expo Run: iOS NPX Expo Run: Android Enter Modo FullScreen Modo de tela FullScreen Modo de criação Produção para a App Storming Submissio Atualizações Empurre as correções sem a App Store Review: NPX Expo Publish Digite Modo de tela Full Salt Sair
Fonte
