React Navigation v5のデモアプリをDocker+Expoを使って動かしてみる（For Mac）

まえおき

React NavigationのV5用のデモ用アプリケーションをDocker+Expoを使ってモバイル端末(iOS or Android)上で動かすための手順を掲載しています。

React Navigationについて勉強中であれば是非お試しください。

現時点（2020/09/30）でAndroid端末の動作確認が完了していません。

現在Androido端末を調達中で検証は後日実施する予定ですが、理論上は同じ手順でAndroid端末も動作するはずです。

各端末情報

• PC

  • Mac OS Catalina Ver.10.15.6
  • docker version 19.03.12, build 48a66213fe
  • docker-compose version 1.26.2, build eefe0d31

• iPhone

  • iPhone XR
  • iOS:13.7

前提

• Expoアカウントが登録済

  アカウントの登録手順は別記事「Expoアカウントの作成方法」に掲載しています。

• PC

  • docker, docker-composeインストール済
  • gitインストール済

• モバイル端末

  • Expo Clientがインストール済

    インストールの手順は別記事「iPhoneでExpoクライアントアプリのインストールとセットアップ方法」に掲載しています。

手順

1. ターミナルを使ってプロジェクトフォルダを作成し移動します。

   mkdir react_navigation_demo
   cd react_navigation_demo
   

2. github上のreact-navigationのリポジトリをcloneコマンドでダウンロードします。

   git clone https://github.com/react-navigation/react-navigation.git
   

3. DockerとEXPO用の各設定ファイルを作成します。

   touch dockerfile
   touch docker-compose.yml
   touch .env
   

   1. dockerfileに設定内容を記載します

      FROM node:14-alpine
      
      WORKDIR /usr/src/app/
      
      RUN apk update && apk add bash
      

   2. doker-compose.ymlに設定内容を記載します

      version: "3"
      services:
      react-navigation:
        build: ./
        volumes:
          - ./react-navigation/:/usr/src/app
        env_file: .env
        command: bash -c "cd example && yarn start"
        ports:
          - "19000:19000"
          - "19001:19001"
          - "19002:19002"
      

   3. .envに設定内容を記載します

      Expoを利用する各端末のIPアドレスを設定する必要があります。

      • ADB_IP

        • 検証端末のIPアドレスを指定してください。カンマ区切りで複数指定可能なようです。

        ※この設定は不要であることが判明しました。（2020/11/11追記）

      • REACT_NATIVE_PACKAGER_HOSTNAME:

        Dockerを起動するPC端末のIPアドレスを指定してください。

      REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.204
      

4. Docker環境をビルドします

   docker-compose build
   

5. Dockerコンテナ上でのセットアップ

   1. Dockerコンテナへ接続します

      docker-compose run --rm react-navigation bash --login
      

   2. exampleフォルダへ移動します

      cd example
      

   3. yarnでセットアップします

      yarn
      

   4. コンテナとの接続を終了します

      exit
      

6. Dockerを起動します

   docker-compose up
   

7. ターミナル上に表示されたQRコードをモバイル端末で読み込みます

   

8. モバイル端末上にデモアプリが起動します