VSCode で React Native 開発環境を構成する方法

今回は、VSCode を使用して React Native 開発環境を構成する方法を説明します。VSCode を使用して React Native 開発環境を構成する際の 注意事項 について、実際のケースを見てみましょう。

この記事では、VSCode で React Native 開発環境を構成する方法を紹介し、詳細は次のとおりです:

1.インストールVSCode

2. プラグインをインストールします

F1 を押して ext install と入力して Enter を押すか、

を使用します 「react-native」と入力して React Native ツールをインストールします

デバイスに React Native がインストールされていると仮定すると、

インストールされていない場合は、npm install -g reverse-native-cli を使用してインストールしてください

または、公式ドキュメントに従ってください

新しい RN プロジェクトを作成し、VSCode で開きます

インストールが完了したら、F1 を押すと、コマンドに React Native のオプションがさらにたくさんあることがわかります

ネイティブコマンドに反応

3. デバッグ環境を構成する

a. 自動構成

「shift+cmd+D」と入力するか、アイコンをクリックします

シフト+cmd+D

React Native を選択します:

launch.json ファイルは 4 つの構成オプションで自動的に生成されます: 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. 手動設定

次に設定をクリアします

[構成の追加] ボタンをクリックし、構成を選択します

構成を追加します

結果は以下の通りです:

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

ここで「構成の追加」ボタンをクリックし、「React Native: Debug iOS」を選択します

構成オプション

このようにして、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"
    }
  ]
}

を実行するように設定されます 設定の左側にあるオプションをクリックすると、iOSのデバッグオプションがあります

iOSをデバッグする

次に、上記のオプションの実行ボタンをクリックすると、iOS が正常に実行されます

Hello world

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がVSCode で React Native 開発環境を構成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。