Lassen Sie uns eine einfache React Native-App mit zwei Bildschirmen erstellen, indem wir den Stack Navigator von React Navigation verwenden.

Stellen Sie zunächst sicher, dass Sie React Navigation installiert haben:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <link
      rel="stylesheet"
      href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css"
    />
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget1-text" value="npm install @react-navigation/native @react-navigation/native-stack" />
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
            ></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Nun erstellen wir zwei Bildschirme: `HomeScreen` und `DetailsScreen`.

Nun richten wir die Navigation in unserer `App.js` mit dem Stack Navigator ein:

Wir haben einen einfachen Stack Navigator mit React Navigation eingerichtet.

## Lassen Sie uns aufschlüsseln, was jeder Teil macht:

### Schritt 1
`import`-Anweisungen: Notwendige Module aus React und React Navigation sowie benutzerdefinierte Bildschirmkomponenten (`HomeScreen` und `DetailsScreen`) importieren.

### Schritt 2
Erstellen Sie einen Stack-Navigator mit `createNativeStackNavigator()`.

### Schritt 3
Definieren Sie die `App`-Komponente, die den Navigationscontainer und den Stapelnavigator rendert.

### Schritt 4
Geben Sie die `NavigationContainer`-Komponente zurück, die die gesamte Navigationsstruktur umschließt.

### Schritt 5
Definieren Sie innerhalb des `NavigationContainer` die `Stack.Navigator`-Komponente, die den Stapel der Bildschirme enthält.

### Schritt 6
Fügen Sie Bildschirme zum Stack hinzu, indem Sie `Stack.Screen`-Komponenten verwenden. Jeder Bildschirm hat einen eindeutigen Namen und ist mit einer Komponente verknüpft.

Erkunden Sie die Welt der mobilen App-Entwicklung mit React Native. Lernen Sie grundlegende Konzepte und fortgeschrittene Techniken, um plattformübergreifende mobile Anwendungen effizient zu erstellen.

Die umfassende Einführung in React Native skizziert die Voraussetzungen und Kursziele und bietet Anleitung zu effizienten Lernpraktiken. Verstehen Sie, was Sie vom Kurs erwarten können und wie Sie den Lernprozess effektiv angehen.

Erkunden Sie die grundlegenden Konzepte von React Native, von der Einrichtung der Entwicklungsumgebung bis hin zum Verständnis der React Native-Komponenten. Sammeln Sie praktische Erfahrungen beim Erstellen einer einfachen App und legen Sie den Grundstein für komplexere Projekte.

Lernen Sie die effiziente Verwaltung dynamischer States, Props, Navigation und Hooks, um ausgereifte React Native-Anwendungen zu erstellen.

Erkunden Sie fortgeschrittene Aspekte der React Native-Entwicklung und behandeln Sie wichtige Themen wie Input-Verarbeitung, StatusBar, ActivityIndicators und mehr. Tauchen Sie tief in praktische Techniken zum Erstellen anspruchsvoller mobiler Anwendungen ein.

Stack-Navigator

Lassen Sie uns aufschlüsseln, was jeder Teil macht:

Schritt 1

Schritt 2

Schritt 3

Schritt 4

Schritt 5

Schritt 6

Awesome!