仮想マシンとAndroid実機によるReact Native入門というか触りだけ

少しひねくれた環境だけど、仮想マシンと実機による React Native の動作について

TL;DR

• React Nativeの勉強を始めるための準備
• 手元がWindows環境だったが、気分的にLinuxが使いたかったので仮想マシンで動かした
• 初期動作だけ確認したので、似た様なことをしたい人の参考になれば僥倖

まず環境と下準備について

• Windows10(ホストマシン)
  • 仮想化は VirtualBox を使用
  • メモリは 16G 程度。ゲストには 8G 貸す感じ
• Xubuntu(ゲストマシン)
  • 環境を整えるのに少し時間が掛かるので前もって済ませておく
    
    • Android Studio をインストールしておく
    • npm で react-native-cli をグローバルにインストールしておく
    • ついでに yarn もインストールしておく
  • debian の仮想マシンを用意した時は同じ手順で失敗した

手順

順番はある程度前後しても大丈夫かもしれないが、アプリを動かす前に済ませておくように

1. react-native init [プロジェクト名] でプロジェクトを作成する
   • プロジェクト名でディレクトリが出来るので事前に別途掘らなくても良い
   • ホストマシンとの共有ディレクトリで作業すると不具合が出る可能性アリ。
     共有ディレクトリではないゲストマシンの中で作業するべし
   • 成功するとプロジェクト名のディレクトリの中にごちゃっとファイルが出来る
     
     • ios(XCode用のプロジェクト) や android(Android Studio用のプロジェクト) のディレクトリがあるのを確認

2. Android実機を接続する

   • Virtual Box(仮想マシンのウィンドウ) の右下のUSBアイコンから実機にチェックを入れておく
   • 今回は手持ちの Nexus 6
   • 
     

3. 先ほど出来たプロジェクトの android ディレクトリをAndroid Studioで開く

   • GradleやらBuild Toolやらが古いと怒られた場合は、どんどんアップデートする

4. コマンドラインで adb reverse tcp:8081 tcp:8081 を実行

   • これをしておくと react-native から実機が見えるようになる模様
   • debian の仮想マシンで試した際には reverse が無い といった旨のマニュアルが表示されたが、
     Xubuntu では出なかった
   • 実行しても何も出力されずにサクッとコマンドが終わる
   • 

5. react-native start を実行

   • Android Studioでアプリを起動させる前に実行する
   • この画面はそのまま動かした状態にしておく
   • この後の動作で実機にエラー画面が出るようならもう一度 手順4. を実行してみたりすると動くかも
     • その際、実機のケーブル接続は外さずにそのまま作業する
   • 

6. Android Studio からアプリを起動

   • 上手くいくとアプリが起動した後、画面が見えるハズ

まとめ

• adb reverse tcp:8081 tcp:8081 で実機が見えるようにする
• react-native start を動かした状態にしておく
• Android Studio からアプリを起動