Windows 用 React Native を使用してデスクトップ アプリのビルドを開始する

  • [アーティクル]

Windows 用 React Native を使用すると、React を使用してユニバーサル Windows プラットフォーム (UWP) アプリを作成できます。

React Native の概要

React Native は、Facebook によって作成されたオープンソース のモバイル アプリケーション フレームワークです。 これは、Android、iOS、Web、UWP (Windows) 用のアプリケーションを開発するために使用され、ネイティブ UI コントロールとネイティブ プラットフォームへの完全なアクセスを提供します。 React Native を使用するには、JavaScript の基礎を理解する必要があります。

React に関する一般的な情報については、「React の概要」ページを参照してください。

前提条件

Windows 用 React Native を使用するためのセットアップ要件については、「システム要件」ページを参照してください。 Windows 設定アプリで開発者モードが有効になっていることを確認してください。

Windows 用 React Native をインストールする

Windows デスクトップ アプリを作成するには、次の手順に従って Windows 用 React Native を使用します。

  1. コマンドライン ウィンドウ (ターミナル) を開き、Windows デスクトップ アプリ プロジェクトを作成するディレクトリに移動します。

  2. 次のコマンドを Node Package Executor (NPX) で使用すると、追加のツールをローカルにインストールしたりグローバルにインストールしたりしなくとも、React Native プロジェクトを作成できます。 このコマンドは、<projectName> で指定されたディレクトリに、React Native アプリを生成します。

    npx react-native init <projectName>

    特定の React Native バージョンを持つ新しいプロジェクトを開始する場合は、--version 引数を使用できます。 React Native のバージョンの詳細については、バージョン - React Native に関する記事を参照してください。

    npx react-native@X.XX.X init  <projectName> --version X.XX.X

  3. プロジェクト ディレクトリに切り替え、次のコマンドを実行して、Windows 用 React Native パッケージをインストールします。

    cd projectName
npx react-native-windows-init --overwrite

  4. アプリを実行するには、最初に Web ブラウザー (Microsoft Edge) を起動し、次のコマンドを実行します。

    npx react-native run-windows

Visual Studio を使用して React Native デスクトップ アプリをデバッグする

  • 次のオプションをオンにして、Visual Studio 2022 をインストールします。

    • ワークロード: C++ による ユニバーサル Windows プラットフォーム開発およびデスクトップ開発。
    • 個別のコンポーネント: 開発アクティビティおよび Node.js 開発のサポート。

  • Visual Studio のアプリケーション フォルダーでソリューション ファイルを開きます (例: AwesomeProject を <projectName> として使用した場合の AwesomeProject/windows/AwesomeProject.sln)。

  • [実行] ボタンの左側、[チームとツール] メニュー項目の下にあるコンボ ボックス コントロールから、デバッグ構成と x64 プラットフォームを選択します。

  • プロジェクト ディレクトリから yarn start を実行し、React Native パッケージャーが成功を報告するまで待機します。

  • VS の [プラットフォーム] コンボ ボックス コントロールの右にある [実行] を選択するか、[デバッグ] -> [デバッグなしで開始] メニュー項目を選択します。 新しいアプリが表示され、Chrome が http://localhost:8081/debugger-ui/ を新しいタブに読み込みます。

  • F12 キーを押すか、Ctrl + Shift + I キーを押して、Web ブラウザーで開発者ツールを開きます。

Visual Studio Code を使用して React Native デスクトップ アプリをデバッグする

  • Visual Studio Code をインストールする

  • VS Code でアプリケーション フォルダーを開きます。

  • VS Code 用 React Native Tools プラグインをインストールします。

  • アプリケーションのルート ディレクトリ .vscode/launch.json に新しいファイルを作成し、次の構成を貼り付けます。

    {
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Windows",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "windows"
        }
    ]
}

  • F5 キーを押すか、[デバッグ] メニューに移動し (または、Ctrl + Shift + D キーを押し)、[デバッグ] ドロップダウンで [デバッグ ウィンドウ] を選択し、緑色の矢印を押してアプリケーションを実行します。

その他のリソース