今までずっとクロスプラットフォームアプリの開発は Cordova と React を利用してきたのですが、ふと React が使えるのだから React Native を導入しても良いのでは？と思い、とりあえず触ってみることにしました。
今回は、サンプルプロジェクトを作って、Android で実行するところまでやってみました。
公式サイトはこちらから。
React Native · A framework for building native apps using React
https://reactnative.dev/
ちなみに、React Native は Facebook が作成したオープンソースの モバイルアプリケーションフレームワーク です。
さて、早速サンプルのプロジェクトを作ってみたいと思います。
と言っても、公式サイトによると、任意のディレクトリに移動し、下記のコマンドを実行するだけでプロジェクト作成は完了します！
npx react-native init [プロジェクト名]
ちょっと時間がかかるので、終わるまで放置します。
上記のコマンドの実行が完了すれば、プロジェクト名のディレクトリが作成されています。
まずはターミナルアプリを起動してそのディレクトリまで移動しましょう。
あとは、実機もしくはシュミレータで実行するだけです。
Android の場合は react-native run-android、iOS の場合は react-native run-ios というコマンドを実行します。
私は今回は Android で実行してみました。
で、意気揚々とコマンドを実行したところ…次のようなエラーが発生。
ERROR: JAVA_HOME is not set and no ‘java’ command could be found in your PATH.
…環境変数の JAVA_HOME が定義されていないよ！とのことでした。
こちらについては、下記の記事を参考に修正しました。
ちゃんとできてる？Javaの環境変数の設定方法
https://eng-entrance.com/java-install-env
そして再度実行したところ、無事にPCに接続した Android 端末でアプリが実行できました！
アプリの画面はこんな感じ。
プロジェクトの内容は一切手を加えていないのでサンプルコードのままですが、無事実行できることが確認できました。
また、アプリを実行すると下記のようなウィンドウが起動するので、プロジェクトを再読み込みしたり、デバッグメニューを表示させたりなどの操作をここから行うことができます。
とりあえず、起動するところまではたどり着けたので、少しずつ触っていきたいと思います。
間に合えば、現在開発の予定のあるアプリを React Native で作りたいですね！
以上、React Native でクロスプラットフォームアプリを開発する（導入編）でした。
ご参考になれば幸いです。
