Was ist React Native?

React Native ist ein von Facebook entwickeltes Open-Source-Framework, das es Entwicklern ermöglicht, mobile Anwendungen mit JavaScript und React zu erstellen. Im Gegensatz zu herkömmlichen hybriden Ansätzen, die Webansichten rendern, kompiliert React Native zu nativen Plattformkomponenten. Dies bedeutet, dass die Benutzeroberfläche der App mit echten nativen Ansichten (wie auf iOS und auf Android erstellt wird, was zu einer Leistung führt, die eng mit vollständig nativen Apps übereinstimmt. Das Framework ermöglicht auch eine erhebliche Code-Freigabe über iOS und Android - oft 80-90% - und reduziert drastisch die Entwicklungszeit und Wartungskosten.

React Native wurde 2015 erstmals veröffentlicht und wurde seitdem von großen Unternehmen wie Instagram, Shopify und Discord übernommen. Seine lebendige Community und sein Bibliotheken-Ökosystem machen es zu einer praktischen Wahl für Start-ups und Unternehmen.

Erste Schritte mit React Native: Environment Setup

Bevor Sie einen React Native Code schreiben, müssen Sie Ihre Entwicklungsumgebung einrichten.Die genauen Schritte unterscheiden sich, je nachdem, ob Sie auf iOS, Android oder beides abzielen und ob Sie die React Native CLI oder Expo verwenden.

Voraussetzungen

  • Node.js & npm (oder Yarn): Version 18 oder neuer wird empfohlen.
  • Watchman (macOS/Linux): Ein Datei-Watching-Tool von Facebook, das die Leistung verbessert.
  • Xcode (nur iOS): Erforderlich für das Erstellen und Testen von iOS-Simulatoren. Download aus dem Mac App Store. Stellen Sie sicher, dass Sie die neuesten Xcode Command Line Tools installiert haben.
  • Android Studio (nur Android): Erforderlich für Android-Emulatoren und -Tools.

Wahl zwischen React Native CLI und Expo

Es gibt zwei primäre Möglichkeiten, ein React Native Projekt zu starten:

  • React Native CLI: Der Bare-Metal-Ansatz. Sie haben die volle Kontrolle über nativen Code und können jedes native Modul integrieren. Am besten für Projekte, die benutzerdefinierte native Funktionen oder Leistungsoptimierungen erfordern.
  • Expo: Ein verwaltetes Framework, das auf React Native aufbaut. Es abstrahiert die meisten nativen Konfigurationen und bietet eine umfangreiche Reihe vorgefertigter Module (Kamera, Push-Benachrichtigungen usw.). Ideal für Rapid Prototyping und Projekte, die keinen benutzerdefinierten nativen Code benötigen.

Für dieses Handbuch verwenden wir die React Native CLI, weil sie Ihnen die größte Flexibilität bietet.

npx @react-native-community/cli init MyApp

Navigieren Sie nach der Initialisierung in den Projektordner und führen Sie aus, um den Metro-Bundler zu starten.

Weitere Meldungen zu React Native

Mastering React Native erfordert das Verständnis seiner Kernbausteine - viele davon sind direkte Erweiterungen von React für das Web.

Komponenten

Alles in React Native ist eine Komponente. Das Framework bietet eine Reihe von Kernkomponenten, die nativen UI-Elementen zugeordnet sind:

  • — Ein Container, der das Layout mit Flexbox, Styling und Touchhandling unterstützt.
  • — Um Text anzuzeigen, müssen Sie im Gegensatz zu Web-HTML jeden Text in einpacken.
  • — Zeigt lokale oder entfernte Bilder an.
  • — Ein generischer Scrolling-Container.
  • — Ein Texteingabefeld.
  • — Ermöglicht es einer Ansicht, auf Taps mit einem visuellen Feedback zu reagieren.
  • — Hochleistungslistenkomponente für große Datensätze.

Sie können auch benutzerdefinierte Komponenten zusammenstellen, indem Sie diese Primitiven kombinieren. für eine vollständige Liste, überprüfen Sie die offizielle React Native Dokumentation.

Staat und Props

Dies sind die gleichen Konzepte wie in React für das Web:

  • Props: Abkürzung für Eigenschaften. Sie sind schreibgeschützte Werte, die von einer übergeordneten Komponente an eine untergeordnete Komponente weitergegeben werden. Sie konfigurieren das Verhalten oder Aussehen des Kindes.
  • State: Mutable data managed within a component. when state changes, the component re-renders. Use hook (functional components) or (class components).

Beispiel:

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

const Counter = () => {
 const [count, setCount] = useState(0);
 return (
 <View>
 <Text>You pressed {count} times</Text>
 <Button title="Press me" onPress={() => setCount(count + 1)} />
 </View>
 );
};
export default Counter;

Die beliebteste Lösung ist React Navigation Es bietet einen Stack-Navigator (wie einen Navigationsstack), einen Tab-Navigator und einen Schubladen-Navigator. Installieren Sie es mit:

npm install @react-navigation/native @react-navigation/stack

Nach der Installation, wickeln Sie Ihre App mit und definieren Sie Ihre Bildschirme:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Styling

React Native verwendet JavaScript-Objekte für das Styling anstelle von CSS. Sie definieren Stile mit oder Inline-Objekten. Die Layout-Engine ist standardmäßig Flexbox mit Eigenschaften wie , , . Es gibt keine CSS-Medienabfragen; Responsive Design wird durch die API oder Bibliotheken wie erreicht.

Erstellen Sie Ihre erste plattformübergreifende App: Ein Schritt-für-Schritt-Beispiel

Bauen wir eine einfache Wetter-App, die Daten aus einer öffentlichen API abruft und auf beiden Plattformen anzeigt. Dies zeigt die Zustandsverwaltung, Netzwerkanforderungen und Komponentenzusammensetzung.

Schritt 1: Projekteinrichtung

Erstellen Sie ein neues Projekt mit dem React Native CLI:

npx @react-native-community/cli init WeatherApp
cd WeatherApp

Schritt 2: Abhängigkeiten installieren

Wir brauchen ein paar Pakete:

npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context

Für den API-Aufruf verwenden wir die integrierte -API. Optional installieren für Icons.

Schritt 3: Bauen Sie den Home Screen

Erschaffen Sie :

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, StyleSheet, ActivityIndicator } from 'react-native';

const API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY';
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

const HomeScreen = () => {
 const [city, setCity] = useState('');
 const [weather, setWeather] = useState(null);
 const [loading, setLoading] = useState(false);
 const [error, setError] = useState(null);

 const fetchWeather = async () => {
 if (!city.trim()) return;
 setLoading(true);
 setError(null);
 try {
 const response = await fetch(`${BASE_URL}?q=${city}&appid=${API_KEY}&units=metric`);
 const data = await response.json();
 if (data.cod !== 200) {
 setError(data.message);
 } else {
 setWeather(data);
 }
 } catch (err) {
 setError('Network error');
 } finally {
 setLoading(false);
 }
 };

 return (
 <View style={styles.container}>
 <Text style={styles.title}>Weather App</Text>
 <TextInput
 style={styles.input}
 placeholder="Enter city name"
 value={city}
 onChangeText={setCity}
 />
 <Button title="Get Weather" onPress={fetchWeather} />
 {loading && <ActivityIndicator size="large" />}
 {error && <Text style={styles.error}>{error}</Text>}
 {weather && (
 <View style={styles.weatherContainer}>
 <Text style={styles.cityName}>{weather.name}</Text>
 <Text>Temperature: {weather.main.temp}°C</Text>
 <Text>Conditions: {weather.weather[0].description}</Text>
 </View>
 )}
 </View>
 );
};

const styles = StyleSheet.create({
 container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
 title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
 input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 5, width: '80%', padding: 10, marginBottom: 10 },
 error: { color: 'red', marginTop: 10 },
 weatherContainer: { marginTop: 20, alignItems: 'center' },
 cityName: { fontSize: 20, fontWeight: '600', marginBottom: 10 }
});

export default HomeScreen;

Schritt 4: Wire Up Navigation

In importieren Sie den Navigator und den Bildschirm:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

export default function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Weather' }} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Schritt 5: Führen Sie die App aus

Starten Sie Metro Bundler (), dann laufen Sie auf Android () oder iOS (). Sie sollten eine Texteingabe, eine Schaltfläche und Wetterdaten nach einem erfolgreichen API-Aufruf sehen.

Diese Basis-App funktioniert auf beiden Plattformen mit identischem JavaScript-Code. Das ist die Macht von React Native.

Vorteile der Verwendung von React Native

  • Code-Wiederverwendbarkeit: Teilen Sie Geschäftslogik, Zustandsverwaltung und Benutzeroberflächenkomponenten plattformübergreifend. Sie können sogar Code mit einer Web-App mit React Native for Web wiederverwenden.
  • Performance: Near-native performance because the UI is rendered using native components, not web views. The JavaScript thread runs asynchronously, and heavy computing can be offloaded to native modules.
  • Große Community & Ökosysteme: Tausende von Bibliotheken, eine lebendige Community auf GitHub und umfangreiche Tools. Probleme sind gut dokumentiert und Plugins existieren für fast jeden Bedarf.
  • Schnellentwicklung mit Hot Reload: Der Metro-Bundler unterstützt Hot Module Replacement (HMR). Sie können den Code bearbeiten und Änderungen sofort sehen, ohne die gesamte App neu zu erstellen.
  • Over-the-Air Updates: Mit Diensten wie Microsoft App Center oder CodePush können Sie JavaScript- und Asset-Updates direkt an Benutzer ohne App Store-Genehmigung senden.
  • Kosteneffektiv: Ein Team kann eine einzelne Codebasis anstelle von zwei separaten nativen Teams pflegen.

Herausforderungen und Einschränkungen

Trotz seiner Stärken ist React Native keine Silberkugel:

  • Native Modules: Wenn Sie auf Gerätefunktionen zugreifen müssen, die nicht von den Kern- oder Community-Bibliotheken abgedeckt werden (z. B. fortschrittliches Bluetooth, benutzerdefinierte Kamerafilter), müssen Sie plattformspezifischen Code in Java/Kotlin (Android) oder Objective-C/Swift (iOS) schreiben.
  • Performance Bottlenecks: React Native setzt auf eine Brücke zwischen JavaScript und nativen Threads. Sehr komplexe Animationen, Echtzeit-Grafiken (wie 3D-Spiele) oder schwere Datenverarbeitung können Jank verursachen. Für die meisten Business-Apps ist die Leistung ausreichend, aber für Spiele oder intensive Apps sollten Sie Flutter oder Full Native in Betracht ziehen.
  • Debugging Complexity: Während die Debugging-Tools verbessert wurden, kann die Fehlerbehebung bei plattformspezifischen Fehlern schwierig sein. Probleme können nur auf bestimmten Android-Geräten oder iOS-Versionen auftreten. Die React Native Community und Tools wie Flipper helfen, aber die Debugging-Erfahrung ist nicht so nahtlos wie die native Entwicklung.
  • UI Consistency: Da jede Plattform Komponenten unterschiedlich darstellt (z. B. hat unterschiedliche Erscheinungen auf iOS und Android), müssen Sie möglicherweise plattformspezifische Stile oder Komponenten schreiben. Die API hilft, das Betriebssystem zu erkennen, aber die Aufrechterhaltung eines wirklich pixelgenauen Designs auf beiden Plattformen kann zeitaufwendig sein.
  • Größe der App: React Native Apps sind aufgrund der Einbeziehung der JavaScript Engine (Hermes oder JavaScriptCore) tendenziell größer als vollständig native Apps.

Erweiterte Themen: Wenn Sie mehr brauchen

Interaktion mit nativen Modulen

Um die Lücke zu schließen, wenn keine JavaScript-Bibliothek existiert, können Sie ein natives Modul schreiben, z. B. um einen Hardwaresensor zu verwenden, der nicht von einem Community-Paket unterstützt wird:

  • Auf Android: Erstellen Sie eine Java-Klasse, die erweitert und registrieren Sie sie mit dem Paket.
  • Auf iOS: Erstellen Sie eine Swift/ObjC-Klasse, die das -Protokoll implementiert.
  • Dann rufen Sie es aus JavaScript:

Performance Optimierungsstrategien

  • Verwenden Sie Hermes: Hermes ist eine JavaScript-Engine, die für Mobilgeräte optimiert ist. Aktivieren Sie es in und und reduziert die Startzeit und den Speicherverbrauch.
  • FlatList vs ScrollView: Verwenden Sie oder für lange Listen.
  • Memoization: Benutze und , um unnötige Wiedergaben zu verhindern.
  • InteractionManager: Defer heavy computing until after animations or transitions complete.
  • Native Driver for Animations: Verwenden Sie , wenn Sie Nicht-Layout-Eigenschaften animieren (Opazität, Transformation).
  • Image Caching: Ersetzen Sie die Standard-Komponente durch (von ), um eine bessere Speicherverwaltung und ein besseres Caching zu ermöglichen.

Testen Sie Ihre App

React Native unterstützt verschiedene Teststrategien:

  • Unit-Testing: Verwenden Sie Jest (vorkonfiguriert) zum Testen von reinen Funktionen und Logik.
  • Komponententest: Verwenden Sie die React Native Testing Library, um Komponenten zu rendern und Benutzerinteraktionen zu testen.
  • End-to-End-Testing: Detox by Wix ist ein beliebtes Grey-Box-E2E-Test-Framework, das auf tatsächlichen Geräten und Simulatoren läuft. Es simuliert Benutzeraktionen und überprüft den UI-Status.

Bereitstellung in App Stores

Stellen Sie vor der Bereitstellung sicher, dass Sie über einen produktionsbereiten Build verfügen:

  • Konfigurieren Sie App-Icons und Splash-Bildschirme für beide Plattformen.
  • Legen Sie die App-Version und die Build-Nummer in und nativen Konfigurationsdateien fest.
  • Für Android: Generieren Sie eine signierte APK oder AAB mit dem Android Studio Keystore und laden Sie sie dann in die Google Play Console hoch.
  • Für iOS: Archivieren Sie die App in Xcode (Produkt > Archiv), unterschreiben Sie mit einem Distributionszertifikat und laden Sie sie über Xcode oder Transporter in den App Store Connect hoch.
  • Erwägen Sie die Verwendung von Continuous Integration Services wie GitHub Actions oder Bitrise, um das Erstellen und Signieren zu automatisieren.

Real-World Beispiele für React Native Apps

  • Instagram (Explore Tab / Threads): Instagram verwendet React Native für Teile seiner App, einschließlich der Explore-Tab und der eigenständigen Threads-App. Sie erreichten plattformübergreifendes Code-Sharing, während sie ein natives Gefühl beibehalten.
  • Discord (Mobile): Die mobile App von Discord wurde mit React Native entwickelt. Sie nutzten die Hermes-Engine für die Leistung und den Code-Sharing zwischen Android und iOS.
  • Walmart: Der Einzelhandelsriese hat seine mobile App mit React Native neu aufgebaut, wodurch auf beiden Plattformen nahezu identische Erlebnisse erzielt und die Entwicklungszeit verkürzt wurde.
  • Uber Eats (Restaurant Dashboard): Uber Eats verwendet React Native für sein Restaurant-Dashboard, was eine schnelle Iteration und plattformübergreifende Bereitstellung ermöglicht.

Schlussfolgerung

React Native bleibt eine Top-Wahl für die plattformübergreifende mobile Entwicklung aufgrund seiner Balance zwischen Leistung, Entwicklererfahrung und Codewiederverwendbarkeit.Obwohl es Einschränkungen hat - insbesondere bei grafikintensiven Apps und der Komplexität nativer Module - zeichnet es sich für die meisten mobilen Standardanwendungen aus, von E-Commerce über Social Media bis hin zu Unternehmenstools.

Indem Sie die Kernkonzepte (Komponenten, Status, Navigation, Styling) beherrschen, das umfangreiche Bibliotheks-Ökosystem nutzen und Best Practices für Leistung und Testen befolgen, können Sie qualitativ hochwertige Apps sowohl für iOS- als auch für Android-Benutzer mit einer einzigen Codebasis bereitstellen. Verwenden Sie die offizielle React Native Documentation als primäre Referenz und erkunden Sie Community-Ressourcen wie React Native Directory für Bibliotheken. Beginnen Sie noch heute mit dem Aufbau Ihrer ersten plattformübergreifenden App ist nur ein entfernt.