Reagieren Sie mit Docker auf Native (TypeScript) + Expo-Projektkonstruktion

Vor

Beschreibt das Verfahren zum Erstellen eines Docker-Containers für ein Projekt, das mit React Native + Expo unter Mac OS X konfiguriert wurde.

Informationen zu jedem Terminal

• 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

Mit ExpoClient verifizierte Terminals

• iPhone(iOS:13.7)

Annahme

--docker, Docker-Compose installiert

Verfahren

1. Erstellen Sie ein Expo-Konto

So erstellen Sie ein Expo-Konto

2. Installieren und richten Sie die Expo-Client-App ein.

Installieren und Einrichten der Expo-Client-App auf dem iPhone

3. Erstellen Sie eine Docker-Umgebung

Dateiorganisation

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

Es ist notwendig, die IP usw. jedes Terminals festzulegen, das Expo verwendet.

• ~~ADB_IP~~
• ~~ Bitte geben Sie die IP-Adresse des Verifikationsterminals an. Es scheint, dass Sie mehrere durch Kommas getrennte Elemente angeben können. ~~

• Es stellte sich heraus, dass diese Einstellung nicht erforderlich ist. (Hinzugefügt am 11.11.2020)

• REACT_NATIVE_PACKAGER_HOSTNAME
• IP-Adresse des beweglichen Terminals des Docker-Containers

Beispiel

REACT_NATIVE_PACKAGER_HOSTNAME=192.168.0.2

4. Erstellen Sie den Docker-Container

docker-compose build

5. Stellen Sie eine Verbindung zum Docker-Container her

docker-compose run --rm react_native bash --login

6. Erstellen Sie ein Ausstellungsprojekt

expo init .

7. Wählen Sie eine Projektvorlage aus, um mit dem Einrichten des Projekts zu beginnen

Ich habe [leer (TypeScript)] gewählt.

? 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. Verlassen Sie den Container, wenn die Einrichtung abgeschlossen ist

9. Starten Sie den Docker-Container

docker-compose up

10. Lesen Sie den angezeigten QR-Code auf dem Verifikationsterminal

11. Die Expo Client App startet am Verifikationsterminal und der REACT-Bildschirm wird angezeigt.

12. Wenn Sie react_native / App.tsx aktualisieren ...

Aktualisieren Sie die Datei, indem Sie ☺️ am Ende des Anzeigetextes in der Datei react_native / App.tsx einfügen.

13. Der aktualisierte Inhalt wird automatisch auf dem Verifikationsterminal angezeigt.

Das ☺️ am Ende wird beim Hot-Reload automatisch auf dem Überprüfungsbildschirm des iPhone angezeigt.

Referenz

Von der Erstellung einer React Native-Umgebung mit Docker bis zur Überprüfung des tatsächlichen Computers mit Expo Client Erstellen Sie eine React Native + Expo-Umgebung mit WSL Expo ausführen / Native auf Docker reagieren