reactnative程序使用expo管理打包初探及问题汇总

第一次接触 rn，我是想使用 rn 原生写一个 app 程序的。
然后现实给了我一记响亮的耳光

一开始还蛮顺利的，正常编译，在设备上运行，在我准备引入导航的时候问题出现了，原本正常的程序在使用 npm 下载 react-navigation 官网要下载的依赖之后，程序直接报错，经过一番各种百度，可能是版本兼容的问题（但我使用的是最新 rn 版本 0.62.2，react-navigation 也是 5.x 的文档）=。= 再加上使用 rn 文档的打包失败。我对 rn 失望了。。。是我太菜了，我不配

然后迫不得已使用了 expo，真香。推荐使用 nrm 切换 npm 源到 taobao 源

npm i nrm -g

nrm use taobao

使用 npm 下载 expo-cli 工具，创建项目并启动

npm i expo-cli -g

expo init youname

cd 到项目根目录，使用 npm start 启动项目。expo 会启动本地一个服务，Run on Android device/emulator 在安卓手机启动项目。expo 会在手机安装一个 expo 程序，并启动电脑打开的项目。

在 expo 管理的项目中建议使用 expo install 安装依赖，expo 会自动根据 rn 版本下载依赖的对应版本，避免兼容性问题（我不就为这个来的嘛）。①

使用 expo 打包发布应用程序。需要先下载 exp 工具

npm i exp -g

然后配置根目录下的 app.json 文件，这里可以配置你的 app 的各种全局参数。②
在项目根目录使用 exp start 启动服务，然后使用 exp build:android or exp build:ios 来构建你应用程序的二进制文件 ③

在构建完成时 expo 会给一个下载链接，打开下载链接，就可以获取到打包好的包了。

遇到的问题汇总：
1) rn 版本 0.59 以上，下载需要的依赖后不在需要 react-native link 链接项目。但是在使用 expo 下载后，程序依然会报错，重新启动程序就好了

2) 使用 expo init 生成的项目会带有 app.json 文件，但是直接使用会报错，主要将 assetBundlePatterns 字段值修改为 assets/，不然会报错forEach of undefined，添加sdkVersion 字段，指定 sdk 版本，修改 ios 和android字段，添加包名等内容

3) 如果你是 windows 用户，那不好意思，这篇文章可能并不能帮你完全构建应用程序安装包，因为按照 expo 文档，windows 构建必须启用 WSL，至少启动一次 Ubuntu，使用 Admin powershell 运行：Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux。也就是要在 windows 开启 linux 子系统。windows 如何启用 WSL mac 上使用没有此限制，可忽略此步骤。

用到的核心依赖文档：react-navigation 导航器使用 expo 构建发布你的应用 expo 使用文档

附 app.json 的基础打包配置：

{
  "expo": {
    "name": "youname",
    "slug": "youname",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    "sdkVersion":"37.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {"fallbackToCacheTimeout": 0},
    "assetBundlePatterns": ["assets/"],
    "ios": {
      "bundleIdentifier": "com.youname.youname",
      "buildNumber": "1.0.0",
      "supportsTablet": true
    },
    "android": {
      "package": "com.youname.youname",
      "versionCode": 1
    },
    "description": ""
  }
}