Réagir Native (TypeScript) + Construction de projet Expo avec Docker

Avant

Décrit la procédure de création d'un conteneur Docker pour un projet configuré avec React Native + Expo sur Mac OS X.

Informations de chaque 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

Terminaux qui ont été vérifiés pour fonctionner avec Expo Client

• iPhone(iOS:13.7)

supposition

--docker, docker-compose installé

procédure

1. Créez un compte Expo

Comment créer un compte Expo

2. Installez et configurez l'application cliente Expo.

Comment installer et configurer l'application cliente Expo sur iPhone

3. Créez un environnement Docker

organisation des fichiers

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

Il est nécessaire de définir l'adresse IP, etc. de chaque terminal qui utilise Expo.

• ~~ADB_IP~~
• ~~ Veuillez spécifier l'adresse IP du terminal de vérification. Il semble que vous puissiez spécifier plusieurs éléments séparés par des virgules. ~~

• Il s'est avéré que ce réglage n'est pas nécessaire. (Ajouté le 11/11/2020)

• REACT_NATIVE_PACKAGER_HOSTNAME
• Adresse IP du terminal mobile du conteneur Docker

Exemple

REACT_NATIVE_PACKAGER_HOSTNAME=192.168.0.2

4. Construisez le conteneur Docker

docker-compose build

5. Connectez-vous au conteneur Docker

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

6. Créez un projet expo

expo init .

7. Sélectionnez un modèle de projet pour démarrer la configuration du projet

J'ai choisi [vide (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. Quittez le conteneur lorsque la configuration est terminée

9. Démarrez le conteneur Docker

docker-compose up

10. Lisez le code QR affiché sur le terminal de vérification

11. L'application Expo Client démarre sur le terminal de vérification et l'écran REACT s'affiche.

12. Si vous mettez à jour react_native / App.tsx ...

Mettez à jour le fichier en ajoutant ☺️ à la fin du texte d'affichage écrit dans le fichier react_native / App.tsx.

13. Le contenu mis à jour est automatiquement reflété sur le terminal de vérification.

Le ☺️ à la fin est automatiquement reflété sur l'écran de vérification de l'iPhone par rechargement à chaud.

référence

De la création d'un environnement React Native avec Docker à la vérification de la machine réelle avec Expo Client Créer un environnement React Native + Expo avec WSL Exécuter Expo / React Native sur Docker