从头实现react native expo本地生成APK

根据github上老外的经验制作了一个react native expo项目起始模版,准备放到资源下载里(已经免积分放置好),这个起始模版带有个人非常喜欢的tailwindcss,由于raact native使用sheetstyle这种风格的样式,不太喜欢.当然,我们使用react native paper组件库时,就要对组件库里的组件使用style={{color:"blue"}}这种风格的样式了,我主要针对View Text使用tailwind css.下载后解压缩,安装好Node.js,再用vscode打开这个解压后的文件夹,控制台里运行npm start,即可看到效果.不需要安装什么android studio之类的东西,就直接可以开始开发.

起始模版里:

expo版本为52.0.46

react版本为18.3.1

tailwindcss版本为3.4.17

运行npm start后会出现如下类似画面:

这里常用两个选择:

1 按w在浏览器里查看,只要浏览器支持,我们就在浏览器里工作,仅仅当浏览器不支持你的程序的某项功能时再使用expo go客户端扫描上方你的二维码来在手机上查看效果(苹果手机不了解,与此操作不同).

2 用expo go客户端扫描上方你的二维码来在手机直接浏览效果.

这里就涉及下载expo go客户端

进入Expo Go - Expo

上方选择SDK52,然后选择 Android Emulator 后面的install,在出现窗口里点download就把expo go的apk下来了.可以打开expo go,选择Scan QR Code来在手机上显示你的应用程序.如果提示升级expo,会有链接告诉你如何升级packge.json里的expo.

注意:使用expo go的过程中,如果调试遇到困难,就ctrl+c退出,然后再npm start,同时手机上结束卡死的expo go模拟的应用程序.一般来说,就扫描一次二维码即可,以后npm start后,在expo go里点recently opened即可.

假设我们的app开发完毕了,就进入打包环节,这里讲解本地打包

A 安装 jdk-17.0.15_windows-x64_bin.exe

B 系统变量里添加 JAVA_HOME键,值为D:\Java\jdk或者你的jdk安装所在目录

C 系统变量里添加 CLASSPATH键,值为 .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

D 系统变量里的path里增加%JAVA_HOME%\bin 放到最上面

1 vscode打开项目

2 控制台里输入npx expo prebuild

3 会生成android文件夹 如果你的app需要访问网络,就如下处理:按照左边文件夹找到AndroidManifest.xml文件

注意 android:usesCleartextTraffic="true" 是新加的.

4 控制台里输入cd android回车

5 再输入./gradlew.bat assemblerelease回车

第一次打包的话,要搞很久,似乎在20分钟左右,以后再打包就大概2分钟左右了

6 打包结束后apk生成的位置在下图

7 每次修改splah-icon.png icon.png adaptive-icon.png后需要运行npx expo prebuild,不要在cd android后运行这个命令,要cd..回到应用程序主文件夹搞.

然后再cd android 再输入./gradlew.bat assemblerelease回车等待生成新apk

之所以写这个东西,是因为使用expo EAS打包方式需要用VPN注册expo账户,而且超级慢,另外网上现有的本地生成apk的过程都不太详细,所以详细写下来做个记录.

相关推荐
楚轩努力变强1 小时前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
前端开发爱好者2 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
Fly-ping2 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
接口写好了吗2 小时前
【el-table滚动事件】el-table表格滚动时,获取可视窗口内的行数据
javascript·vue.js·elementui·可视窗口滚动
未来之窗软件服务3 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
云边散步4 小时前
《校园生活平台从 0 到 1 的搭建》第四篇:微信授权登录前端
前端·javascript·后端
讨厌吃蛋黄酥4 小时前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js
星眠4 小时前
学习低代码编辑器第四天
javascript·面试
Alchemist014 小时前
React复习:基础组件+组件通信
react.js
Hilaku4 小时前
原生<dialog>元素:别再自己手写Modal弹窗了!
前端·javascript·html