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

react-nativeをwindowsのvirtualbox上で開発する

背景

Windows環境でReact Nativeの開発をやってみようと環境構築をしてみた。
普段の開発はローカルのvirtualboxに入ったlinuxでやっているので、
Powershellをつかったwindows環境構築は行わずに、
当初は

  • WSL (Ubuntu)
  • VSCode

を利用した環境を構築した。

しかし、

  • expo start したあとにネットワークが切断される
    • サービスから LxssManagerを再起動すれば一応復帰する
  • hot reloadが効かない
    • windows上のvscodeで、WLSのファイルを直接弄っているからinotify通知が来ない
  • そもそも更新した内容が反映されない
    • androidのアプリ側でキャッシュ削除したり expo start -c などで治るときもある

という3つの不安定さがあった。

対応

まず、linux(centos7利用)上ではexpoの動作は問題ない。
また、VSCodeには remote development機能が存在している。
 → remote developmentの設定はこちら参照
これらを利用した。

ゴール

  • virtualboxのcentos7でexpoは動かす
  • 開発はwindows側のvscodeで実施する

ゴールへの要点

  • virtualboxのポートフォワーディング機能で 19000, 19001 をフォワードする

こちらの記事に設定方法は記載あり。

  • expoを動かす際に、ホストwindows側のIPアドレスを指定する
REACT_NATIVE_PACKAGER_HOSTNAME={your windows IPaddr} expo start

windows IPaddrはipconfigコマンドなどで調べる。

上記2点がつまづきポイント。

あとは同じネットワーク内にスマホとPCが繋がっていれば、
スマホのexpoアプリからチェックできる。
vscodeのremote development機能で、ソースコードをいじったら、
hot reloadも動く。

素晴らしい!

remote debug機能とexpoの REACT_NATIVE_PACKAGER_HOSTNAME を応用すれば、リモートサーバでの開発もできそう。

macと違ってwindowsだと開発にひと手間掛かっちゃう世界が、
WSLの発展で解消されればいいなぁ。

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
ユーザーは見つかりませんでした