Schritt-für-Schritt Anleitung für Ihre erste React Native App mit Expo CLI
Diese Anleitung führt Sie durch die Erstellung Ihrer ersten React Native App mit Expo CLI. Expo ist eine Plattform, die den Einstieg in die React Native-Entwicklung vereinfacht und besonders für Anfänger geeignet ist.
Voraussetzungen
Abschnitt betitelt „Voraussetzungen“- Node.js (Version 14 oder höher)
- npm oder yarn
- Code-Editor (z.B. VS Code)
- Expo Go App auf Ihrem Smartphone (iOS/Android)
Schritt 1: Entwicklungsumgebung einrichten
Abschnitt betitelt „Schritt 1: Entwicklungsumgebung einrichten“# Installieren Sie Expo CLI globalnpm install -g expo-cliSchritt 2: Neues Projekt erstellen
Abschnitt betitelt „Schritt 2: Neues Projekt erstellen“# Erstellen Sie ein neues Expo-Projektnpx create-expo-app MeineErsteAppcd MeineErsteAppSchritt 3: Projekt-Struktur verstehen
Abschnitt betitelt „Schritt 3: Projekt-Struktur verstehen“App.js: Hauptkomponente Ihrer Apppackage.json: Abhängigkeiten und Skripteassets/: Bilder und andere statische Ressourcennode_modules/: Installierte Bibliotheken
Schritt 4: App starten
Abschnitt betitelt „Schritt 4: App starten“# Starten Sie den Entwicklungsservernpm start# oderexpo startNach dem Start erhalten Sie einen QR-Code, den Sie mit der Expo Go App auf Ihrem Smartphone scannen können, um die App direkt zu testen.
Schritt 5: Hello World erstellen
Abschnitt betitelt „Schritt 5: Hello World erstellen“Öffnen Sie App.js und ersetzen Sie den Inhalt durch:
import React from 'react';import { View, Text, StyleSheet } from 'react-native';
function App() { return ( <View style={styles.container}> <Text style={styles.text}>Hallo React Native mit Expo!</Text> </View> );}
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, text: { fontSize: 24, fontWeight: 'bold', },});
export default App;Schritt 6: Komponenten hinzufügen
Abschnitt betitelt „Schritt 6: Komponenten hinzufügen“Erstellen Sie eine neue Datei components/Button.js:
import React from 'react';import { TouchableOpacity, Text, StyleSheet } from 'react-native';
function Button({ title, onPress }) { return ( <TouchableOpacity style={styles.button} onPress={onPress}> <Text style={styles.buttonText}>{title}</Text> </TouchableOpacity> );}
const styles = StyleSheet.create({ button: { backgroundColor: '#1e90ff', padding: 10, borderRadius: 5, marginTop: 10, }, buttonText: { color: 'white', fontSize: 16, textAlign: 'center', },});
export default Button;Schritt 7: Komponente verwenden
Abschnitt betitelt „Schritt 7: Komponente verwenden“Aktualisieren Sie App.js, um den Button zu verwenden:
import React, { useState } from 'react';import { View, Text, StyleSheet } from 'react-native';import Button from './components/Button';
function App() { const [count, setCount] = useState(0);
return ( <View style={styles.container}> <Text style={styles.text}>Hallo React Native mit Expo!</Text> <Text>Sie haben {count} mal geklickt</Text> <Button title="Klicken Sie mich!" onPress={() => setCount(count + 1)} /> </View> );}
// styles wie zuvor...
export default App;Schritt 8: Expo-Bibliotheken verwenden
Abschnitt betitelt „Schritt 8: Expo-Bibliotheken verwenden“# Beispiel: Installation einer Bibliothek für Iconsexpo install @expo/vector-iconsVerwendung:
import { FontAwesome } from '@expo/vector-icons';
// In Ihrer Komponente:<FontAwesome name="star" size={24} color="gold" />Schritt 9: Navigation mit Expo hinzufügen
Abschnitt betitelt „Schritt 9: Navigation mit Expo hinzufügen“# Installation von React Navigationexpo install @react-navigation/nativeexpo install @react-navigation/stackexpo install react-native-screens react-native-safe-area-contextSchritt 10: Debugging mit Expo
Abschnitt betitelt „Schritt 10: Debugging mit Expo“- Schütteln Sie Ihr Gerät oder drücken Sie
Cmd+D(iOS) oderCtrl+M(Android) - Wählen Sie “Debug Remote JS” für Browserdebugger
- Expo Dev Tools im Browser bieten zusätzliche Debugging-Optionen
Schritt 11: App erstellen und teilen
Abschnitt betitelt „Schritt 11: App erstellen und teilen“# Expo-Konto erstellen und einloggenexpo login
# App veröffentlichen für Testerexpo publish
# App für Stores bauenexpo build:androidexpo build:iosBesondere Vorteile von Expo
Abschnitt betitelt „Besondere Vorteile von Expo“- OTA (Over-The-Air) Updates: Änderungen können ohne Aktualisierung im App Store verteilt werden
- Einfacher Zugriff auf native Funktionen wie Kamera, Standort, Benachrichtigungen
- Kompatibles Ökosystem an Bibliotheken und Komponenten
- Einfaches Testen auf physischen Geräten ohne komplexen Build-Prozess
Tipps für Einsteiger mit Expo
Abschnitt betitelt „Tipps für Einsteiger mit Expo“- Nutzen Sie die Expo-Dokumentation
- Erkundigen Sie sich über die Expo-Einschränkungen bevor Sie ein grösseres Projekt starten
- Verwenden Sie
expo eject, wenn Sie native Module benötigen, die nicht mit Expo kompatibel sind - Testen Sie regelmässig auf verschiedenen Geräten
Häufige Fehler und Lösungen
Abschnitt betitelt „Häufige Fehler und Lösungen“- “Metro bundler” Fehler: Starten Sie den Server neu mit
expo start -c - Verbindungsprobleme: Stellen Sie sicher, dass Telefon und Computer im gleichen WLAN-Netzwerk sind
- Bei langsamen Builds: Verwenden Sie
expo start --dev-clientfür schnellere Entwicklung
Mit dieser Anleitung sollten Sie in der Lage sein, Ihre erste React Native App mit Expo CLI zu erstellen. Viel Erfolg beim Entwickeln!
Danke für Ihr Feedback!