So konfigurieren Sie die React Native-Entwicklungsumgebung in VSCode

Dieses Mal zeige ich Ihnen, wie Sie die React Native-Entwicklungsumgebung mit VSCode konfigurieren. Was sind die Vorsichtsmaßnahmen für die Konfiguration der React Native-Entwicklungsumgebung mit VSCode? Werfen wir einen Blick darauf.

In diesem Artikel wird die Methode zum Konfigurieren der React Native-Entwicklungsumgebung mit VSCode vorgestellt und mit allen geteilt. Die Details lauten wie folgt:

1.InstallierenVSCode

2. Plug-in installieren

Drücken Sie F1, geben Sie ext install ein und drücken Sie die Eingabetaste, oder verwenden Sie

Geben Sie „react-native“ ein, um React Native Tools zu installieren

Vorausgesetzt, Sie haben React Native auf Ihrem Gerät installiert,

Wenn nicht installiert, verwenden Sie bitte npm install -g reagieren-native-cli, um

zu installieren Oder folgen Sie der offiziellen Dokumentation

Erstellen Sie ein neues RN-Projekt und öffnen Sie es mit VSCode

Nachdem die Installation abgeschlossen ist, drücken Sie F1, um zu sehen, dass der Befehl

viele weitere Optionen für React Native enthält

Nativen Befehl reagieren

3. Konfigurieren SieDebugUmgebung

a. Automatische Konfiguration

Geben Sie Umschalt+Befehl+D ein oder klicken Sie auf das Symbol

Umschalt+Befehl+D

Wählen Sie React Native:

Die launch.json-Datei wird automatisch generiert, mit 4 Konfigurationsoptionen: Debug Android, Debug iOS, Debug iOS, Debug iOS

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Android",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "android",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    },
    {
      "name": "Debug iOS",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "ios",
      "target": "iPhone 5s",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    },
    {
      "name": "Attach to packager",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "attach",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    },
    {
      "name": "Debug in Exponent",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "exponent",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    }
  ]
}

b. Manuelle Konfiguration

Als nächstes löschen wir die Konfigurationen

Klicken Sie auf die Schaltfläche „Konfiguration hinzufügen“ und wählen Sie „Konfiguration“ aus

Konfiguration hinzufügen

Die Ergebnisse sind wie folgt:

{
  "version": "0.2.0",
  "configurations": [
    
  ]
}

Klicken Sie hier auf die Schaltfläche „Konfiguration hinzufügen“ und wählen Sie React Native: Debug iOS

Konfigurationsmöglichkeiten

Auf diese Weise ist es für die Ausführung von iOS

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug iOS",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "ios",
      "sourceMaps": true,
      "target": "iPhone 6s",
      "outDir": "${workspaceRoot}/.vscode/.react"
    }
  ]
}

konfiguriert Klicken Sie auf die Option auf der linken Seite der Einstellungen. Es wird die Option „iOS debuggen“ angezeigt

Debuggen Sie iOS

Als nächstes können Sie auf die Schaltfläche „Ausführen“ der obigen Option klicken, um iOS erfolgreich auszuführen

Hallo Welt

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie die React Native-Entwicklungsumgebung in VSCode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!