Detaillierte Erklärung zur grundlegenden Verwendung des React Native-Scaffoldings

Erstellen des Projekts

Führen Sie die Befehlszeile im entsprechenden Pfad aus: react-native init 項目名(der Name darf keine Sonderzeichen wie Bindestriche enthalten und die Benennung kann sich auf den Namen der APP-Anwendung wie FaceBook beziehen)

react-native --v //Version anzeigen react-native init demo --version 0.48.0 //Angegebene Version installieren react-native init demo --verbose --version 0.48.0 //verbose wird verwendet, um während der Initialisierung die Installationsdetails anzuzeigen, einschließlich der installierten Module und des Fortschritts npm view react-native versions //Sie können alle Versionsinformationen von react-native anzeigen

Springen Sie zum entsprechenden Pfad und führen Sie das entsprechende mobile Projekt aus:

CD-Projektname react-native run-ios oder react-native run-android

Im Normalfall ist die Wirkung der Operation wie folgt:

RN-Debugging-Tipps

Entwicklermenü

„Developer Menu“ ist ein von React Native für Entwickler angepasstes Entwicklermenü, um Entwicklern beim Debuggen von React Native-Anwendungen zu helfen.

Öffnen Sie das Entwicklermenü des Android-Emulators im Emulator:

Sie können das Entwicklermenü schnell mit Command⌘ + M öffnen. Es kann auch über die Menütaste am Simulator geöffnet werden.

iOS-Simulator:

Sie können das Entwicklermenü schnell mit Command⌘ + D öffnen.

Neu laden

Aktualisieren Sie die Seite. Die Tastenkombination lautet Befehl + R.

Hinweis: Die Aktualisierungsfunktion funktioniert nur, wenn Sie die JavaScript- Datei ändern. Wenn Sie neue Dateien hinzufügen oder den nativen Code ändern, müssen Sie die Anwendung mit Xcode neu kompilieren.

JS remote debuggen

Mit dieser Funktion können Entwickler Anwendungen in Chrome auf die gleiche Weise debuggen, wie sie Webanwendungen debuggen.

Bündelstandort ändern

Ändern der Paketadresse

Inspektor ein-/ausschalten

Zeigen Sie Komponentenstile im Simulator an. Nicht sehr nützlich.

Schnelle Aktualisierung deaktivieren

Schnelle Aktualisierung deaktivieren

Leistungsmonitor anzeigen

Wenn diese Funktion aktiviert ist, wird ein Überwachungsfenster angezeigt, das die Speichernutzung in Echtzeit, die UI- und JavaScript- FPS und andere Informationen anzeigt. Hilft uns bei der Fehlerbehebung bei Leistungsproblemen.

Fehler und Warnungen

Im Entwicklungsmodus werden die Fehler und Warnungen des JS-Teils direkt auf dem Telefon- oder Simulatorbildschirm gedruckt und in roten und gelben Bildschirmen angezeigt. .

Fehler

Fehler, die beim Ausführen des React Native-Programms auftreten, werden direkt auf dem Bildschirm mit einem roten Hintergrund angezeigt und die Fehlermeldung ausgedruckt. Sie können Fehler auch manuell über console.error() auslösen.

Warnhinweise

Warnungen, die während der Ausführung des React Native-Programms auftreten, werden auch direkt auf dem Bildschirm angezeigt, mit einem gelben Hintergrund versehen und Warnmeldungen ausgedruckt. Sie können Warnungen auch manuell über console.warn() auslösen. Sie können die Anzeige von Warnungen auch manuell deaktivieren, indem Sie console.disableYellowBox = true verwenden, oder die entsprechende Warnung ignorieren, indem Sie console.ignoredYellowBox = ['Warning: ...'];

Chrome-Entwicklertools

Schritt 1: Remote-Debugging starten

Klicken Sie im Entwicklermenü auf „JS remote debuggen“, um die JS-Remote-Debugging-Funktion zu starten. Chrome wird geöffnet und eine Registerkarte „http://localhost:8081/debugger-ui.“ wird erstellt.

Schritt 2: Chrome Developer Tools öffnen

Öffnen Sie die Entwicklertools unter der Registerkarte „http://localhost:8081/debugger-ui.“ Öffnen Sie das Chrome-Menü -> Wählen Sie Weitere Tools -> Wählen Sie Entwicklertools. Sie können die Entwicklertools auch mithilfe der Tastenkombinationen öffnen (Befehl⌘ + Wahltaste⌥ + I auf dem Mac, Strg + Umschalt + I unter Windows).

Wenn beim Breakpoint-Debugging einige "unerklärliche" Probleme und Fehler auftreten, allgemeine Lösungen

Das Unerklärliche bedeutet hier, dass der Code im letzten Moment noch normal lief und ohne Änderungen populär wurde:

1. Erfrischen! aktualisieren! aktualisieren!

2. Verwenden Sie den Befehl react-native run-xxx erneut, um die App zu starten

3. Löschen Sie die App, fahren Sie den lokalen Server herunter und leeren Sie den lokalen Cache

Garn: Cache löschen Garn-Cache bereinigen

npm: Cache leeren npm cache clean -f

Dies ist das Ende dieses Artikels über die grundlegende Verwendung des React Native-Scaffoldings. Weitere relevante Inhalte zum React Native-Scaffolding finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!