第一次接触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版本,修改iosandroid字段,添加包名等内容

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": ""  }}