Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@r-ytakada

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

More than 1 year has passed since last update.

背景

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の発展で解消されればいいなぁ。

0
Help us understand the problem. What is going on with this article?
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
radiko
スマホやPC、スマートスピーカーでラジオ放送が聴けるネットサービス『radiko』の企画・開発・運営を手がけています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?