Webアプリ開発環境作ってみた(5) - React Native(5)

[前回](https://qiita.com/KororonX/items/b3292d96a1899a4468e2)ようやくAndroid Studioの環境設定ができた。今回は仮想デバイスの作成について記載する。

### 先に進めない
[書籍][ReactNativeBook]では、仮想デバイスの作成は以下の手順で行うとなっている。
1. ToolメニューからAVD Managerを開く
1. 「Create Virtual Device」を押す

しかし、再びメニューが違っており、AVD Managerはない。Toolメニューを見ると、「Device Manager」というのがある。仮想デバイスだしこれかな、と。そしたらIDE右上にDevice Managerが表示され、「Create Virtual Device」と見えた。

![47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/8708e664-0326-5b2d-e15d-82d946c6aead.png)
<br>
迷わずクリック。[書籍][ReactNativeBook]に記載のとおり、Select Hardware(Choose a device definition)ウィンドウが開く。対象デバイスも[書籍][ReactNativeBook]のとおりにPhone - Pixel 2を選択し「Next」。

![48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/86ca1198-9d43-051f-d5f5-966dc3e2b31b.png)
<br>
続いてSystem Image(Select a system image)ウィンドウが。[書籍][ReactNativeBook]ではx86 ImageタブからTargetがAndroid 9.0 (Google APIs)と記載されているものを選択し、「Next」を押すとなっている。しかし。どのタブのどの候補を選択しても、「Next」が使用可能にならない。またなんか<font color="red">赤い！</font>がまたついている。

![49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/096a43f6-7630-e218-4052-0b99f24a5c89.png)
<br>
メッセージを見ると、「A system image must be selected to continue.」って書いてある。でもそもそも一覧のどれをクリックしても反応していない様子。Select a system imageって表示がある一覧なのに選択できなくて、次に行くにはシステムイメージ選択してねってどういうこと？猛烈に混乱。本をひっくり返してみても、こんな事象は書いてない。どうしたらいい？

### システムイメージインストールしてなかった
解決策を見いだせないまま、しばらくあちこちを見てみる。そのうちに少し落ち着いてきたのか、よく見ると一覧のRelease Nameの各名称の横に下向きの矢印が。なんか触れそうな感じ。これをクリックするとなんか変わるのか？とやってみることに。

![50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/ded51f89-a6b0-0d13-2e05-e7d474f330a2.png)
<br>

そしたらLicense Argeementが表示される。なんかまだダウンロードされるものがあるのか？とりあえず「Accept」を選択しダウンロードしてみることに。

![51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/a9f10c5c-2e44-a004-48bd-c1bdca34e08c.png)
![52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/f0d398f4-5164-f2c1-81e8-21f2d94c7b97.png)
<br>
インストール対象は Google Play Intel x86_64 Atom System Image となっている。システムイメージ。なんかこの名前を見たことがあるような。。。ようやく思い出した。[書籍][ReactNativeBook]で必要なツールとして挙げられていたものの一つが以下のものだった。
* Google APIs Intel x86 Atome_64 System Image

ちょっと誤植があるようだけど、API33, 34が両方インストールされたことで、その違いを確認している間に肝腎なものを忘れてしまっていた。まあシステムイメージそのものがなんだかよくわかっていないせいもあるかもしれないけど。気がついてしまえばなんてことない話だったが、手探りしている間はどこが間違っているのかそれ自体がわからないので、ほんとにむずかしい。

サイズが1.4Gと大きいので、しばらく待ってインストール完了。

![53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/340f02a4-a2f5-5b91-7c41-bb5631450c60.png)
<br>
System Imageウィンドウに戻り、対象のシステムイメージを選択すると無事「Next」が使用可能になった。クリック。

![54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/51669916-a81e-4f7d-4090-c110464952ae.png)
<br>
Android Virtual Device(AVD)(Verify Configuration)ウィンドウが表示される。既定の内容のまま「Finish」。

![55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/06928257-d231-c5ad-d279-d05959827c6b.png)
<br>
仮想デバイスの生成が開始され、Device Managerに1件表示された。

![56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/06a5314d-a05b-d727-3113-b8be153ea8b3.png)
![57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/5cdd3cd6-2717-1fb9-1dfd-b21d0bb7ff86.png)
<br>
一覧のActionsに配置されている三角の開始マークをクリックしてみる。
![58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/06260fcc-7a24-2191-7907-0332ecf390f8.png)
<br>
そしたらRunning Devicesにスマホイメージが出てきた！ちょっと感動。
![59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/f0f7d712-0f57-9974-43c4-512b2383f0b8.png)
<br>
でも、しばらくするとエラーメッセージが。
![60.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3622594/efb71770-5ffd-277d-be4e-bf00a82b795d.png)
<br>
うーん。うまく動いていないのかな。黒塗り四角の停止マークをクリックしても、表示はそのまま残っていたりして。あとは実際に動かしてみて確認するしかないかなと、仮想デバイスについてはいったんここで終了することに。

ここまでくるともう少しかな。いよいよReact Nativeそのものをセットアップしアプリケーション作成に向かうことに。






[ReactNativeBook]: https://www.amazon.co.jp/React-Native-JavaScript%E3%81%AB%E3%82%88%E3%82%8BiOS-Android%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA%E3%81%AE%E5%AE%9F%E8%B7%B5-%E9%AB%99%E6%9C%A8/dp/4297113910/