用expo开发react native实在是太爽了
expo出来已经有一段时间了,发现相关的文章还是比较少的。如果你在开发react native,那么我推荐你赶快使用expo来开发把!
expo的好处是什么?
一、零配置开发,降低开发者的心智负担。如果你之前开发过react native,那么你肯定会遇到要配置java,sdk等一大堆东西,并且版本还要对应上,否则开发不了。甚至说新手也会被这些东西劝退。使用expo后,无需配置这些开发环境,像开发web一样流畅的开发react native。
二、实时真机调试。以前开发react native,要打包后才能真机调试,并且ios的打包要审核,审核要花很长的时间,导致Android和ios之间兼容性的问题不能实时的查看,大大降低了开发效率。使用了expo之后,能够进行实时的真机调试。
三、云打包,一键推送到谷歌应用市场和Apple store。
开始
一、安装依赖
node 20 环境,首先安装全局脚手架
npm i -g eas-cli expo-cli
expo-cli用于开发,eas-cli用于推送云打包。
二、手机下载Expo go
安卓手机可以到谷歌市场下载Expo go,但是不知道为什么,下载的速度太慢了。所以我这里提供网页端下载。 expo.dev/go 选择最新版下载安装就行了
三、创建项目
npx create-expo-app app
四、启动项目
npm run start
会出现一个二维码
五、真机调试
拿出手机,打开Expo go,使用Scan QR code扫二维码,即可看到效果
效果:
修改一下代码后,按R reload一下
效果:
app开发就这么简单。
六、云打包app
先到expo官网注册一下账号,expo.dev/ ,然后本地登录expo账号,输入:
eas login
登录后,输入以下代码,让其自动生成eas.json配置文件。
eas build --platform android
全选是就行了,没讲究
会把当前的项目上传到expo,并且打包。终端显示Build in progress时,就说明正在排队打包。这里会等待很久,少则20分钟,多则两小时。此时就可以把终端关闭了,并且到expo的官网面板中查看项目
第一次是生成AAB文件,不是我们想要的apk文件,此时我们要改造一下eas.json文件,加入一段
"release": {
"android": {
"buildType": "apk"
}
}
然后重新打包一次
eas build --platform android --profile release
因为要排队打包,快则20分钟,慢则2个小时。大家慢慢等待即可。
打包好后,下载安装即可。
七、本地打包app
首先云打包太慢了,并且代码上传也不安全。那么怎么实现本地打包呢?
很遗憾,目前仅支持MacOS和Linux进行本地打包,windows暂不支持。折中的方案是windows用WSL下载Linux子系统进行打包。我这里提供另一种方法,是用docker进行打包
在项目中添加一个dockerfile.build用于打包
FROM shouyeren/expo-java:17
WORKDIR /WWW/APP/
ADD ./ /WWW/APP/
再写一个docker-compose.yaml进行自动化构建
version: '3'
name: build
services:
build:
build:
context: .
dockerfile: dockerfile.build
image: build
container_name: app
tty: true
stdin_open: true
volumes:
- ./:/WWW/APP/
整体的结构
运行命令
docker-compose up -d
运行起来后,进入到容器内部,并且在Exec窗口
手动执行命令,输入expo的账号密码,即可开始打包
eas build --platform android --profile release --local
打包失败:
试着开一下vpn重新执行命令,因为能不能打包成功和网络有关,所以只能多试几次了。
最后成功了,拿去安装就可以了。
当然最好的方案还是配好java,sdk等环境用macOS来打包。
将create-react-native改造成expo
注:旧项目改造起来有点复杂,我没有成功,这里就不试了,你们自己研究一下。我这里演示的是用最新的react native开始改造
搭建项目
npx react-native@latest init test
然后安装expo
npm i expo -D
然后照着expo项目改就行了,把babel.config.js中的内容改成以下
module.exports = function (api) {
api.cache(true);
return {
presets: ['module:@react-native/babel-preset', 'babel-preset-expo'],
};
};
把index.js中的appName改成'main'。【本地打包的时候,记得改回来】
package.json中添加一个expo的脚本
"expo": "expo start",
然后启动即可
npm run expo
改造成功
效果:
旧项目改造失败怎么办?
旧项目改造会有很多环境的问题,我没有弄过,所以只能靠你们自己去研究。同时我也对旧项目用expo改造毫无兴趣,简直是浪费时间,所以最好还是开新项目的时候就用。
转载自:https://juejin.cn/post/7357292176945184795