WSL 環境で React Native での開発を試してみます。
React Native は (現時点 2018/01 では) npm 5.x を support してないらしいので、npm 4.x 系を入れます。いろいろ考えるのはめんどうなため手っ取り早く以下のようにしました。
npm install -g npm@4.6.1
試すのは、React Native 公式の Getting Started https://facebook.github.io/react-native/docs/getting-started.html です。書かれているまま進めてみます。
npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject
npm start
起動時に以下のような警告が出ますが気にしないことにします。
Warning: Unable to run `sysctl fs.inotify.max_user_watches`. If you encounter issues, please refer to https://git.io/v5vcn
Expo app で使う URL が表示されますが、iOS/Android 端末とおなじネットワークに属する必要があり、ご利用のネットワーク環境によっては別のネットワークが検出されてしまうかもしれません。サーバーのアドレスを指定するには以下のようにします。PC (WSL) 側のアドレスは ifconfig コマンドなどで、端末側のアドレスは設定などで確認します。
export REACT_NATIVE_PACKAGER_HOSTNAME=192.168.56.1
また、実端末など PC の外からこのアドレスへ通信する場合は、受付のために Windows Defender で許可ルールを追加しておきます。Windows メニューで "Windows Defender Firewall with Advanced Security" で検索し、開いたアプリケーションを使って "Inbound Rule" を追加します。
(ここに少し絵つきで説明があります https://github.com/expo/expo/issues/438)
こちら https://expo.io/tools から Expo app を download し、端末にインストールします。たとえば Android なら、端末を USB などで接続して以下のようにします。(adb はAndroid SDK に含まれています)
adb install Exponent-2.3.0.apk
以下のようにして development server を起動します。
npm start
AA で QR コードが表示されるので、端末で Expo app を起動し、QR コードを読み取って起動します。Expo app はコピーした URL 文字列からも起動ができますが、なぜか URL 直接入力はできないようです。できたほうが便利ですよね。
この状態で開発するアプリのテストが可能で、先程作成した AwesomeProject 直下にある App.js の内容を書き換えて保存することで変更が自動的に反映されるようになります。
WSL 環境での罠
わたしの手元では、Windows からのファイル変更が自動反映されませんでした。たとえば Windows 版 VSCode で js を快適に編集して保存し結果を確認するということができません。WSL の Linux 側で変更を保存すると自動反映されるので、惜しいところです。上であった inotify の警告が関係しているような気もしますがわかりません。また、Angular でおなじことをすると自動反映したと思うのですがちゃんと確認していません。