ホームページ  >  記事  >  ウェブフロントエンド  >  React Native 開発環境を構成する VSCode の詳細な例

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

小云云
小云云オリジナル
2017-12-27 13:45:432668ブラウズ

この記事では主に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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。