Versuchen Sie, die Demo-App React Navigation v5 mit Docker + Expo (für Mac) auszuführen.

Vor

Docker + Expo Demo-Anwendung für V5 von React Navigation Das Verfahren zum Ausführen auf einem mobilen Gerät (iOS oder Android) mit wird veröffentlicht.

Wenn Sie sich mit React Navigation beschäftigen, probieren Sie es bitte aus.

Derzeit (30.09.2020) ist die Funktionsprüfung des Android-Terminals noch nicht abgeschlossen.

Wir beschaffen derzeit Androido-Geräte und werden sie zu einem späteren Zeitpunkt überprüfen. Theoretisch sollten Android-Geräte jedoch nach dem gleichen Verfahren arbeiten.

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

Annahme

--Expo Konto registriert

Das Verfahren zum Registrieren eines Kontos wird in einem separaten Artikel "So erstellen Sie ein Expo-Konto" beschrieben.

• PC

--docker, Docker-Compose installiert --git installiert

• mobiler Computer

--Expo Client installiert

Der Installationsvorgang wird in einem anderen Artikel "Installieren und Einrichten der Expo-Client-Anwendung auf dem iPhone" beschrieben.

Verfahren

1. Verwenden Sie das Terminal, um den Projektordner zu erstellen und zu verschieben.

   mkdir react_navigation_demo
   cd react_navigation_demo
   

2. Laden Sie das React-Navigation-Repository mit dem Befehl clone auf github herunter.

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

3. Erstellen Sie jede Konfigurationsdatei für Docker und EXPO.

   touch dockerfile
   touch docker-compose.yml
   touch .env
   

4. Beschreiben Sie die Einstellungen in der Docker-Datei

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

5. Beschreiben Sie die Einstellungen in docker-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"
   ```
   

6. Beschreiben Sie die Einstellungen in .env

Es ist erforderlich, die IP-Adresse jedes Terminals festzulegen, das Expo verwendet. - ADB_IP: Bitte geben Sie die IP-Adresse des mobilen Endgeräts an. Es scheint, dass Sie mehrere durch Kommas getrennte Elemente angeben können. - REACT_NATIVE_PACKAGER_HOSTNAME:

Bitte geben Sie die IP-Adresse des PC-Terminals an, mit dem Docker gestartet wird.

    ```
    ADB_IP=192.168.1.106, 192.168.1.107
    REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.204
    ```

1. Erstellen Sie die Docker-Umgebung

   docker-compose build
   

2. Setup auf dem Docker-Container

3. Stellen Sie eine Verbindung zum Docker-Container her

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

4. Navigieren Sie zum Beispielordner

   ```
   cd example
   ```
   

5. Mit Garn aufstellen

   ```
   yarn
   ```
   

6. Schließen Sie die Verbindung zum Container

   ```
   exit
   ```
   

7. Starten Sie Docker

   docker-compose up
   

8. Lesen Sie den auf dem Terminal angezeigten QR-Code mit Ihrem Mobilgerät


1. Die Demo-App wird auf Ihrem Mobilgerät gestartet