React Nativeことはじめ (Windows環境でAndroidアプリを作る編)

2016/08/20

最近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>

成功するとエミュレータに以下のような画面が表示されるはず。

Hello, World

Hello, World

無事React Native開発の一歩目を踏み出すことでできました。

ちなみに、画面に書いてある通り、キーボードのRを2回押すとリロードされます。 いちいちbuildせずにLive Reloadingでサクサク開発しようぜ、というのがReact Nativeのウリの一つみたいですね。




関連(するかもしれない)記事


おススメ