Windows 環境の expo-cli で react native をやろうとして環境構築で詰まった箇所

環境構築で丸一日弱使ってしまったので、詰まった箇所を雑多ですが備忘として記載しておきます。
（実行日：2019年04月21日）

やったこと

・node.js のインストール
・yarn のインストール　→　結局使わず
・expo-cli のインストール
・WSL のインストール
・Genymotion と virtualbox のインストール
・VSCode のインストール（JSコーディング用）
（Android Studio は既に昔にインストール済み）

エラー１：yarn で expo-cli がインストールできない

yarn add global expo-cli

で、インストールを実行すると下記のエラーが出ました。

info There appears to be trouble with your network connection. Retrying...

yarn でこのエラーが出た場合は、 --network-timeout 1000000 をつければいいという記事もあったのですが、これでは解決せず、インストール対象のうち2つがインストールができずでした。

結局これは原因が分からず… npm で下記コマンドでインストールしました。

npm install -g expo-cli

これも何か Linux 用の何かが足りないというようなエラーが出たのですが、その日は寝て次の日やり直したらインストールできてしまったので、エラーをメモってなく。
WSLを使えるようにしたのが関係してたかもしれませんが、怪しいまま次に進むことに…。

エラー２：QRコードを実機で読み取っても正しく表示できない

無事 expo-cli でプロジェクトを作成し、起動できるようになったものの、Android アプリの実機にインストールした expo でQRコードを読み込んでも「something went wrong」と表示されてしまうエラーが出ました。

これが出る原因として他記事で多くあげられていたのは、下記のような理由でした。
・スマホの Wi-Fi が同じネットワーク内にない場合
・ファイアウォールでブロックされている場合

が、自分の場合はどちらでもうまくいかず。
原因はexpo の画面の CONNECTION に「Tunnel」「LAN」「Local」と3つの選択肢があるのですが、「LAN」を読み込んでいたことでした。
Tunnel を選択したら、表示されるようになりました。
LAN の IP が virtualbox のゲストOSのIPで、スマホからそのIPにアクセスできなかったのが原因だったため、そこをアクセスできるようにすれば別の方法で解決も可能かもしれません。

エラー３：Genymotion で端末が起動できない

virtualbox の端末が起動できなかったのですが、これはまんま下記の記事の通りです。
https://ja.stackoverflow.com/questions/47005/virtualbox%E4%B8%8A%E3%81%A7%E4%BB%AE%E6%83%B3%E3%83%9E%E3%82%B7%E3%83%B3%E3%82%92%E8%B5%B7%E5%8B%95%E3%81%97%E3%82%88%E3%81%86%E3%81%A8%E3%81%99%E3%82%8B%E3%81%A8%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AB%E3%81%AA%E3%82%8B

ネットバンキング用に入っている Rapport のせいでした。いったんアンインストールしたらうまく動きました。

エラー４：Genymotion で端末起動後、expo がエミュレータで動かない

次のエラーは、ブラウザ上で「Run on Android device/emulator」をクリックした際に出たエラーです。

Couldn't start project on Android: could not install *smartsocket* listener: cannot bind to 127.0.0.1:5037: Only one usage of each socket address (protocol/network address/port) is normally permitted. (10048) could not read ok from ADB Server * failed to start daemon * error: cannot connect to daemon

Genymotion で Device は起動済みの状態でした。

解決方法は環境変数の PATH に「C:\Program Files\Genymobile\Genymotion\tools」を追加したら直りました。

最初は、

Genymotion の Settings -> ADB で 「Use Genymotion Android Tools」ではなく、「Use custom Android SDK tools」を選択して、Android Studio の SDK のパスを設定するべき

というような記事を見かけたので、そちらでいろいろ試していたやっていたのですがうまくいかず、最終的に「Use Genymotion Android Tools」の方の設定で、上記のように環境変数を追加したら直りました。

完了

以上で、自分の Android 実機と、Genymotion の端末両方で確認できるところまでできました。