从头实现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的过程都不太详细,所以详细写下来做个记录.

相关推荐
前端小趴菜051 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~2 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
RadiumAg4 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo4 小时前
ES6笔记2
开发语言·前端·javascript
yanlele4 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
烛阴5 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
初遇你时动了情5 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz6 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
ohMyGod_1238 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜058 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js