根据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客户端了
上方选择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的过程都不太详细,所以详细写下来做个记录.