Expo.io

react-nativeを使用したアプリを作るトイプロジェクトを実施するための環境設定方法を説明します。初心者でも、react-nativeプロジェクトを簡単に開始できるexpoを活用しました。 Expoを使用しないとReactNative開発に必要な複数ツールを直接セットしなければならないという不便さがあったので選択しました。

準備

📌 Node.js インストール(npm含む)
📌 expo.io アカウント作り(https://expo.io/)

👆npmを利用したExpo設置

npmを利用してexpo-cliを設置します。
expo-cliは簡単にreact nativeを開発できるようサポートしてくれます。

$ npm install -g expo-cli

✌️expoを利用して希望するディレクトリにreact-nativeプロジェクトを作成します。

$ expo init personalPA

👌インストールを終えた後は、expoを利用して直接作成したプロジェクトを作成します。

$ cd personalPA
$ npm start

👀 以下の全体の実行流れを参考してください。

プログラムが正常に起動すると、上記の”BARCODE HERE”のところに大きなQRコードが出てきますが、これをApp StoreからダウンロードしたExpoアプリでスキャンすると、基本的なアプリ画面を確認できます。

Googleストアでアプリをインストールして実行すると、QRコードをスキャンするボタンがあります。 ボタンを押してスキャンすると、ReactNativeで作ったネイティブアプリケーションが実行されます。

また、以下のようにプロジェクトソースコードのApp.tsxの文句を直すと、Native Applicationにすぐに反映されることが以下のように確認できます。

まとめ

アプリ開発のための環境設定は簡単に完了しました。このようにEXPOは簡単にコーディングを始められる便利なツールです。 しかし、React-Nativeだけで開発する場合とは異なり、EXPOはネイティブ言語で書かれたライブラリを利用できないという限界がありますので、選択の際に参考にして適切な方法を選択してください。

📚参考講義：React Native Docs