Help us understand the problem. What is going on with this article?

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

環境構築で丸一日弱使ってしまったので、詰まった箇所を雑多ですが備忘として記載しておきます。

やったこと

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

エラー1: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 instal -g expo-cli

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

エラー2: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にアクセスできなかったのが原因だったため、そこをアクセスできるようにすれば別の方法で解決も可能かもしれません。

エラー3: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 のせいでした。いったんアンインストールしたらうまく動きました。

エラー4: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 の端末両方で確認できるところまでできました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした