React Nativeの実行環境を整える
React Nativeをインストール
公式サイト：Getting Started · React Native
$ npm install -g create-react-native-app $ create-react-native-app AwesomeProject $ cd AwesomeProject
-gオプションをつけると、グローバルにインストールされる。つまりこのコマンドがどこからでも使えるようになる。
公式ページにはこの後「npm start」と書いてあるが、実行する環境がないので、まず実行環境を整える。
やろうと思えばExpoのアプリをiPhone、Androidにダウンロードすることも出来るが、実行結果をブラウザで確認出来たりもしてこっちのほうがデバッグは楽。
Genymotionをダウンロード
アカウントを作りMac/WindowsのGenymotionをダウンロード
https://www.genymotion.com/download/:title:w500
Applicationフォルダに入れ「Genymotion」をクリック(Genymotion Shellではない丸いアイコンの方)。
実行しようとするとこんなエラーが。Virtual Boxは既に入っているんだけどなぁ…。
VirtualBoxを以下から再インストール。
Oracle VM VirtualBox - Downloads | Oracle Technology Network | Oracle
一応Genymotionも1度消して再インストールしてみると無事インストールが出来た！
プラスマークの「Add」ボタンを押してNexus5の最新OSのものをインストール。
Virtual Device NameはデフォルトのままでFinish。
選択して「Start」ボタンを押して起動を確認。
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のアプリから作成したアプリケーションを操作出来るようになる。
iOSシミュレーターを起動
右の「Device」アイコンを押すか、⌘+iを押してiOSシミュレーターを起動させる。
するとこんなエラーが出て起動出来ない。
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アプリを削除して一旦シミュレーターを終了。再度立ち上げると、、、
一度削除すると自動的にExpoアプリを再ダウンロードするので、今までに無かった「Downloading latest version of Expo」というメッセージが流れている。
正しく立ち上げることが出来たので、Expoアプリが自動的に立ち上がっていることが確認出来る。
ひゃっほーーーーー！！！
エラー文でぐぐってなんか色々入れちゃったけどこんな単純な方法でなおるんかい！！！！
Androidシミュレーターを起動
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」をクリック。
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してもう一度エミュレータを立ち上げる。
