Comprendere Expo nell'Ecosistema Nativo React

Le app React Native sono costruite con JavaScript ma si basano su moduli nativi per funzioni come la fotocamera, Bluetooth o GPS. Tradizionalmente, la creazione di questi moduli nativi richiedeva Android Studio, Xcode, Gradle e Coco APIPods, una curva di apprendimento ripida per i nuovi arrivati.

La distinzione chiave è tra i flussi di lavoro e bare] all'interno di Expo. I principianti iniziano quasi sempre con il flusso di lavoro gestito, dove Expo gestisce la configurazione nativa.

Perché Expo Matters per principianti (e oltre)

Prima di Expo, molti sviluppatori hanno trascorso giorni solo ottenendo un ambiente React Native per compilare. I punti di dolore comuni includevano errori di versione tra SDK Android, collegando manualmente le librerie native e debug errori di costruzione criptico.

  • Impostazione nativa di Zero[: Non c'è bisogno di installare Android Studio o Xcode per iniziare.
  • SDK unificato[: Tutte le librerie di Expo sono state riprodotte insieme. Non dovete preoccuparvi della biblioteca Un essere incompatibili con la biblioteca B.
  • Aggiornamenti OTA (OTA)[[: Premere JavaScript cambia direttamente agli utenti senza passare attraverso le recensioni dell'app store.
  • Instant sharing[[]]: Generare un codice QR per condividere la tua app in corso con compagni di squadra o clienti.
  • Comunità e documentazione forti[[]: I documenti ufficiali di Expo sono tra i migliori nell’ecosistema React Native.

Per tali ragioni, Expo è ora il punto di partenza consigliato dal team React Native stesso. I principianti ufficiali React Native ] guidano i principianti ad utilizzare Expo se sono nuovi per lo sviluppo mobile.

Impostare il vostro ambiente di Expo

Prerequisiti

  • Node.js[] (versione 16 o successiva) – scaricare da nodejs.org.
  • editor di codice[]] (il codice VS è altamente raccomandato).
  • dispositivo mobile[]] con l'applicazione Expo Go installata ([[]iOS[] o Android[]]]]).
  • Expo account[] per la pubblicazione e la condivisione – Iscriviti a expo.dev.

Installazione di Expo CLI

Expo CLI è lo strumento di riga di comando che si utilizza per creare, eseguire e costruire applicazioni.

npm install -g expo-cli

Se si utilizza Yarn, è possibile eseguire ]. Verificare l'installazione con []. Si noti che a partire dal 2024, Expo si sta spostando verso come starter predefinito. Mentre ] funziona ancora, si consiglia di utilizzare il metodo più recente:

npx create-expo-app MyFirstApp --template blank

Questo crea un progetto minimale con l'ultima versione di Expo SDK e il supporto integrato per TypeScript se lo si desidera.

Esplorazione della struttura del progetto

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

  • App.js[] (o App.tsx) – il punto di ingresso della tua app. Tutto ciò che rendi inizia qui.
  • package.json[[] – elenca le dipendenze (riagire, reagire-nativo, expo e qualsiasi modulo Expo installato).
  • app.json[[] – file di configurazione per il tuo progetto Expo (nome app, icona, schermo splash, autorizzazioni, ecc.).
  • node modules[[]] – contiene tutti i pacchetti installati.
  • .expo[] – Stato locale per Expo, non impegnatevi a controllare la versione.

La bellezza di Expo è che non si vedrà android/ o ios/ cartelle a meno che non si esegue più tardi. Tutto è gestito attraverso l'Expo SDK.

Eseguire la tua App per la prima volta

Navigare nella directory del progetto:

cd MyFirstApp

Avviare il server di sviluppo:

npx expo start

Importante[]: Su iOS, utilizzare l'app Fotocamera predefinita; su Android, utilizzare l'app Expo Go per la scansione. L'applicazione si carica sul dispositivo e tutte le modifiche che si salva nel vostro editor di codice rifletteranno immediatamente (hot reloading). È inoltre possibile utilizzare un emulatore Android/iOS sul computer impostato.

Risoluzione dei problemi Problemi comuni di avvio

  • Problemi di connessione[[]: Assicurare che il telefono e il computer siano sulla stessa rete Wi-Fi. Se ciò non funziona, utilizzare [ modalità premendo nel terminale Expo CLI. Questo funziona anche su diverse reti.
  • L'app Expo Go mostra “Impossibile trovare un'app”[: Questo significa che di solito il server non è completamente iniziato. Attendere che i registri dicano “Metro bundler pronto.” Quindi la scansione di nuovo.
  • Bundler bloccato[: Eliminare la cartella e provare per cancellare la cache.

Costruire il primo schermo: un esempio pratico

Creare una semplice schermata con un pulsante che mostra un avviso. Sostituisci il contenuto di con:

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,
 },
});

Salvare il file. Il dispositivo deve mostrare istantaneamente lo schermo. Premere il pulsante attiva l'avviso nativo. Notare che non hai scritto alcun codice Java/Kotlin o Swift—Expo ha gestito il collegamento.

Aggiungere la navigazione con Expo Router

La maggior parte delle applicazioni hanno più schermi. Expo Router[] è la libreria di navigazione consigliata perché utilizza il routing basato su file (simile a Next.js). Supporta il collegamento profondo, schede, stack e modals proprio fuori dalla scatola.

Installare Expo Router

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

Quindi, regolare il per impostare il [ punto di ingresso a ]. Creare una directory nella vostra radice di progetto.

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

:

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 l'utente tocca il link, l'applicazione naviga a [] senza alcuna configurazione. Questo modello scala a centinaia di schermi ed è molto più facile rispetto alle tradizionali impostazioni di React Navigation.

Caratteristiche del dispositivo di accesso con Expo SDK

Expo fornisce oltre 50 moduli per la funzionalità del dispositivo. Alcuni di quelli comunemente utilizzati:

Macchina fotografica

npx expo install expo-camera

È possibile richiedere autorizzazioni, scattare foto e registrare video. Esempio di utilizzo:

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

Location

npx expo install expo-location

Ottieni la posizione corrente dell'utente, guarda le modifiche della posizione o gli indirizzi geocode.

Notifiche

npx expo install expo-notifications

L'Expo fornisce anche un servizio di notifica push, quindi non è necessario un backend personalizzato per l'invio di gettoni.

Sistema file

npx expo install expo-file-system

Leggere, scrivere e gestire i file sul dispositivo. Utile per la memorizzazione delle immagini o il download dei contenuti.

Poiché questi moduli sono già collegati nel flusso di lavoro gestito da Expo, è possibile iniziare a utilizzarli immediatamente dopo l'installazione del pacchetto npm.

Debug e Ispezione della tua App

Quando si esegue [], il bundler Metro fornisce un menu di sviluppo. Sul dispositivo, agitare (o utilizzare il menu di debug su schermo su Android) per accedere alle opzioni:

  • Ricarica] – ricarica il bundle JavaScript.
  • Ispettore aperto[] – apre React DevTools in un browser per l'ispettore dei componenti.
  • Scegli il debugging JS remoto[[] – consente di debug in Chrome DevTools (è possibile impostare i punti di rottura nel JavaScript).
  • Mostra Ispettore Element[] – tocca gli elementi dell'interfaccia utente per vedere i loro oggetti e stili.

Per le richieste di rete, è possibile utilizzare strumenti come []React Native Debugger[[] o l'ispettore di rete integrato in Chrome DevTools quando il debugging remoto è acceso. Inoltre, i registri di Expo appaiono nel terminale in cui è stato avviato il server, mostrando tracce stack e uscita console.log.

Utilizzo di Flipper con Expo

Se si preferisce il debugger Flipper di Facebook, è possibile configurare il flusso di lavoro nudo di Expo per supportarlo, ma per il flusso di lavoro gestito, gli strumenti incorporati sono di solito sufficienti. Molti sviluppatori si affidano a I log di sviluppatori di Expo e ]]React DevTools per il 90% dei compiti di debugging.

Gestione dello Stato in un'App Expo

Le app di Expo sono React Native apps, quindi la gestione dello stato funziona esattamente la stessa.

  • React Context[] e useReducer[]] per lo stato semplice e moderatamente complesso.
  • Zustand[] o Jotai] per una biblioteca di stato leggera e senza caldaia.
  • Redux Toolkit[] per applicazioni su larga scala con molte fette di stato collegate.

Per i principianti, a partire dai ganci integrati di React è consigliato l’Expo, che può sempre migrare a una soluzione più sofisticata in seguito.

Esempio con il contesto reagito:

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);

Testare la tua App

Expo supporta Jest fuori dalla scatola. Eseguire e configurare Jest in package.json. È possibile scrivere test di unità per i componenti e le istantanee. Per i test end-to-end, Detox] funziona bene ma richiede build native. Per il flusso di lavoro gestito, prendere in considerazione UMaestro tool Expo]

Esempio di un semplice test per il componente del pulsante:

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)
});

Costruire e pubblicare la tua App

Una volta che la tua app è pronta, vorrai pubblicarla all'App Store e a Google Play. Expo semplifica questa operazione con i servizi di cloud building.

Servizi di applicazione Expo (EAS)

EAS Build crea binari nativi pronti alla produzione senza dover installare Xcode o Android Studio.

  1. :
  3. Configurare con profili di costruzione (sviluppo, anteprima, produzione).
  4. o

EAS costruisce la tua app nel cloud e restituisce un file .ipa o .apk. Puoi quindi inviare ai negozi usando .

Aggiornamenti over-the-Air

Configurare un canale in app.json ed eseguire ] (o utilizzare EAS Update). L'app controlla gli aggiornamenti sul lancio e scarica il pacchetto più recente. Questo è un game-changer per la fissaggio dei bug rapidamente.

Esempio di app.json aggiornamento configurazione:

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

Limitazioni del flusso di lavoro gestito

Mentre Expo è potente, ci sono scenari in cui potrebbe essere necessario espellere un flusso di lavoro nudo:

  • I moduli nativi personalizzati[] non sono disponibili in Expo SDK (ad esempio, una nuova libreria Bluetooth che non è stata avvolta).
  • I compiti di Background[[] che devono essere eseguiti indefinitamente (Expo Go e le applicazioni gestite hanno limitazioni sull'esecuzione di sfondo).
  • Personalizzazione di notifica di alta qualità[[]] oltre a ciò che offre Expo (ad esempio, suoni di notifica personalizzati o supporti ricchi).
  • Le grandi dimensioni dei file[] con alcune librerie native (le applicazioni gestite includono tutte le applicazioni di Expo SDK, che aggiunge ~20MB).
  • Deve eseguire il codice prima dell'inizializzazione delle app[[] (le applicazioni gestite hanno un punto di ingresso fisso).

Per fortuna, è possibile “eject” (in realtà eseguire [[]]]) in qualsiasi momento. Questo genera le cartelle [ e [[], permettendo di personalizzare il codice nativo. Una volta fatto, è possibile continuare a utilizzare gli strumenti di Expo, ma perdere la convenienza di anteprima istantanea con Expo Go. Tuttavia, è ancora possibile utilizzare gli aggiornamenti EAS Build e OTA.

Migliori Pratiche per lo Sviluppo di Expo

Mantenere aggiornato il tuo Expo SDK

L'aggiornamento è relativamente indolore: eseguire e correggere eventuali cambiamenti di rottura. Rimanere corrente assicura di avere le ultime API e patch di sicurezza.

Utilizzare TypeScript dall'inizio

Quando si esegue []], scegliere il modello TypeScript. Prende molti bug in anticipo e migliora l'autocompleto IDE.

Ottimizzare i beni di immagine

Usa per comprimere le immagini per la tua app. Inoltre, sfrutta per il caricamento delle immagini performanti con caching e segnaposto.

Leva la Comunità di Expo

I server Discord, forum e discussioni GitHub sono estremamente attivi. Molti problemi comuni sono stati risolti. Prima di scrivere codice personalizzato, cercare Documentazione Expo] o ricette della comunità.

Piano per i requisiti di App Store

Persino con Expo, è necessario rispettare le policy di Apple e Google. Assicurare che la tua app abbia manifesti sulla privacy, icone corrette e schermi di schizzi.

Pitfalls comune e come evitare di loro

  • Per installare le dipendenze dei pari[[]: Quando si utilizzano i moduli di Expo, a volte è necessario installare manualmente i pacchetti correlati (ad esempio, per la navigazione).
  • Console.log in produzione[: Rimuovere tutte le dichiarazioni della console prima di costruire. Usa per automatizzare questo.
  • Dimensioni di codifica[]: Usa gancio da React Native per supportare diverse dimensioni dello schermo, comprese le compresse.
  • Richiesta su Expo Vai per il test finale[[]: Expo Go è ottimo per lo sviluppo, ma alcune API possono comportarsi in modo diverso su una costruzione standalone.

Trasferirsi da principiante alla produzione

Expo non è solo uno strumento di apprendimento; è utilizzato da molte applicazioni di produzione, comprese le applicazioni per grandi aziende. Il flusso di lavoro gestito può gestire applicazioni di moderata complessità. Se la tua applicazione ha bisogno di pesanti integrazioni native, il flusso di lavoro nudo è sempre disponibile. La chiave è di iniziare semplice e solo aggiungere codice nativo quando necessario.

Con la mastering Expo, stai imparando modelli React Native standard che trasferiscono a qualsiasi progetto nativo. Le competenze che si ottiene - design collaborativo, gestione dello stato, navigazione e integrazione API - sono esattamente ciò che ti serve per lo sviluppo mobile professionale.

Prossimo passo e risorse

Costruire applicazioni mobili con Expo rimuove le barriere iniziali e ti permette di concentrarti su ciò che conta: la logica, il design e l’esperienza degli utenti della tua app.