Een beginner van de gids voor het gebruik van Expo met React Native Development

Bouwen van uw eerste scherm: Een praktisch voorbeeld

Laat een eenvoudig scherm met een knop die een waarschuwing toont. Vervang de inhoud van door:

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

Sla het bestand op. Uw apparaat moet direct het scherm tonen. Druk op de knop activeert de native alert. Merk op dat u niet schrijven een Java / Kotlin of Swift code . Expo behandeld de overbrugging.

Navigatie toevoegen met Expo Router

De meeste apps hebben meerdere schermen. Expo Router is de aanbevolen navigatiebibliotheek omdat het gebruik maakt van bestandsgebaseerde routing (vergelijkbaar met Next.js). Het ondersteunt diepe koppeling, tabbladen, stapels en modals direct uit de doos.

Exporouter installeren

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

Pas dan je aan om het ingangspunt in te stellen op ]. Maak een directory in je projectwortel. Maak er binnenin ] voor het startscherm en voor een tweede scherm. Bestandsstructuur:

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

In :

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

Wanneer de gebruiker de link tikt, navigeert de app naar zonder enige configuratie. Dit patroon schalen naar honderden schermen en is veel gemakkelijker dan traditionele Navigatie instellen.

Toegang tot apparaatfuncties met Expo SDK

Expo biedt meer dan 50 modules voor apparaatfunctionaliteit. Enkele veelgebruikte modules:

Camera

npx expo install expo-camera

U kunt toestemmingen aanvragen, foto's maken en video opnemen. Voorbeeldgebruik:

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

Locatie

npx expo install expo-location

Krijg de gebruiker huidige positie, kijk locatie wijzigingen, of geocode adressen.

Kennisgevingen

npx expo install expo-notifications

Plan en regel lokale en push meldingen. Expo biedt zelfs een push notificatie service, zodat u niet een aangepaste backend nodig hebt voor het verzenden van tokens.

Bestandssysteem

npx expo install expo-file-system

Lees, schrijf en beheer bestanden op het apparaat. Handig voor het cachen van afbeeldingen of het downloaden van inhoud.

Omdat deze modules al gekoppeld zijn in Expo... beheerde workflow, kunt u ze direct na het installeren van het npm-pakket gebruiken.

Uw app debuggen en inspecteren

Debuggen is eenvoudig in Expo. Wanneer u draait, biedt de Metro bundelaar een menu voor ontwikkelaars. Schud het op uw apparaat (of gebruik het debugmenu op het scherm op Android) om toegang te krijgen tot opties:

• Herladen .. Herlaad de JavaScript bundel.
• Open Inspecteur
• Stoggle Remote JS Debugging
• Toon Element Inspector .Tik op UI-elementen om hun rekwisieten en stijlen te zien.

Voor netwerkverzoeken kunt u tools gebruiken zoals React Native Debugger of de ingebouwde netwerkinspecteur in Chrome DevTools wanneer er op afstand debuggen is. Daarnaast verschijnen Expo... logs in de terminal waar u de server hebt gestart, met stack sporen en console.log output.

Flipper gebruiken met Expo

Als u liever Facebook . Flipper debugger, kunt u de configuratie Expo bare workflow om het te ondersteunen, maar voor beheerde workflow, de ingebouwde tools zijn meestal voldoende. Veel ontwikkelaars vertrouwen op Expo own developer logs en React DevTools] voor 90% van de debugtaken.

Beheerstaat in een Expo App

Expo-apps zijn React Native-apps, dus staatbeheer werkt precies hetzelfde. U kunt het volgende gebruiken:

• React Context en useReducer voor eenvoudige tot matig complexe toestand.
• Zustand of Jotai voor een lichte, ketelplaatvrije staat bibliotheek.
• Redux Toolkit voor grootschalige apps met veel onderling verbonden staatsschijven.

Expo verplicht geen specifieke keuze. Voor beginners, te beginnen met React... ingebouwde haken wordt aanbevolen. U kunt altijd migreren naar een meer geavanceerde oplossing later.

Voorbeeld met react Context:

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

Uw app testen

Expo ondersteunt Jest uit de doos. Voer uit en configureer Jest in package.json. U kunt unit tests schrijven voor uw componenten en snapshots. Voor het testen van end-to-end werkt Detox goed, maar vereist native builds. Voor beheerde workflow, overwegen Maestro] .. een mobiele UI testtool die werkt met Expo Go.

Voorbeeld van een eenvoudige test voor het knopcomponent:

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

Bouwen en publiceren van uw app

Zodra uw app klaar is, wilt u deze publiceren in de App Store en Google Play. Expo vereenvoudigt dit met cloud build services.

Expo-applicatiediensten (EAS)

EAS Build creëert productie-ready native binaire bestanden zonder dat u Xcode of Android Studio te installeren. Stappen:

1. Installeer :
2. Login:
3. Configureer met bouwprofielen (ontwikkeling, preview, productie).
4. Uitvoeren: of

EAS bouwt uw app in de cloud en geeft een .ipa of .apk bestand terug. U kunt dan naar opslagruimtes sturen met .

Over-the-Air Updates

Met kunt u JavaScript-updates direct aan gebruikers pushen zonder opnieuw in te dienen in winkels. Configureer een kanaal in app.json en voer uit (of gebruik EAS Update). De app controleert of updates worden gestart en downloadt de nieuwste bundel. Dit is een spelwisselaar voor het snel repareren van bugs.

Voorbeeld app.json-updateconfiguratie:

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

Beperkingen van de beheerde workflow

Terwijl Expo krachtig is, zijn er scenario's waar je misschien moet uitwerpen naar een kale workflow:

• Aangepaste native modules niet beschikbaar in Expo SDK (bijvoorbeeld een nieuwe Bluetooth-biblioth-bibliotheek die nog niet is verpakt).
• Achtergrondtaken die voor onbepaalde tijd moeten worden uitgevoerd (Expo Go en beheerde apps hebben beperkingen op achtergronduitvoering).
• Push notificatie aanpassing verder dan wat Expo biedt (bv. aangepaste notificatie geluiden of rijke media).
• Grote bestandsgrootte met bepaalde native bibliotheken (beheerde apps omvatten alle Expo SDK, die ~20MB toevoegt).
• Moet code draaien voordat de app wordt geïnitialiseerd (bemande apps hebben een vast ingangspunt).

Gelukkig kunt u . .uitwerpen (eigenlijk ]) op elk moment. Dit genereert de en mappen, zodat u de native code aan te passen. Zodra u dat doet, kunt u doorgaan met het gebruik van Expo. Maar verlies het gemak van onmiddellijke preview met Expo Go. Echter, kunt u nog steeds EAS Build en OTA-updates gebruiken.

Beste praktijken voor Expoontwikkeling

Houd uw Expo SDK bijgewerkt

Expo brengt elke paar maanden een nieuwe SDK versie uit. Bijwerken is relatief pijnloos: draaien en eventuele breekwijzigingen oplossen. Door de stroom te behouden, heb je de nieuwste API's en beveiligingspatches.

TypeScript gebruiken vanaf het begin

Expo eerste klas ondersteunt TypeScript. Wanneer u uitvoert, kiest u de TypeScript-sjabloon. Het vangt veel fouten vroeg op en verbetert IDE automatisch aan te vullen.

Afbeeldingsactiva optimaliseren

Gebruik om afbeeldingen te comprimeren voor uw app. Ook, hefboom voor het performante laden van afbeeldingen met caching en plaatshouders.

De Gemeenschap van de Expo

De Discord-server, forums en GitHub discussies zijn uiterst actief. Veel voorkomende problemen zijn opgelost. Voordat u aangepaste code schrijft, zoekt u naar Expo documentatie of gemeenschapsrecepten.

Plan voor de vereisten voor de App Store

Zelfs met Expo moet u voldoen aan het Apple- en Google-beleid. Zorg ervoor dat uw app privacy manifesten, goede pictogrammen en spatschermen heeft. Gebruik om machtigingen en app-metadata in te stellen.

Vaak Pitfalls en hoe ze te vermijden

• Vergeten om peer afhankelijkheden te installeren: Bij gebruik van Expo modules moet je soms gerelateerde pakketten handmatig installeren (bv. ) voor navigatie. De CLI waarschuwt je vaak.
• Overgebruik van console.log in productie: Verwijder alle console verklaringen voor het bouwen. Gebruik om dit te automatiseren.
• Hardcoderingsafmetingen: Gebruik haak van React Native om verschillende schermgroottes, waaronder tabletten, te ondersteunen.
• Relying on Expo Ga voor de laatste test: Expo Go is geweldig voor ontwikkeling, maar sommige API's kunnen zich anders gedragen op een standalone build. Test altijd op een productiebouw (EAS Build) voordat ze worden vrijgegeven.

Verhuizen van beginner naar productie

Expo is niet alleen een leerinstrument; het wordt gebruikt door veel productie-apps, waaronder apps voor grote bedrijven. De beheerde workflow kan omgaan met apps van matige complexiteit. Als uw app moet zware inheemse integraties, de kale workflow is altijd beschikbaar. De sleutel is om te starten eenvoudig en alleen native code toe te voegen wanneer nodig.

Door Expo te beheersen, leer je standaard React Native patronen die naar een native project worden overgebracht. De vaardigheden die je krijgt .component ontwerp, staat management, navigatie, en API integratie . zijn precies wat je nodig hebt voor professionele mobiele ontwikkeling.

Volgende stappen en middelen

• Lees de officiële Expo tutorial voor een stapsgewijze doorloop.
• Verken de Expo Go app om te zien wat er beschikbaar is.
• Doe mee met Expo Discord voor ondersteuning door de gemeenschap.
• Check out Expo Snack om direct in uw browser te prototyperen.

Het bouwen van mobiele apps met Expo verwijdert de eerste barrières en laat u zich concentreren op wat belangrijk is: uw app is logica, ontwerp en gebruikerservaring. Begin vandaag en ervaar hoe snel mobiele ontwikkeling kan zijn.