ホームページ > 記事 > ウェブフロントエンド > 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
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. その他の便利なプラグイン
タグの自動終了
例では、次の手順を詳しく説明しますVSCode で反応開発環境を構成する
例では、vue-cli vscode を詳細に説明しています
PHP 開発に VSCode を使用するための必須のプラグインと構成
以上がReact Native 開発環境を構成する VSCode の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。