react-native程序使用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": ""
  }
}