javascriptのフレームワークであるReactでネイティブアプリが作成可能となるReact Native。
最近では簡単にビルドや動作確認が行えるExpoなどのサービスもありますが、将来的にiOS/Androidエンジニアと連携を取れるようになりたいという意思もあり、そちらは使わずに進めてみたので手順を共有していきます。Expoすごい便利そうなんですけどね・・・
環境はMacで進めていきます。
各種インストール
まずは開発に必要な以下のパッケージをインストールします。
brew install node brew install watchman
次にCLI(コマンドラインツール)をインストールします。
yarn global add react-native-cli
npmを利用している場合は以下のコマンドで
npm install -g react-native-cli
Androidアプリを開発する場合
Androidアプリを開発する場合はJDKが必要になります。以下のコマンドでインストール可能です。
brew cask install java
もしbrew caskが使えない場合、先にこちらのコマンドを実行しましょう。
brew install caskroom/cask/brew-cask
次にAndroid Studioをインストールします。
brew cask install android-studio
インストール完了後にAndroid Studioを立ち上げることで、セットアップが始まります。
Android Studioのセットアップ
最初に設定ファイルを読み込むか聞かれます。必要であればインポートしてください。
次にインストール方式を選択する画面が出ますので、「Custom」を選択します。
UIテーマはお好みで選んでいただき、次の画面でReact Nativeの公式で指定されているコンポーネントをインストールします。Android SDK Locationについてはデフォルトで進めます。
あとはデフォルトの設定でウィザードを進めれば各種インストールが実行されます。
インストールが完了したら環境変数を設定しておきましょう！
export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/platform-tools
source ~/.bash_profile
Android Studioをインストールすると、Android SDKの最新版がインストールされますが、2017/11現在React NativeにおいてはAndroid SDK 6.0が必要となりますので、これらを個別に取得します。
Android StudioのトップからSDK Managerを選択してください。
React Native公式の推奨に沿って、Show Package Detailsをチェック後、以下のパッケージを選択します。
次に同画面上部のタブでSDK Toolsに切り替え、同じくShow Package Detailsをチェック後、Android SDK Build-Toolsの23.0.1をチェックします。
最後にApplyをクリックし、ライセンスに同意してインストールが開始されます。
あと一つやることがあります。エミュレーターの起動です。
エミュレータを起動しておけば、動作確認が簡単にできるようになります。
$ emulator -list-avds Nexus_5X_API_27_x86
emulator -list-avdsコマンドによって利用可能な仮想端末が表示されます。特に端末を選ぶ必要がなければ表示された仮想端末を起動しましょう。
~/Library/Android/sdk/tools/emulator -avd Nexus_5X_API_27_x86
iOSアプリを開発する場合
iOSアプリを開発する場合はXcodeが必要になります。
XcodeはAppStoreよりインストールを行なってください。
https://itunes.apple.com/jp/app/xcode/id497799835?mt=12
React Nativeによる開発
インストール作業は以上となります。早速以下のコマンドでプロジェクトを作成します。
react-native init SampleApp
コマンドを実行したディレクトリ配下にSampleAppディレクトリが作成され、その中にReact Nativeの開発において必要なファイルやディクレクトリ構造が作成されます。.gitignoreなどのファイルもよしなに記述してくれています。ありがたや。
動作確認
iOS/Android共通して、作成されたプロジェクトに移動します。
cd SampleApp
iOSの場合
以下のコマンドでiOS用のビルドが実行されます。
react-native run-ios
あとはXcodeからios/SampleApp.xcodeprojをエミュレータで開けば動作確認が可能です。
※今回はAndroidの方をメインで進めているため、動作確認は行なっておりません。後ほど更新させていただきます。
Androidの場合
以下のコマンドでAndroid用のビルドが行われます。
react-native run-android
また、エミュレータが起動されている場合、以下のように自動でエミュレータが立ち上がり、React Nativeプロジェクトのサンプル画面が表示されます。
まとめ
アプリ開発をやってみたいなぁと思いつつ、各ネイティブ開発言語を習得するのは骨が折れるなぁと思いReact Nativeに手を出してみました。
ひとまず近日中に簡単なアプリをリリースできるようにゴリゴリやっていこうと思います(´∀｀)
