Comment configurer l'environnement de développement React Native dans VSCode

Cette fois, je vais vous montrer comment configurer l'environnement de développement React Native avec VSCode. Quelles sont les précautions pour configurer l'environnement de développement React Native avec VSCode. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Cet article présente la méthode de configuration de l'environnement de développement React Native avec VSCode et le partage avec tout le monde. Les détails sont les suivants :

1.InstallerVSCode

2. Installer le plug-in

Appuyez sur F1 et tapez ext install et appuyez sur Entrée, ou utilisez

Entrez React-Native pour installer React Native Tools

En supposant que React Native soit installé sur votre appareil,

S'il n'est pas installé, veuillez utiliser npm install -g react-native-cli pour installer

Ou suivez la documentation officielle

Créez un nouveau projet RN et ouvrez-le avec VSCode

Une fois l'installation terminée, appuyez sur F1 pour voir qu'il existe de nombreuses autres options pour React Native dans la commande

Réagir à la commande native

3. ConfigurerDébogageEnvironnement

a.Configuration automatique

Tapez shift+cmd+D ou cliquez sur l'icône

maj+cmd+D

Choisissez React Native :

Le fichier launch.json sera généré automatiquement, avec 4 options de configuration : 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.Configuration manuelle

Ensuite, nous effaçons les configurations

Cliquez sur le bouton Ajouter une configuration et sélectionnez la configuration

Ajouter une configuration

Les résultats sont les suivants :

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

Cliquez sur le bouton Ajouter une configuration ici et sélectionnez React Native : Debug iOS

Options de configuration

De cette façon, il est configuré pour exécuter 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"
    }
  ]
}

Cliquez sur l'option sur le côté gauche des paramètres, il y aura l'option Debug iOS

Déboguer iOS

Ensuite, vous pouvez cliquer sur le bouton Exécuter de l'option ci-dessus pour exécuter iOS avec succès

Bonjour tout le monde

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!