Native reagieren - Umgebung einrichten

Es gibt einige Dinge, die Sie installieren müssen, um die Umgebung für React Native einzurichten. Wir werden OSX als unsere Bauplattform verwenden.

Sr.Nr.	Software	Beschreibung
1	NodeJS und NPM	Sie können unserem Tutorial zur Einrichtung der NodeJS- Umgebung folgen , um NodeJS zu installieren.

Schritt 1: Installieren Sie die App create-react-native

Nachdem Sie NodeJS und NPM erfolgreich in Ihrem System installiert haben, können Sie mit der Installation der App "create-react-native-app" fortfahren (global wie unten gezeigt).

C:\Users\Tutorialspoint> npm install -g create-react-native-app

Schritt 2: Projekt erstellen

Durchsuchen Sie den erforderlichen Ordner und erstellen Sie ein neues natives Reaktionsprojekt, wie unten gezeigt.

C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative

Nach dem Ausführen des obigen Befehls wird ein Ordner mit dem angegebenen Namen mit dem folgenden Inhalt erstellt.

Schritt 3: NodeJS Python Jdk8

Stellen Sie sicher, dass Python NodeJS und jdk8 auf Ihrem System installiert sind. Wenn nicht, installieren Sie sie. Zusätzlich zu diesen wird empfohlen, die neueste Version des Garns zu installieren, um bestimmte Probleme zu vermeiden.

Schritt 4: Installieren Sie React Native CLI

Sie können die Befehlszeilenschnittstelle react native auf npm installieren, indem Sie den Befehl install -g react-native-cli wie unten gezeigt verwenden.

npm install -g react-native-cli

Schritt 5: Reagieren Sie nativ

Um die Installation zu überprüfen, durchsuchen Sie den Projektordner und versuchen Sie, das Projekt mit dem Befehl start zu starten.

C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm start

Wenn alles gut gegangen ist, erhalten Sie einen QR-Code wie unten gezeigt.

Wie angewiesen, besteht eine Möglichkeit, native Apps auf Ihrem Android-Gerät auszuführen, darin, expo zu verwenden. Installieren Sie den Expo-Client in Ihrem Android-Gerät und scannen Sie den oben erhaltenen QR-Code.

Schritt 6: Werfen Sie das Projekt aus

Wenn Sie den Android-Emulator mit Android Studio ausführen möchten, verlassen Sie die aktuelle Befehlszeile durch Drücken von ctrl+c.

Führen Sie dann run aus eject command wie

npm run eject

Dies fordert Sie zum Auswerfen auf, wählen Sie die erste mit den Pfeilen aus und drücken Sie die Eingabetaste.

Anschließend sollten Sie den Namen der App auf dem Startbildschirm und den Projektnamen des Android Studio- und Xcode-Projekts vorschlagen.

Obwohl Ihr Projekt erfolgreich abgeschlossen wurde, wird möglicherweise die folgende Fehlermeldung angezeigt:

Ignorieren Sie diesen Fehler und führen Sie "React Native" für Android mit dem folgenden Befehl aus:

react-native run-android

Aber vorher müssen Sie Android Studio installieren.

Schritt 7: Installieren von Android Studio

Besuchen Sie die Webseite https://developer.android.com/studio/ und Android Studio herunterladen.

Doppelklicken Sie nach dem Herunterladen der Installationsdatei darauf und fahren Sie mit der Installation fort.

Schritt 8: Konfigurieren von AVD Manager

Um den AVD Manager zu konfigurieren, klicken Sie auf das entsprechende Symbol in der Menüleiste.

Schritt 9: Konfigurieren von AVD Manager

Wählen Sie eine Gerätedefinition, Nexus 5X wird empfohlen.

Klicken Sie auf die Schaltfläche Weiter. Daraufhin wird ein Systemabbildfenster angezeigt. Wähle ausx86 Images Tab.

Wählen Sie dann Marshmallow und klicken Sie auf Weiter.

Klicken Sie abschließend auf die Schaltfläche Fertig stellen, um die AVD-Konfiguration abzuschließen.

Nachdem Sie Ihr virtuelles Gerät konfiguriert haben, klicken Sie auf die Wiedergabetaste in der Spalte Aktionen, um Ihren Android-Emulator zu starten.

Schritt 10: Android ausführen

Öffnen Sie die Eingabeaufforderung, durchsuchen Sie Ihren Projektordner und führen Sie die aus react-native run-android Befehl.

Anschließend beginnt die Ausführung Ihrer App in einer weiteren Eingabeaufforderung, deren Status Sie sehen können.

In Ihrem Android-Emulator sehen Sie die Ausführung der Standard-App als -

Schritt 11: local.properties

Öffne das android Ordner in Ihrem Projektordner SampleReactNative/android(in diesem Fall). Erstellen Sie eine Datei mit dem Namenlocal.properties und fügen Sie den folgenden Pfad hinzu.

sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk

hier ersetzen Tutorialspoint mit Ihrem Benutzernamen.

Schritt 12: Hot Reloading

Und um eine Anwendung zu erstellen, ändern Sie die App.js und die Änderungen werden automatisch auf dem Android-Emulator aktualisiert.

Wenn nicht, klicken Sie auf den Android-Emulator und drücken Sie ctrl+m Wählen Sie dann Enable Hot Reloading Möglichkeit.