【React Native】Windowsアプリを作る
React Nativeを使ってWindowsアプリを作りたい！
概要
今回の記事では、React Nativeを使ってWindowsアプリを作る手順を掲載する。
仕様書
環境
- node v21.1.0
- npm 10.8.1
- react-native 13.6.8
- react-native-windows-init 1.4.27
手順書
インストール編とプロジェクト作成編の2部構成です。
インストール編
react-native-cliをグローバルにインストールする。
npm install -g react-native-cliインストールしたreact-native-cliのバージョンを確認するにはreact-nativeに対してオプション-vを設定して実行する。
react-native --vプロジェクト作成編
下記のような感じでコマンドを実行するとReactのプロジェクトが作られる。
npx react-native init <project_name>コマンドを実行した場所に<project_name>でディレクトリーが作られ、その中にpackage.jsonなどのファイルが作られてる。
プロジェクトのディレクトリーに移動して、Windowsアプリを作るためのパッケージをインストールする。
cd <project_name>
npx react-native-windows-init --overwrite下記のような感じで出力されるのでyを押すとインストールが始まる。
Need to install the following packages:
react-native-windows-init@1.4.27
Ok to proceed? (y)Windowsアプリを実行するには下記のコマンドを実行する。
npx react-native run-windowsコマンドを実行するとMSBuildやらがプロジェクトをC++に変換してアプリがWindowsで動くアプリにビルドされる。
ビルドに必要なアプリが不足してる場合は、インストール用のスクリプト<project_dir>\node_modules\react-native-windows\scripts\rnw-dependencies.ps1を管理者で開いたPowerShellで実行しろと促される。…だけども、ディレクトリーを移動するのもめんどいので公式サイトで公開されてるスクリプトを実行するコマンドを実行すると楽。
Set-ExecutionPolicy Unrestricted -Scope Process -Force;
iex (New-Object System.Net.WebClient).DownloadString('https://aka.ms/rnw-vs2022-deps.ps1');コマンドは下記を参照した。
Visual Studioが更新される可能性があるので、その場合はVisual Studioを事前に閉じておかないと更新に無言で失敗してしまうので注意。
私の環境では他にNode.jsの更新とYarnのイントールがスクリプトによって実行された。
まとめ（感想文）
Reactに慣れてると学習コストを抑えられるかもしれない。
過去にFlutterとReact Nativeを比較した際にReact NativeでWindowsアプリの実行方法がわからなかったんだけども、やっと分かって良かった良かった。
後日、パッケージを追加とかしてたら、Windowsアプリのビルドができなくなった。
node_modules\react-native\ReactCommon\cxxreact\Instance.cpp(81,30): error C2220: ...
node_modules\react-native\ReactCommon\cxxreact\Instance.cpp(94,4): error C1001: ...いろいろいじってみたんだけども復旧せず、諦めてReact Nativeの夢から覚めることとした。管理がちょいとピーキー過ぎませんかね。
パッケージの中で内部コンパイラエラーとかどうしようもない！
参考文献・引用
下記の記事を参考にさせていただきました。ありがとうございました。
