锐客网

  1. 首页 > 睿知 > it技术 > >

win7下react-native安卓打包踩坑

IT知识react-nativereact-nati

沉舟侧畔千帆进，病树前头万木春。这篇文章主要讲述win7下react-native安卓打包踩坑相关的知识，希望能为你提供帮助。
都说工具使我们使用更加方便，然而最近研究React-native打包还有webpack这些工具，真是一把心酸一把泪。感觉这些开发工具对window系统十分不友好，外国佬都是都在用mac系统的土豪。
言归正传，今天写下这个打包流程，目的是希望可以帮助那些和我一同奋斗在window系统的童鞋。
我这里会先介绍完整流程，和一些可能会遇到的问题及解决方法
【win7下react-native安卓打包踩坑】 
一、完整打包流程
（1）打开packager包
在cmd的程序根目录下/react-native start


（2）在工程目录里 执行 mkdir  Android\app\src\main\assets 这目录是为了存储稍后的离线包


（3）生成密匙
在cmd的程序根目录下keytool -genkey -v -keystore intelligentlifeandroid.keystore -alias intelligentlifeandroidalias -keyalg RSA -keysize 2048 -validity 10000
上述intelligentlifeandroid.keystore以及intelligentlifeandroidalias 都是可修改的


（4）设置gradle变量 将（3）申请到的keystore文件放到android\app目录下 
编辑 \ android \gradle.properties，添加如下的代码（注意：请把其中的** 替代为替换的keystore密码）

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****


（5）添加签名到应用的gradle配置文件 
编辑你工程目录下的android/app/build.gradle

...
android {
    ...
    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
        }
    }
}

（6）cd 到 \android 目录下 使用gradle命令打签名包：gradlew assembleRelease 
（打包前应该确保react-native start已开启）
打包成功后会在 android\app\build\outputs\apk内 找到app-release.apk 就是签名apk。 

（7）如果想重新打包，在\android 目录下使用命令：gradlew clean（清除文件）
（确保react-native start已开启）
接着在执行命令6

（8）执行一次后再次打包只需直接执行（6）或（7）
 
二、打包过程可能会出现的一些问题：
1.查看gradle环境
C:\Users\用户\.gradle\wrapper\dists的gradle2.XX的压缩文件完整与否
2.报：Java.util.zip.ZipException: error in opening zip file
编译环境与生成环境的JDK版本不一样

3.报：‘:app:bundleReleaseJsAndAssets‘
在\android\app\react.gradle文件
修改前：
if (Os.isFamily(Os.FAMILY_WINDOWS)) {
                    commandLine "cmd", "/c", "react-native", "bundle", "--platform", "android", "--dev", "${devEnabled}",
                            "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir
                } else {
                    commandLine "react-native", "bundle", "--platform", "android", "--dev", "${devEnabled}",
                            "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir
                }


修改后：
if (Os.isFamily(Os.FAMILY_WINDOWS)) {
                    commandLine "cmd", "/c", "node", "node_modules/react-native/local-cli/cli.js", "bundle", "--platform", "android", "--dev", "${devEnabled}",
                            "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir
                } else {
                    commandLine "node", "node_modules/react-native/local-cli/cli.js", "bundle", "--platform", "android", "--dev", "${devEnabled}",
                            "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir
                }
 













































































    推荐阅读


    上一篇：android开发学习之路——连连看之游戏逻辑

    下一篇：安卓 应用app启动过程