React Nativeことはじめ (Windows環境でAndroidアプリを作る編)
最近React.jsを触っているので、ついでにReact Nativeにも手を出してみることにしました。 初めてなので今回は環境構築からHello, worldまで。開発環境はWindows10、開発ターゲットはAndroidアプリです。iOSも試したいけどMac持ってないんですよね...
基本的には公式サイトのGetting Startedを参考にすれば大丈夫ですが、いくつかハマりどころもありました。
まずは事前準備。以下のものをインストールしておきます。
- Android SDK
- Build Toolsの23.0.1が必要
- Android Studio: 2.1.3
- Node.js: 6.2.1
Node.jsは以前にこの記事で書いた通り、nodistを使ってインストールするのがおススメです。
Build Toolsのバージョン縛りは地味なハマりポイント。雛形を作った後にbuild.gradle内の設定を手で書き換えれば他のバージョンでも動く気がしますが、まずは動かすこと優先で23.0.1を素直にインストールしました。
一通りインストールしたら環境変数ANDROID_HOMEを指定しておきます。これも忘れがち。 設定の確認はsetコマンドで。
E:\>set ANDROID_HOME
ANDROID_HOME=D:\Android\android-sdk
ここまで来たらあとは公式サイトの通り。以下、E:\ReactNativeが作業ディレクトリです。
手始めにコマンドラインツールをインストール。グローバルインストール推奨のようなので-gオプション付きでインストールしておきます。
E:\ReactNative>npm install -g react-native-cli
【中略】
E:\ReactNative>
これでreact-nativeコマンドが使えるようになりました。 initで雛型作成。ReactNativeEtudeというプロジェクト名で雛型を作ります。
E:\ReactNative>react-native init ReactNativeEtude
This will walk you through creating a new React Native project in E:\ReactNative\ReactNativeEtude
Installing react-native package from npm...
【中略】
E:\ReactNative>
雛型を動かしてみましょう。と、その前にAndroidのemulatorを起動しておきます。実機をつないでもOK。
run-androidコマンドを実行するとbuildが走ってapkがインストールされます。初回は結構時間がかかるので気長に待ちましょう。
E:\ReactNative>cd ReactNativeEtude
E:\ReactNative\ReactNativeEtude>react-native run-android
【中略】
Starting: Intent { cmp=com.reactnativeetude/.MainActivity }
E:\ReactNative\ReactNativeEtude>
成功するとエミュレータに以下のような画面が表示されるはず。
無事React Native開発の一歩目を踏み出すことでできました。
ちなみに、画面に書いてある通り、キーボードのRを2回押すとリロードされます。 いちいちbuildせずにLive Reloadingでサクサク開発しようぜ、というのがReact Nativeのウリの一つみたいですね。
関連(するかもしれない)記事
おススメ