DockerでReact Native(TypeScript)+Expoのプロジェクト構築
まえおき
React Native+Expoで構成されたプロジェクトのDockerコンテナをMac OS X上に構築する手順を記載しています。
各端末の情報
-
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
ExpoClientで動作検証済みの端末
- iPhone(iOS:13.7)
前提
- docker, docker-compose導入済み
手順
1. Expoアカウントを作成します
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
- iPhone(iOS:13.7)
前提
- docker, docker-compose導入済み
手順
1. Expoアカウントを作成します
1. Expoアカウントを作成します
2. Expoクライアントアプリのインストールとセットアップをおこないます。
iPhoneでExpoクライアントアプリのインストールとセットアップ方法
3. Docker環境を構築します
ファイル構成
root
└── docker
└── react_native
└── dockerfile
└── docker-compose.yml
└── .env
docker/react_native/dockerfile
FROM node:14-alpine
WORKDIR /usr/src/app/
RUN apk update && apk add bash
RUN yarn global add expo-cli
docker-compose.yml
version: "3"
services:
react_native:
build: ./docker/react_native
volumes:
- ./react_native/:/usr/src/app
env_file: .env
command: yarn start
ports:
- "19000:19000"
- "19001:19001"
- "19002:19002"
.env
Expoを利用する各端末のIPなどを設定する必要があります。
-
ADB_IP検証端末のIPアドレスを指定してください。カンマ区切りで複数指定可能なようです。
※この設定は不要であることが判明しました。(2020/11/11追記)
-
REACT_NATIVE_PACKAGER_HOSTNAME
- Dockerコンテナ可動端末のIPアドレス
REACT_NATIVE_PACKAGER_HOSTNAME=192.168.0.2
4. Dockerコンテナをビルドします
docker-compose build
5. Dockerコンテナへ接続します
docker-compose run --rm react_native bash --login
6. expoプロジェクトを作成します
expo init .
7. プロジェクトテンプレートを選択するとプロジェクトのセットアップが開始されます
わたしは[blank (TypeScript)]を選択しました。
? Choose a template: (Use arrow keys)
----- Managed workflow -----
blank a minimal app as clean as an empty canvas
❯ blank (TypeScript) same as blank but with TypeScript configuration
tabs several example screens and tabs using react-navigation
----- Bare workflow -----
minimal bare and minimal, just the essentials to get you started
minimal (TypeScript) same as minimal but with TypeScript configuration
8. セットアップが完了したらコンテナから抜けます
9. Dockerコンテナを起動します
docker-compose up
10. 表示されたQRコードを検証端末上で読み取ります
11. 検証端末でExpo Clientアプリが起動しREACTの画面が表示されます
12. react_native/App.tsxを更新すると・・・
react_native/App.tsxのファイル内に記述された表示テキストの末尾に☺️を追加してファイルを更新します。
13. 更新した内容が検証端末へ自動的に反映されます
ホットリロードによって末尾の☺️がiPhone上の検証画面へ自動的に反映されます。
参考
DockerでReact Native環境作成から、Expo Clientで実機確認するまで
WSLでReact Native + Expo環境を作ろう
DockerでExpo / React Nativeを実行する
Author And Source
この問題について(DockerでReact Native(TypeScript)+Expoのプロジェクト構築), 我々は、より多くの情報をここで見つけました https://qiita.com/hidenoritoki/items/9cd972ba102d12faec0e著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .