未分類

React Nativeの環境構築

iOS,Androidのアプリ制作を行うためにReact Nativeの環境構築を行います。
※ 初心者の方のために予め断っておくと、このページに限りませんが行頭の$はターミナルでのコマンド実行を表しており、行頭の$自体は実際には入力しません。
参考： Getting Started "Building Projects with Native Code"
まずはnode.jsが使える必要があるので

$ node -v

でバージョンが表示されないかたはこちら。
nodeは無事バージョンが表示されたらwatchmanをインストールします。

$ brew install watchman

お次はJDK
Java SE Development Kit 8が必要です。
公式には8かそれより新しいもの、とあります...が、10とかいれると動きません。8を使いましょう。
8のDLはこちら
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Acceptして自分の環境にあったインストーラをDLしましょう。
もし新しいバージョンがすでにインストールされているなどで切り替える必要がある場合はこちら。

$ java -version
java version "1.8.0_201"

というように1.8.xxxとなっていればOKです。
さて、この次のステップですが大きく分けて2つやり方があります。
Getting Started "Quick Start" にある

$ npm install -g create-react-native-app

($ create-react-native-app xxxxxx)と
Getting Started "Building Projects with Native Code" にある

$ npm install -g react-native-cli

($ react-native init xxxxxx) です
()内は対応するプロジェクト生成コマンド
※ Vue Nativeの環境構築のためにこの記事に来た方は上記２つのコマンド両方を実行して準備完了です。
Building Projects with Native Codeの説明を見る限り、要約すると

様々なパッケージが最初から含まれているcreate-react-native-app により開発を進めていけばよいが、create-react-native-app ではネイティブのコードが使えないのでもし使う必要がでたらejectしてその後はreact-native-cliにより開発を続けることができる。

ということ。
最初からreact-native-cliで開発することもできるので、ネイティブコードでもともとアプリ開発をしていた場合はネイティブのライブラリが使えるのでその方が楽でしょう。ちなみに、ネイティブコードを使うreact-native-cliは当然ながらwindowsでiOSアプリの開発ができないので、それをしたければcreate-react-native-app一択になります。
しかしながら、create-react-native-appで動作確認につかうExpoというサードパーティのアプリが微妙だったのと、どちらにせよ一度ejectするとreact-native-cliで開発を進めることになるので2つやり方を覚えるのも面倒なのでここでは始めから
＄ npm install -g react-native-cli
で進めます。

上記コマンドを実行してインストールが完了したらプロジェクトを作成するディレクトリへ移動し

$ react-native init xxxxxxxx

でプロジェクトが作成されます。（xxxxxxxxは任意のプロジェクト名）

iOSシミュレーション

iosのシミュレーションを立ち上げるにはXcodeを使います。
Xcodeは最新版にアップデートしておきましょう。

$ cd xxxxxxxx
$ react-native run-ios

"Command failed: xcrun instruments -s" というようなエラーが出る場合にはx-codeを立ち上げて
Xcode > Preferences > Locations
にて表示されるところで
Command Line Toolsが選択されているかを確認してください。
白くなっている場合はクリックしてXcodeを選択して有効化します。

シミュレータが立ち上がり、しばらくするとアプリケーションが立ち上がります。
（初回は結構時間がかかります）
終了するときはメニューのSimulatorからQuit Simulatorを選べば終了できます。
なお、シミュレータ起動時にバックで立ち上がるターミナルは閉じてはいけません。

Androidシミュレーション

Androidのシミュレーションを立ち上げるには少々手順が必要です。
https://developer.android.com/studio/
からインストーラをダウンロードします。
起動して進めていき、インストール方法はCustomを選び

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

の全てにチェックを入れましょう。
起動して立ち上がったら右下のconfigからSDK Managerを開きます。
右下の"Show package detail"を押し、"Android 6.0 (Marshmallow)"の中の

  • Google APIs
  • Android SDK Platform 23
  • Sources for Android 23
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image

にチェックがついた状態でApplyを押してAcceptしてインストールを進めます。
次は"SDK Tools" タブで先程と同じく右下の"Show package detail"を押し、
"Android SDK Build-Tools"の23.0.1を選択、Applyを押してインストールします。
bash profileに設定を追加します。
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
直接さわってもいいですし、下記コマンドをそれぞれ打ち込むことでも追加できます。

$ echo 'export ANDROID_HOME=$HOME/Library/Android/sdk' >> ~/.bash_profile
$ echo 'export PATH=$PATH:$ANDROID_HOME/tools' >> ~/.bash_profile
$ echo 'export PATH=$PATH:$ANDROID_HOME/tools/bin' >> ~/.bash_profile
$ echo 'export PATH=$PATH:$ANDROID_HOME/platform-tools' >> ~/.bash_profile

通常は上記で設定可能ですが、シェルを切り替えている場合はシェルに対応した設定を行ってください。

$ source ~/.bash_profile

を実行してシェルに設定を反映します。

$ echo $PATH

を入力して追加したものが表示されることを確認しましょう。
さてこれでほぼ準備はできているのですがあとは表示する端末の用意です。
実機を使うのであればUSBで接続しましょう。
以下は仮想端末を使う手順を記載します。
https://developer.android.com/studio/run/managing-avds
Android Studioを開き、適当なプロジェクトを開きます。作成したプロジェクトを開いて新規でもOKです。
まずはAVD Managerを開きます。
右上のAVD ManagerアイコンAVD Managerから起動できます。
ひとつも端末の設定がなかったり、使いたい設定がなければ"Create Virtual Device"から作成します。
公式ではphoneを選んだ後に"x86 Images"タブの"Marshmallow API Level 23, x86_64 ABI image"を探せとかいてあるんですがまたまたバージョンの問題か全く形式が違います。
鉛筆マークから編集画面に移動し、端末選択の下のOS選択部のChange..ボタンを押します。
するとOSがズラッと表示されるので"Marshmallow 23 x86_64 Android 6.0 (Google APIs)"を選択しましょう。
設定ができたら今度は再生ボタンを押しシミュレータを起動します。
シミュレータを開いたまま、ターミナルにて該当プロジェクトのディレクトリへ移動し

$ react-native run-android

を実行するとシミュレータが動作します。

-未分類