使用Docker构建Expo上的React Native环境配置

2 年 ago

雅, 悟

3 minutes

以下是截至2023年10月的信息。

博览会

React Native是一個開發平台。
基本的註冊方法可以在頁面底部找到。

構建 React Native 環境

结构可能有点繁琐。

最初的组成（例如）

在 react-native 项目目录下

myapp ディレクトリ（任意のディレクトリ名）

配下に Dockerfile を設置

docker-compose.yml を置いておく

├── react-native
│   ├── myapp
│   │   └── Dockerfile
│   └── docker-compose.yml

Dockerfile的中文释义为“容器配置文件”。

FROM node:18-slim

WORKDIR /myapp

COPY . .

RUN apt update && apt install -y bash

RUN yarn global add expo

RUN yarn install

CMD yarn start

从expo官方参考文档中选择node版本为node:18-slim。

参考 – (n.)

docker-compose.yml 文件

version: '3'
services:
  myapp:
    container_name: myapp-react-native
    tty: true
    build:
      context: ./myapp
      dockerfile: ./Dockerfile
    volumes:
      # - node_modules:/myapp/node_modules
      - ./myapp:/myapp
    # env_file: ./myapp/.env
    ports:
      - 8081:8081
# volumes:
#   node_modules:

在中国，只需要一种选择，将以下内容用母语汉语进行改述：

附注1

为了避免在容器内进行 yarn install 时同步宿主机的 node_modules 目录，我们将 node_modules 目录设置为独立的命名卷。

以下是题注2的原文，需要用中文同义词重述，只需一个选项：
注解2

如果注释掉关于node_modules的设置，是因为在创建expo项目时，如果目标目录中已经存在文件，会导致错误。同时，也要将Dockerfile临时移出app目录。

塑造形象

docker compose build

创建与博览会相关的项目

进入容器中

docker compose run --rm app bash --login

创建博览会应用程序

yarn create expo-app -t

由于以下所列原因，需要做出选择：
因为我想要在myapp内创建，所以app name应设为“.”。

success Installed "create-expo-app@2.1.1" with binaries:
      - create-expo-app
✔ Choose a template: › Navigation (TypeScript)
✔ What is your app named? … .
✔ Downloaded and extracted project files.
> yarn install
yarn install v1.22.19

完成安装后，将Dockerfile恢复为原始状态。
那么应该会有以下的配置。

$ tree -L 2
.
├── docker-compose.yml
└── myapp
    ├── Dockerfile
    ├── app
    ├── app.json
    ├── assets
    ├── babel.config.js
    ├── components
    ├── constants
    ├── metro.config.js
    ├── node_modules
    ├── package.json
    ├── tsconfig.json
    └── yarn.lock

并且取消 docker-compose.yml 文件中与 node_modules 相关的注释。

version: '3'
services:
  myapp:
    container_name: myapp-react-native
    tty: true
    build:
      context: ./myapp
      dockerfile: ./Dockerfile
    volumes:
      - node_modules:/myapp/node_modules
      - ./myapp:/myapp
    # env_file: ./myapp/.env
    ports:
      - 8081:8081
volumes:
  node_modules:

启动应用程式

docker compose up

然后应该会显示以下内容的QR码。

Attaching to myapp-react-native
yarn run v1.22.19
$ expo start
myapp-react-native  | Starting project at /myapp
myapp-react-native  | Starting Metro Bundler
myapp-react-native  | ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
myapp-react-native  | █ ▄▄▄▄▄ █ ██▀▀ ▀▄██ ▄▄▄▄▄ █
myapp-react-native  | █ █   █ █  ▀█ ▀█▄▄█ █   █ █
myapp-react-native  | █ █▄▄▄█ █▀  █▄▀▀▄██ █▄▄▄█ █
myapp-react-native  | █▄▄▄▄▄▄▄█▄█ ▀▄█▄█ █▄▄▄▄▄▄▄█
myapp-react-native  | █▄▄██ ▄▄▀▀█▄█▄▀▄ ▄██ ▀▄▄ ▄█
myapp-react-native  | █▀ ▄█▀ ▄▄▄ ▄█▀█▀ ▀▀  ▄  ▀██
myapp-react-native  | █▀█▀▀▀█▄▄ ▀▀▄▀▄ ▀▄▀▄▀▀▄ ▀██
myapp-react-native  | ███▀▄█ ▄ ▀▀  ▄ ▄▄▄ ██▄ ▀███
myapp-react-native  | █▄▄█▄▄▄▄█ █ █▄ ▀▄ ▄▄▄ ▀ ▄▄█
myapp-react-native  | █ ▄▄▄▄▄ █▀▀ █▀█▀▀ █▄█ ▀▀▀██
myapp-react-native  | █ █   █ █▄▀▀▄▀▄▄█▄▄ ▄▄▀   █
myapp-react-native  | █ █▄▄▄█ █▀█▀ ▄ ▄▄▄▄ ▀█▀▀ ██
myapp-react-native  | █▄▄▄▄▄▄▄█▄█▄█▄▄█████▄▄▄▄▄▄█
myapp-react-native  | 
myapp-react-native  | › Metro waiting on exp://127.0.0.1:8081
myapp-react-native  | › Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
myapp-react-native  | 
myapp-react-native  | › Web is waiting on http://localhost:8081
myapp-react-native  | 
myapp-react-native  | › Using Expo Go
myapp-react-native  | › Press s │ switch to development build
myapp-react-native  | 
myapp-react-native  | › Press a │ open Android
myapp-react-native  | › Press w │ open web
myapp-react-native  | 
myapp-react-native  | › Press j │ open debugger
myapp-react-native  | › Press r │ reload app
myapp-react-native  | › Press m │ toggle menu
myapp-react-native  | › Press o │ open project code in your editor
myapp-react-native  | 
myapp-react-native  | › Press ? │ show all commands

请注意，SDK 48以下的Expo是在端口号 19000 上启动，而SDK 49以上则改为在端口号 8081 上启动。

网络访问

从Expo Go访问

在使用 Expo Go 时，如果您不在同一Wi-Fi上指定相同的IP地址，将无法连接。
请按照以下方式找到IP地址。

ifconfig | grep "192"
        inet xx.xx.xx.xx netmask 0xffffff00 broadcast xx.xx.xx.255

将inet的内容创建到myapp/.env中。

REACT_NATIVE_PACKAGER_HOSTNAME=xxx.xxx.xx.xxx

建议您取消注释docker-compose.yml中的env_file选项并重新执行docker compose up命令。
如果收到“无.expo文件”的提示，请建议您再次尝试制作新的镜像。

然后，正在等待的 IP 地址在 Expo 上发生了变化。

myapp-react-native  | › Metro waiting on exp://192.168.10.102:8081
myapp-react-native  | › Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

当您用相机扫描显示的QR码后，完成构建后将显示以下内容，并展示应用程序。

故障排除

在Expo Go中引用相同局域网内的IP地址，但无法访问…

对于一些人可能会出现以下错误。

There was problem loading requested app.it looks like you may be using LAN URL. Make sure your devise is on the same network as the server or try using a tunnel.

如果你的应用程序正在运行，但无法通过Expo go连接到相同LAN内的IP地址，那么请尝试以下方法。

使用tunnel选项来启动Expo。

将 package.json 文件中的 start 命令更改如下。

"start": "expo start --tunnel",

进入容器内并执行以下操作。

请提供更多上下文来确保准确翻译，“参考”一词有多种含义。例如，是指为了得到建议或意见而提供的信息，还是指在学习中查找资料来帮助理解和解决问题？

请安装 @expo/ngrok。

yarn global add @expo/ngrok

重建并尝试启动。

在与npm包相关的事情上似乎没有得到反映。

因为将 node_modules 切离容器和镜像，所以可能无法正常工作。
此时，尝试将 node_modules 从容器移到主机上。很可能会成功。

docker cp myapp:/myapp/node_modules ./myapp/

赠品

Expo注册账户

注册

基础资料注册

图像

世博会参观

安装

Google Play
https://play.google.com/store/apps/details?id=host.exp.exponent&pli=1

App Store
https://apps.apple.com/jp/app/expo-client/id982107779

请使用之前创建的账户登录

经过参考

博览会：创建您的第一个应用程序

博览会