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を挿入します。

投稿日: 2020年3月22日 カテゴリー: Android, Programming タグ: , , , , , , | パーマリンク コメントする.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。