Framework · Seit 2015

React Native

React Native ist ein Open-Source-Framework, mit dem Sie Android- und iOS-Apps mit React und JavaScript oder TypeScript aus einer Codebasis mit nativer UI bauen.

Anleitung starten Diskussionen

React Native ist ein Open-Source-Framework, das Meta 2015 veröffentlicht hat. Es ermöglicht, Android- und iOS-Apps mit dem Komponentenmodell von React zu entwickeln. Die Oberflächen werden nicht in einer Web-View, sondern mit den nativen Views der jeweiligen Plattform dargestellt, sodass sich die Apps wie gewöhnliche native Apps anfühlen. Heute wird React Native von Meta gemeinsam mit der Community und Partnerunternehmen weiterentwickelt; die standardmäßig aktive New Architecture verbindet JavaScript und nativen Code direkter.

Besonders stark ist React Native für Teams, die React bereits im Web einsetzen und mit demselben Wissen und denselben Werkzeugen mobile Apps bauen möchten. Eine Codebasis bedient beide Plattformen, bei Bedarf lässt sich mit Kotlin oder Swift nativ erweitern, und Fast Refresh zeigt Änderungen sofort nach dem Speichern. Verbreitet ist es bei Apps mit vielen Ansichten und kurzen Release-Zyklen, etwa im Handel, in sozialen Netzwerken oder für interne Geschäftsanwendungen. Auch einzelne Ansichten in einer bestehenden nativen App sind möglich.

Am einfachsten starten Sie, wie von der offiziellen Dokumentation empfohlen, mit einem Expo-Projekt. Installieren Sie Node.js, legen Sie mit create-expo-app ein Projekt an, installieren Sie Expo Go auf dem Smartphone und öffnen Sie die App per QR-Code. Lernen Sie zuerst die Grundlagen von React und bauen Sie dann mit dem Leitfaden zu den Kernkomponenten und dem Expo-Tutorial eine kleine eigene App.

Besonderheiten

Native Oberfläche

Komponenten wie View, Text und Image werden als native Views der Plattform dargestellt und wirken entsprechend vertraut.

Einfach React

Komponenten, Props, State und Hooks funktionieren wie in React, ergänzt um TypeScript und das npm-Ökosystem.

Schnelle Iteration

Fast Refresh übernimmt Codeänderungen unter Erhalt des Zustands, React Native DevTools hilft beim Debuggen.

Native Erweiterbarkeit

Turbo Native Modules und Fabric-Komponenten der New Architecture binden Kotlin- und Swift-Code direkt an.

Einsatzgebiete

Mobile Apps gleichzeitig für Android und iOS
Shopping-, Social- und Content-Apps
Interne Geschäftsanwendungen
React-Native-Ansichten in bestehenden nativen Apps

Installation

1
Node.js installieren
Die Werkzeuge von React Native laufen auf Node.js. Installieren Sie die LTS-Version von nodejs.org und prüfen Sie, ob eine Version ausgegeben wird. Für den Android-Emulator brauchen Sie Android Studio, für den iOS-Simulator macOS mit Xcode.
```
node --version
```
2
Expo-Projekt anlegen
Legen Sie, wie von der offiziellen Dokumentation empfohlen, ein neues Projekt mit Expo an. Die Vorlage ist bereits mit TypeScript und dateibasiertem Routing (Expo Router) eingerichtet.
```
npx create-expo-app@latest my-app
```
3
Entwicklungsserver starten
Starten Sie den Entwicklungsserver im Projektordner und scannen Sie den QR-Code mit Expo Go oder drücken Sie im Terminal a (Android) bzw. i (iOS).
```
cd my-app && npx expo start
```

Dein erstes Programm

Ihre erste Ansicht

In einem Projekt aus der Vorlage blank-typescript ist App.tsx die Wurzelkomponente. View ist ein Layout-Container, Text zeigt Text an; jeder Text muss in einer Text-Komponente stehen. Die mit StyleSheet.create definierten Stile zentrieren den Inhalt per Flexbox. Wenn Sie die Datei ändern und speichern, aktualisiert Fast Refresh die laufende App sofort.

App.tsx

import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello, world!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: "center", justifyContent: "center" },
});

npx create-expo-app@latest hello --template blank-typescript && cd hello && npx expo start

Wichtige Werkzeuge

Expo: Das von der React-Native-Dokumentation empfohlene Framework mit Projektvorlagen, Expo Router, Modulen für Gerätefunktionen und Development Builds.
Metro: Der JavaScript-Bundler von React Native. Während der Entwicklung bündelt er den Code, liefert ihn an die App und ermöglicht Fast Refresh.
React Native DevTools: Der offizielle Debugger für React Native mit Haltepunkten, Konsole, React-Komponentenbaum und Profiler.
EAS: Expo Application Services: Cloud-Builds (EAS Build), Store-Einreichung (EAS Submit) und Over-the-Air-Updates (EAS Update).

Schritt-für-Schritt-Anleitung

Sechs Kapitel führen dich von der Installation bis zu den Kernkonzepten von React Native.

Offizielle Dokumentation und Ressourcen

Sprachen

Diskussionen

Diskussion starten

Stelle Fragen, teile Erfahrungen und tausche Meinungen zu React Native aus.

Noch keine Diskussionen. Starte die erste.