WindowsにReact Native開発環境をインストール

はじめに

JavaScriptとReactを使ってモバイルアプリを開発できるReact Nativeの開発環境をWindowsに一からインストールします。WindowsなのでAndroidアプリの開発環境です。インストール手順はReact Nativeの公式にあるのでそれに従えばいいんですが、いくつか詰まったので通しで方法を残しておきます。
インストールするのはNode.js、React Native、それにAndroid Studioです。（記事現在のReact Nativeのバージョンは0.39）

Node

Node.jsとPython2をインストールします。パッケージ管理ソフトのChocolateyを経由してインストールするのが推奨ということなので手順に従います。

Chocolatey

公式のインストール手順。メニューからPowerShellを管理者権限で起動。PowerShellのバージョンを調べて、

powershell

$PSVersionTable

3以上だったので三番目のコードを使用します。が、その前に実行ポリシーをRemoteSignedまで上げる必要があります。
現在の実行ポリシーはこれで表示。

powershell

Get-ExecutionPolicy

デフォルトはRestrictedだったので上げます。

powershell

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

これでインストール。

powershell

iwr https://chocolatey.org/install.ps1 -UseBasicParsing | iex

実行ポリシーを戻したいときはこれで。

powershell

Set-ExecutionPolicy -ExecutionPolicy Restricted

Node.jsとpython2

Chocolateyでインストールします。コマンドラインなりPowerShellなりで次のコマンドを一行ずつ実行。

cmd

choco install nodejs.install
choco install python2

The React Native CLI

Node.jsに付いてくるパッケージ管理ソフトnpmで、React Nativeのコマンドラインインタフェースをインストールします。コマインドラインで次を実行。

cmd

npm install -g react-native-cli

Android開発環境

Androidの開発環境をインストールします。

1. Android Studioのインストール

Android Studioの公式からダウンロードしてきてインストーラーに従ってインストール。Android SDKとAVD(Android Virtual Device)にチェックが入っているのを確認。

JDKも忘れずに

React Nativeの方には書いてありませんがコンパイルを通すためにJavaのDevelopment Kitも必要です。公式からJDK8をインストール。

2. AVDとHAXMのインストール

Android Studioの初回起動時にいろいろ出てくるので適当に(I do not have...を選んでOkしたり)。Customを選んで次にチェックが入っていればOKです。そもそもチェック外せなかったりinstalledとか出ていたりするかもしれません。

• Android SDK
• Android SDK Platform
• Performance (Intel HAXM)
• Android Virtual Device

HAXMについて何やら出てくるので画面に従って入れます。
この画面、初回しか出ません。二回目以降でHAXM入れたいならここから。

3. Android 6.0 (Marshmallow) SDKのインストール

React Nativeに必要なSDKはバージョンが決まっていてAndroid 6.0 (Marshmallow)です。改めてこれをインストールします。
（ちなみにSDKは6.0ですがAndroidの動作する最低バージョンは4.1です。readme参照）

1. Android Studioを起動してWelcome画面の右下、ConfigureからSDK Managerを開きます。
2. 上のSDK Platformsタブが選ばれているのを確認
3. Android 6.0 (Marshmallow)をチェック
4. 右下のShow Package Detailをチェック
5. Android 6.0 (Marshmallow)から次の項目を追加でチェック(全部で6項目にチェックが入る)
   • Google APIs
   • Intel x86 Atom System Image
   • Intel x86 Atom_64 System Image
   • Google APIs Intel x86 Atom_64 System Image
6. 上のSDK Toolsタブを選択
7. 右下のShow Package Detailをチェック
8. Android SDK Build-Toolsの23.0.1にチェック
9. 右下のApply

4. 環境変数にANDROID_HOMEを設定

React Nativeに必要なパスを通します。コントロールパネルのシステムの詳細設定->環境変数->ユーザー環境変数にANDROID_HOMEを新規追加します。
パスは3.の画面の上の方のテキストボックスに入っているのと同じものです。大体次の通り。

C:\Users\(ユーザー名)\AppData\Local\Android\sdk

Android Virtual Deviceのスタート

Android Studio内にあるエミュレータを起動します。ここは他の詳しい記事に任せます。

React Nativeアプリのインストールテスト

プロジェクトを作りたい場所でコマンドプロンプトを開きます。作成するプロジェクト名をAwesomeProjectとして、

cmd

react-native init AwesomeProject
cd AwesomeProject

エミュレータが起動しているのを確認して次のコマンド。

cmd

react-native run-android

ちょこちょこ文字化けしますが気にせずに、エミュレータ内にアプリが起動したら完了です。