Heim > Web-Frontend > js-Tutorial > Hauptteil

Detailliertes Beispiel für die Konfiguration der React Native-Entwicklungsumgebung durch VSCode

小云云
Freigeben: 2017-12-27 13:45:43
Original
2677 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode zum Konfigurieren der React Native-Entwicklungsumgebung mit VSCode vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. InstallierenVSCode

2. Plug-in installieren

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

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

Angenommen, Sie haben React Native auf dem Gerät installiert,

Wenn es nicht installiert ist, verwenden Sie bitte npm install -g reagieren-native-cli, um es zu installieren

oder befolgen Sie die offizielle Dokumentation

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

Nachdem die Installation abgeschlossen ist, drücken Sie F1 und Sie können sehen, dass es im Befehl viele weitere Optionen für React Native gibt

Native Command reagieren

3. Debugging-Umgebung konfigurieren

a. Automatische Konfiguration

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


Umschalt+Befehl+D

Klicken Sie dann auf


Einstellungen

React Native auswählen:


generiert automatisch eine launch.json-Datei mit 4 Konfigurationsoptionen Android debuggen, iOS debuggen, iOS debuggen, iOS debuggen



{
  "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"
    }
  ]
}
Nach dem Login kopieren
b. Manuelle Konfiguration

Als nächstes Konfigurationen löschen

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


Konfiguration hinzufügen


Das Ergebnis ist wie folgt:


Klicken Sie hier auf die Schaltfläche „Konfiguration hinzufügen“ und wählen Sie React Native: Debug iOS
{
  "version": "0.2.0",
  "configurations": [
    
  ]
}
Nach dem Login kopieren

Konfigurationsoptionen


Auf diese Weise wird die Ausführung von iOS konfiguriert


Klicken Sie auf die Option auf der linken Seite der Einstellungen, und es wird eine Option „iOS debuggen“ geben
{
  "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"
    }
  ]
}
Nach dem Login kopieren


iOS debuggen


Als nächstes können Sie auf die Schaltfläche „Ausführen“ klicken die obige Option zum erfolgreichen Ausführen von iOS

Hallo Welt


4. Weitere nützliche Plug-Ins

    Auto Close Tag
  1. Auto Complete Tag
  2. AutoFileName
  3. Tag automatisch umbenennen
  4. Automatischer Import
  5. Pfad-Intellisense
  6. Farbhervorhebung
  7. Verwandte Empfehlungen:


Instanz ausführliche Erklärung der VSCode-Konfiguration reagieren Schritte der Entwicklungsumgebung

Beispiel ausführliche Erklärung von vue-cli vscode-Konfiguration eslint

Wichtige Plug-ins und Konfigurationen für die Verwendung von VSCode für die PHP-Entwicklung

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Konfiguration der React Native-Entwicklungsumgebung durch VSCode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage