機械音痴な情報系

メモ帳.txt

React Nativeの実行環境を整える

インストールするものざっくり一覧

・Node.js
・React Native
Xcode(for iOS)
・Genymotion(for Android)
・Expo


React Nativeをインストール

公式サイト:Getting Started · React Native

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

-gオプションをつけると、グローバルにインストールされる。つまりこのコマンドがどこからでも使えるようになる。
公式ページにはこの後「npm start」と書いてあるが、実行する環境がないので、まず実行環境を整える。
やろうと思えばExpoのアプリをiPhoneAndroidにダウンロードすることも出来るが、実行結果をブラウザで確認出来たりもしてこっちのほうがデバッグは楽。


Xcodeをダウンロード

iOSシュミレータ起動のため。
普通にAppStoreでダウンロードすれば良い。あとは他のWebサイトを参考されたし。


Genymotionをダウンロード

Androidエミュレータ起動のため。

アカウントを作りMac/WindowsのGenymotionをダウンロード
https://www.genymotion.com/download/:title:w500


Applicationフォルダに入れ「Genymotion」をクリック(Genymotion Shellではない丸いアイコンの方)。
実行しようとするとこんなエラーが。Virtual Boxは既に入っているんだけどなぁ…。
f:id:saneeeatsu:20180503200627p:plain:w400
f:id:saneeeatsu:20180503200652p:plain:w400


VirtualBoxを以下から再インストール。
Oracle VM VirtualBox - Downloads | Oracle Technology Network | Oracle

一応Genymotionも1度消して再インストールしてみると無事インストールが出来た!


プラスマークの「Add」ボタンを押してNexus5の最新OSのものをインストール。
Virtual Device NameはデフォルトのままでFinish。
f:id:saneeeatsu:20180503204032p:plain:w700
f:id:saneeeatsu:20180503203549p:plain:w700
選択して「Start」ボタンを押して起動を確認。
f:id:saneeeatsu:20180503204521p:plain:w400


Expoのインストール

公式サイト:https://docs.expo.io/versions/latest/introduction/installation:title:w400

最新のExpoをダウンロード。
Releases · expo/xde · GitHub


コマンドラインにしかないコマンドもあるのでダウンロード。

$ npm install exp --global
$ exp --version
45.0.2


プロジェクを作る方法は以下の3つがある。全てReact Nativeのアプリケーションが作成される。
ただし、1.のプロジェクトはそのままExpoで使うことは出来ない。

1. 「create-react-native-app myproject」コマンドを使用
2. 「exp init myproject」コマンドを使用
3. Expoアプリケーションを起動し、GUIで作成

「Create new project...」を押し、デフォルトの「Bank」を選択したままプロジェクトを作成。
画面Shareボタンを押しQRコードを読み込むと、スマホにExpoのアプリから作成したアプリケーションを操作出来るようになる。

f:id:saneeeatsu:20180503210608p:plain:w700


iOSシミュレーターを起動

右の「Device」アイコンを押すか、⌘+iを押してiOSシミュレーターを起動させる。
するとこんなエラーが出て起動出来ない。



f:id:saneeeatsu:20180503232225p:plain:w700

9:10:22 PM
Error running `xcrun simctl openurl booted exp://localhost:19002`: An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=60):
The operation couldn’t be completed. Operation timed out
Operation timed out
9:10:22 PM
Error installing or running app. Error: Process exited with non-zero code: 60

解決方法としては、iOSシミュレーターの中のExpoアプリを削除して一旦シミュレーターを終了。再度立ち上げると、、、

f:id:saneeeatsu:20180503233127p:plain:w700
一度削除すると自動的にExpoアプリを再ダウンロードするので、今までに無かった「Downloading latest version of Expo」というメッセージが流れている。


f:id:saneeeatsu:20180503232708p:plain:w400
正しく立ち上げることが出来たので、Expoアプリが自動的に立ち上がっていることが確認出来る。

f:id:saneeeatsu:20180503233253p:plain:w400

ひゃっほーーーーー!!!
エラー文でぐぐってなんか色々入れちゃったけどこんな単純な方法でなおるんかい!!!!


Androidシミュレーターを起動

f:id:saneeeatsu:20180504172115p:plain:w700

Couldn't start project on Android: Error running adb: No Android device found. Please connect a device and follow the instructions here to enable USB debugging:
https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select "Use custom Android SDK tools", and point it at your Android SDK directory.

Genymotionを起動しないまましないままでは上のようなエラーが出てしまう。
先程と同じく、Genymotionを立ち上げてデバイスを選択し、「Start」ボタンを押してNexus5Xが立ち上がってから
Expoアプリの右側の「Device」から「Opne on Android」をクリック。


f:id:saneeeatsu:20180504172547p:plain:w700

Couldn't start project on Android: could not install *smartsocket* listener: Address already in use
ADB server didn't ACK
* failed to start daemon *
error: cannot connect to daemon

はい、エラー\(^o^)/


どうやらandroid-sdkのインストールは不要で以下のように、GenymotionのtoolsがPATHに含まれる必要があるのだそう。
参考:Genymotion - Expo Documentation

$ export PATH=/Applications/Genymotion.app/Contents/MacOS/tools:$PATH >> ~/.bash_profile
$ source ~/.bash_profile
$ which adb
/Applications/Genymotion.app/Contents/MacOS/tools/adb

GenymotionのSettingsのAccountタブで一度Sign outしてから再度Log inする。
ExpoをRestartしてもう一度エミュレータを立ち上げる。


Expoを使う上での注意点

Expoは便利だが、使用する上でいくつか注意したい点がある。

・バックグラウンドで位置情報を取得したり、音を鳴らすといったことは出来ない。
Bluetoothを使うことも出来ない(APIについては今後増えていく予定)。
・Expoがプッシュ通知を提供しているが、それ以外を使う場合デタッチをしなくてはいけない。
・同じアプリで開発用、本番用を分けることも出来なくはないが、向いてはいない。

参考:Why not Expo? - Expo Documentation