React Native Mac 下打包Android APK

简介: 打包的时候遇到了 好多坑 这里记录下~主要步骤:1.android keystore签名的生成gradle mac下环境变量的配置3.android studio中的gradle配置。

打包的时候遇到了 好多坑 这里记录下~
主要步骤:
1.android keystore签名的生成

  1. gradle mac下环境变量的配置

3.android studio中的gradle配置。

4.打包

签名的生成

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

“my-release-key.keystore“  签名的名称  
“my-key-alias ”   签名别名
有效期为10000天

mac 下 打开终端
$ cd ~
$ sudo keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

执行完之后,输入本机的 权限密码 然后 输入秘钥密码 一般为:至少必须为 6 个字符


img_19b13f321590d6fded75cd3aa0f01302.png
image.png

接下来就是一些信息 可填可不填


img_085f3620143911f3da516591c9935582.png
image.png

这里按下回车 别名 和 秘钥名一致 回车
img_83aa1ccef8437f4c441875ecc09c78d6.png
image.png

把生成的keystore 文件 放在 android 工程 app目录下 ,我这里新建了一个文件夹


img_e97e441bf66a3060e2a66df028c266fe.png
image.png

之后就是按照官网文档 配置 android gradle文件:


img_5e0cfc38bc90be32cec8e7c6e05be9ee.png
全局配置keystore

在android/app/build.gradle,添加如下的签名配置


img_ddb13ef531512b2b2f5bf10a0e8972af.png
image.png

这里没有用全局 你也可以像官网这样

 defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}

然后再package.json 文件中 添加 如下脚本

进入 android目录下  执行 ./gradlew assembleRelease
"scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "build_android": "cd android && ./gradlew assembleRelease",
    },
这样在每次 打包的时候可以 在终端 执行
$ npm run build_android

注意:这个./不可省略;而在windows的传统CMD命令行下则需要去掉./ (别忘记)
到这里基本上是结束了,我也想一帆风顺,但是坑还是有的


img_5d286743fb3166523205876aa8a3fa8a.png
image.png

在执行 npm run build_android的时候 报错

img_f05a4a0071f99eb479114d12c16e37c6.png
gradle环境变量问题

这里环境变量的配置参考了 这篇博文 讲的很详细 https://blog.csdn.net/u013424496/article/details/52684213

gradle command not found 这个错误一般是 gradle环境变量没有配置

如何配置gradle 环境变量


img_2a11171f5d46debdfc8698f7ab091aca.png
image.png
cd ~
touch .bash_profile  
open -e .bash_profile 
这里如果打开.bash_profile  文件没有权限的话,可以按照博文中提到的那样做,
也可以 执行下面命令
sudo vim .bash_profile
img_f10a91d385b89122ee1b90707b23b42a.png
输入密码

输入e 进行编辑


img_9f8ed182cd0b5f97688b3bf32044242f.png
image.png

输入 i 进入编辑模式 ,完成后 esc 然后:wq保存并退出。


img_b34a0a417f85395fdb71d6198a40fa78.png
image.png

完成之后 ,更新生效 .bash_profile
source .bash_profile    
gradle -v

没生效的话,重新打开终端


img_c181a7beafcf3b2548cafc3ec77da24b.png
环境变量配置完成

到这里就结束了吗?哪有那么简单哦?坑是填不完的。。。


img_a853301c80ad28f6ad3f63cd885e8169.png
image.png

what?什么鬼啊 还有这错误?
img_cb0fc455a380fd6b1c5dbaaf8e78642d.png
image.png
如果你们也遇到这个错误: 
XXXXnode_modules/node-pre-grp/node_modules/.bin/detect-libc

好吧 ,建议 卸载 node_modules  然后再重新npm install  
 不想卸 也没办法,我也不想卸啊 ,改了一部分依赖源码........(脑壳青痛)

卸载的话, 安装这个 npm install rimraf --g

然后执行:npm install rimraf -g && npm install
img_392e95c8802c9b7db5f0661b615b7afa.png
这个地方会有点慢,说明离成功已经很近了
img_8b29c15cdfc89c20c4797c8bde4aac80.png
image.png
img_8aadec5ddad04c212ba0eed60c82583c.png
image.png

生成的apk 在 /android/app/build/outputs 目录下 然后 查看apk大小

img_1f95104edf6b940c78cfd8ebb947a5a9.png
image.png

what?快30M了 什么鬼啊,
看了下图片 : 2.9M
代码:1.3M 依赖的包也不多啊,为什么打出来这么大啊? 有知道的小伙伴求告知!
img_2b40b16cbb123a8be5fff173b1a9cefd.png

android 比 ios打出来的包大是肯定的 因为:
安卓ReactNative虽然使用了JSCore,但这个JSCore不是系统源生的,而是直接打入app包里的WebKit库,这也是为啥安卓项目引入RN包大小会增大4~5M的原因,ReactNative在iOS上JSCore是系统自带的,完全可以不用打入app包内,所以iOS的包大小,引入RN后变化并没有那么夸张。

关注我的公众号,我可以不定时骚扰大家~


img_095114ae166d1c14857ef4383be8ab38.png
个人公众号
目录
相关文章
|
7天前
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
68 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
5月前
|
开发框架 Dart 前端开发
Android 跨平台方案对比之Flutter 和 React Native
本文对比了 Flutter 和 React Native 这两个跨平台移动应用开发框架。Flutter 使用 Dart 语言,提供接近原生的性能和丰富的组件库;React Native 则基于 JavaScript,具备庞大的社区支持和灵活性。两者各有优势,选择时需考虑团队技能和项目需求。
490 8
|
6月前
|
Android开发 Windows
mac下Android Studio 快捷键(持续更新)
mac下Android Studio 快捷键(持续更新)
421 1
|
6月前
|
移动开发 JavaScript 开发工具
Mac 10.9x下安装配置phonegap3.0开发环境 (涉及android sdk配置)
Mac 10.9x下安装配置phonegap3.0开发环境 (涉及android sdk配置)
|
7月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
8月前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
8月前
|
前端开发 JavaScript 测试技术
|
8月前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
160 1
|
8月前
|
开发框架 前端开发 JavaScript
移动应用开发中的跨平台策略:Flutter与React Native的比较
在移动应用领域,跨平台解决方案已成为开发者追求高效、成本效益和广泛覆盖的关键。本文深入探讨了两种领先的跨平台框架——Flutter和React Native,从技术架构、性能、社区生态及实际应用案例四个维度进行全面对比分析。通过这一比较,旨在为移动应用开发者提供选择合适框架的参考依据,帮助他们根据项目需求做出明智的决策。
|
8月前
|
前端开发 iOS开发 Android开发
React Native跨平台开发实战:从零到一
学习React Native跨平台开发,首先安装Node.js和React Native CLI,设置Android/iOS环境。使用CLI创建项目,如`npx react-native init MyProject`。运行应用:`npx react-native run-android`或`run-ios`。编写组件,如在App.js中创建Hello World。添加样式,安装第三方库如react-native-vector-icons,使用react-navigation进行路由和导航。
142 2

热门文章

最新文章

  • 1
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    45
  • 2
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    25
  • 3
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    68
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    70
  • 5
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
    29
  • 6
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
    209
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    56
  • 8
    【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    32
  • 9
    【03】优雅草央千澈详解关于APP签名以及分发-上架完整流程-第三篇安卓APP上架华为商店后面的步骤-华为应用商店相对比较麻烦一些-华为商店安卓上架
    52
  • 10
    app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
    79