从使用Docker创建React Native环境到使用Expo Client检查实际机器


React Native，使您可以为iOS和Android创建应用程序。
最近，我个人对此感兴趣，因此我尝试创建一个Docker环境，但是我没有看到很多文章，因此我将编写构建过程。

*新增2019/9/21
正如我将在后面解释的那样，当我这样做时，热重装将无法正常运行，或者在仿真器环境中无法正常运行...
这可能对您不利，但是使用Docker构建可能没有太大好处。

2019/9/26后记
我用WSL重新创建了环境。
→让我们用WSL

创建一个React Native Expo环境

假设

  • 安装了码头工人
  • 安装了docker-compose

环境施工程序

提前准备

在使用React Native进行开发时，可以方便地使用Expo作为开发支持服务。
我们提供的SDK使创建，构建和部署React Native项目以及实现UI组件变得容易。
构建环境相对容易，并且您可以通过使用QR码发布应用程序的内容来轻松检查实际机器。

有一个限制，即您只能使用Expo支持的库和模块(可以使用，但不能使用Expo函数)，但是要立即开发React Native，我认为这对人们来说是一个有用的工具。

创建一个Expo帐户

expo.png

  • 转到expo.io并选择"创建帐户"。

  • 输入您的电子邮件，用户名和密码，然后选择"创建您的帐户"。

    • 安装Expo Client

    expo-client.png

  • 从iOS / Android设备上的App Store / Google Play安装。
  • 使用创建的Expo帐户登录。

    • Docker环境创建

    就我而言，此时的目录结构如下。

    1
    2
    3
    4
    5
    6
    ReactNative(プロジェクトフォルダ)
    ├─ docker
    |　├─ node
    |　　　├─ dockerfile
    ├─ .env
    ├─ docker-compose.yml

    Dockerfile

    1
    2
    3
    4
    5
    6
    7
    FROM "node:10-alpine"

    WORKDIR /usr/src/app/

    RUN apk update && apk add bash

    RUN yarn global add expo-cli

    之后，expo start将需要bash，但是由于bash不包含在您使用的映像的高山linux中，因此已安装它。
    从一开始也可以使用包含bash的图像。

    似乎曾经有create-react-native-app作为创建React Native项目的CLI工具，但似乎它已集成到expo-cli中，因此请安装它。

    .env

    1
    REACT_NATIVE_PACKAGER_HOSTNAME=(自分のローカルPCのIPアドレス)

    定义要传递给容器的环境变量。
    REACT_NATIVE_PACKAGER_HOSTNAME将是稍后在$ expo start上托管Expo应用程序的IP。默认情况下，使用容器的IP，因此您无法从Expo Client连接，因此请指定本地PC本身的IP。
    您可以在Windows上使用$ ipconfig在Mac上使用$ ifconfig来检查IP。

    docker-compose.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    version: "3"
    services:
      node:
        build: ./docker/node
        volumes:
          - ./app/:/usr/src/app
        tty: true
        stdin_open: true
        environment:
          - REACT_NATIVE_PACKAGER_HOSTNAME=${REACT_NATIVE_PACKAGER_HOSTNAME}
        ports:
          - "19000:19000"
          - "19001:19001"
          - "19002:19002"

    tty，stdin_open- $ docker-compose up设置为保持容器运行。
    环境-设置.env文件中定义的环境变量。
    端口-设置3个端口以与Expo一起使用。

    开始

    在后台启动

    1
    $ docker-compose up -d

    RUN yarn global add expo-cli中会出现很多警告，但我认为如果没有错误，它将起作用。 (对不起，我没有正确看到WARN的内容)

    世博项目

    创建了

    1
    2
    3
    4
    5
    # コンテナの中に入る
    $ docker-compose exec node bash

    # expoプロジェクト作成
    $ expo init .

    可以选择模板。目前，选择空白，然后按Enter。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    bash-4.4# expo init .
    ? 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

    将要求您提供Expo项目的显示名称。输入并按Enter。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    ? Choose a template: expo-template-blank
    ? Please enter a few initial configuration values.
      Read more: https://docs.expo.io/versions/latest/workflow/configuration/ ? 0% completed
     {
       "expo": {
         "name": "<The name of your app visible on the home screen>",
         "slug": "app"
       }
     }

    系统将询问您是否要使用

    Yarn安装软件包。用Y安装。 (选择n以使用npm安装软件包)

    1
    ? Yarn v1.17.3 found. Use Yarn to install dependencies? (Y/n)

    现在，您已经为Expo项目创建了一个模板。

    开始

    使用以下其中一项作为Expo服务器启动。

    1
    2
    3
    $ expo start

    $ yarn start

    稍后，将显示QR码。
    expo-start.png

    使用Expo Client

    检查实际机器

    当您从iOS / Android设备读取显示的QR码时，Expo Client将启动并开始构建。
    请注意，将成为Expo服务器的PC和iOS / Android设备必须连接到同一网络。
    片刻之后，构建完成后，将显示初始指南。
    app-guide

    如果关闭

    指南，将显示Expo app屏幕。这是执行结果。
    我选择了空白模板，因此它是一个简单的屏幕。
    我可以通过一系列步骤相对容易地检查实际机器。
    但是，代码更改没有立即反映出来，可能是因为热重装无法正常工作。为什么....
    app-preview.png

    补品376??9111

    HTTP：// //本地主机：19002

    访问

    时，可以使用Expo Dev Tool。
    看来您可以从这里启动模拟器。
    (似乎X Code和Android Studio需要分别安装和设置)
    正如我稍后会解释的那样，我没有工作...
    expo-devtool.png

    HTTP：//本地主机：19001

    显示HTML。
    expo start上的显示内容是Metro Bundler，但我不确定它是什么。
    metro-bundler.png

    HTTP：// //本地主机：19000

    世博项目信息？被陈列。
    expo-server.png

    关于模拟器

    因为我的环境是Windows，所以我尝试在Docker环境中创建一个Android仿真器环境，但是它没有用...

    至于我尝试过的，
    1.安装openjdk
    2.从Android官方下载命令行zip文件。
    3.创建一个目录来存储Andoid SDK，解压缩该zip文件并将其放置
    4.设置Android SDK的路径
    5.确认sdkmanager和avdmanager命令可以执行
    6.使用sdkmanager命令安装所需的SDK。
    ↑
    我在这里安装了仿真器，但是由于某种原因我无法运行仿真器命令。我应该正确地通过了路径，但是No such file or directory刚出来...这到底是什么？

    使用WSL构建环境可能更快。
    所以也许没有太多使用Docker构建的文章...

    参考

    • 在Docker中运行Expo / React Native
    • 创建一个Expo帐户并设置一个React Native开发环境
    • [React Native]使用Expo CLI创建一个React Native项目