React Native 開発環境を構成する VSCode の詳細な例

この記事では主にVSCodeでReact Native開発環境を構築する方法を紹介していますが、編集者が非常に良いと思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. VSCode

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

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

を使用してreact Native Toolsをインストールします。
React ネイティブがデバイスにインストールされていると仮定します

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

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

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

インストールは完了です F1 を押すと、コマンド

React Native Command

3 に React Native に関するオプションがさらにたくさんあることがわかります。デバッグ環境

a. 自動構成

Shift+cmd+D と入力するか、アイコン

shift+cmd+D

をクリックし、

設定をク​​リックします

選択するReact Native:

は、4 つの構成オプション (Android のデバッグ、iOS のデバッグ、iOS のデバッグ、iOS のデバッグ) を含む launch.json ファイルを自動的に生成します

{
  "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]を選択します。 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

4. その他の便利なプラグイン

タグの自動終了

1. 自動完成タグ

2. AutoFileName

3. タグの自動名前変更

4. 自動インポート

5. パスIntel lisense

6. カラーハイライト

7. 関連推奨事項:

例では、次の手順を詳しく説明しますVSCode で反応開発環境を構成する

例では、vue-cli vscode を詳細に説明しています

PHP 開発に VSCode を使用するための必須のプラグインと構成

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