Visual Studio Code,React Native

Visual Studio CodeでReact NativeのAndroidアプリをデバッグする方法です。

npm install -g react-native-cliを実行してReact-Native-Cli をインストールします。

Visual Studio Code の 「ターミナル」-「新しいターミナル」を実行してアプリを作成するフォルダーに移動します。react-native init Appを実行します。Appの箇所は任意です。

1. 拡張機能の React Native Tools をインストールします。
2. 「実行」の「構成を開く」を選択して launch.json ファイルを開きます。
3. configurations の内容を削除します。”React Native: エミュレーター上でのAndroidの実行”を選択します。launch.jsonは次のようになります。
   {
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Debug Android",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"platform": "android"
},
]
}
   上記の設定を行わないと「属性 ‘Program’ が絶対(‘extension-output-#6’)ではありません。絶対的なものにするには、プレフィックスとして ‘${WorkspaceFolder}/’ を追加することを考慮してください」のエラーダイアログが表示されます。
4. App.Js ファイルを開きます。
5. Android Emulator を開きます。
6. 「表示」-「コマンドパレット」または Ctrl + Shift + P でコマンドパレット開きます。
7. “React Native: デバイス上での Android の実行” を選択します。またはターミナルからreact-native run-androidを実行します。

Powershellで 「react-native : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\(username)\AppData\Roaming\npm\react-native.ps1 を読み込むことができ
ません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ react-native run-android」が発生する場合は実行ポリシーを Restrictedから RemoteSigned に変更します。PowerShell Set-ExecutionPolicy RemoteSignedを実行します。

App.js ファイルの const App: () => React$Nodeの箇所で 「any Type annotations can only be used in TypeScript files.ts(8010))」が発生する場合は、settings.json ファイルに "javascript.validate.enable": falseを挿入します。

---