VSCode で React Native 開発環境を構成する方法-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-04-13 14:04:49

オリジナル

2169 人が閲覧しました

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