Vollständige Anleitung: Erstellen-Reagieren-Native-App mit Genymotion (Android Emulator) unter Windows 10 in 10 Schritten

Ich war schon immer ein Fan von Kurzanleitungen. Hier ist mein Versuch, denjenigen zu helfen, die einen Android-Emulator einrichten möchten, um ihre nativen React-Apps mit create-native-react-app und Genymotion unter Windows 10 zu erstellen.

In diesem Handbuch gehe ich davon aus, dass die Leute bei Null anfangen. (Neue Windows-Installation ohne Abhängigkeiten)

Schritt 1: Installieren Sie Node.js

Laden Sie zunächst Node.js herunter, da wir von vorne beginnen. Laden Sie einfach die LTS-Version herunter, um auf der sicheren Seite zu sein. Das können Sie hier bekommen:

Befolgen Sie die Installationsanweisungen (klicken Sie weiter auf Weiter), bis das Dialogfeld "Fertig stellen" angezeigt wird.

Sobald Sie fertig sind, öffnen Sie die Eingabeaufforderung (klicken Sie auf Start -> geben Sie cmd ein und drücken Sie die Eingabetaste) und geben Sie nacheinander Folgendes ein:

Knoten -v
npm -v

Wenn diese beiden Befehle keine Fehler zurückgaben, sind Sie für Schritt 2 eingestellt. Andernfalls ist bei der Installation von Node.js ein Fehler aufgetreten. Sie können das hier beheben:

** Schritt 2 (vorerst): Downgrade von npm auf v4.x.x.

Zum Zeitpunkt der Erstellung dieses Handbuchs. Die Unterstützung für npm @ 5 ist fehlerhaft. Ich bin sicher, dass es in naher Zukunft behoben wird. Aber im Moment machen Sie Folgendes:

npm install -g npm @ 4

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

Nachdem Sie Node.js in der Eingabeaufforderung eingerichtet haben, geben Sie Folgendes ein:

npm install -g erstelle-reagiere-native-App

und drücke Enter.

Schritt 4: Melden Sie sich bei Genymotion an

Gehen Sie zu https://www.genymotion.com/account/create/ und erstellen Sie ein Konto.

Persönlich,
Für die Unternehmensart wählte ich: Freiberufler und,
für die Verwendungsart wählte ich: Entwicklung

Schritt 4: Laden Sie Genymotion herunter

Sobald Sie fertig sind, sollten Sie zur Downloadseite weitergeleitet werden, wenn Sie nicht selbst dorthin gehen:

Wählen Sie die Option mit VirtualBox (falls VirtualBox noch nicht auf Ihrem Windows-PC installiert ist).

Schritt 5: Hinzufügen eines neuen virtuellen Geräts in Genymotion

Öffnen Sie nach dem Herunterladen Genymotion und melden Sie sich mit den in Schritt 3 erstellten Anmeldeinformationen an.
Jetzt können Sie ein neues virtuelles Gerät hinzufügen (Strg + N).

Wählen Sie eine aus der Liste und klicken Sie auf Weiter.

Sobald Sie fertig sind, werden Ihre Geräte unter "Virtuelle Geräte" aufgelistet:

Schritt 6: Umgebungsvariablen konfigurieren und Pfad hinzufügen

Wir sind fast da! Drücken Sie noch nicht auf Start, minimieren Sie das Genymotion-Fenster und klicken Sie mit der rechten Maustaste auf Diesen PC (Arbeitsplatz) -> Eigenschaften auswählen.

Suchen Sie im linken Bereich nach Erweiterte Systemeinstellungen und klicken Sie darauf.

Das Fenster Systemeigenschaften sollte angezeigt werden. Klicken Sie anschließend unten rechts auf Umgebungsvariablen.

Im angezeigten Fenster Umgebungsvariable.
Wählen Sie in der Systemvariablen-Klammer Pfad aus und klicken Sie auf Bearbeiten.

Klicken Sie im Fenster zum Bearbeiten der Umgebungsvariablen auf Neu -> Pfad C: \ Programme \ Genymobile \ Genymotion \ tools hinzufügen -> Klicken Sie auf OK, bis alle Fenster geschlossen sind.

Schritt 7: Starten des virtuellen Geräts in Genymotion

Stellen Sie als Nächstes das zuvor minimierte Genymotion-Fenster wieder her und klicken Sie auf Start.

Du solltest einen Android Emulator wie diesen sehen:

Schritt 8: Erstellen der ‘create-react-native-app’

Öffnen Sie als Nächstes erneut die Eingabeaufforderung, wechseln Sie in Ihr Projektverzeichnis und geben Sie Folgendes ein:

Erstelle eine native App für dein tolles Projekt

Schritt 9: Ausführen der App "create-react-native-app"

Geben Sie nun in der Eingabeaufforderung Folgendes ein:

cd your-awesome-project
npm android laufen lassen

Schritt 10: Erlaubnis geben und Voila!

Zuletzt geben Sie die Erlaubnis zur Ausstellung, wenn Sie diesen (oder einen ähnlichen) Bildschirm auf Ihrem virtuellen Gerät sehen.

Und du bist fertig!

Ich hoffe, dieser Leitfaden hat Ihnen geholfen. Viel Spaß beim Hacken!