ブログアーカイブ
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の箇所は任意です。
- 拡張機能の React Native Tools をインストールします。
- 「実行」の「構成を開く」を選択して launch.json ファイルを開きます。
- 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}/’ を追加することを考慮してください」のエラーダイアログが表示されます。 - App.Js ファイルを開きます。
- Android Emulator を開きます。
- 「表示」-「コマンドパレット」または Ctrl + Shift + P でコマンドパレット開きます。
- “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 に変更します。
ません。詳細については、「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
を挿入します。