React-Native 项目打包(iOS/Android)

1. Android 打包

第一步:生成Android签名证书

签名APK需要一个证书用于为APP签名,生成签名证书可以Android Studio以可视化的方式生成,也可以使用终端采用命令行的方式生成。

第二步:设置gradle变量

1.将你的签名证书copy到 android/app目录下。
2.编辑~/.gradle/gradle. properties或../android/gradle.properties(一个是全局gradle.properties,一个是项目中的gradle.properties,大家可以根据需要进行修改) ,加入如下代码:

MYAPP_RELEASE_STORE_FILE=your keystore filename  
MYAPP_RELEASE_KEY_ALIAS=your keystore alias  
MYAPP_RELEASE_STORE_PASSWORD=*****    
MYAPP_RELEASE_KEY_PASSWORD=*****

提示:用正确的证书密码、alias以及key密码替换掉 *。

第三步:在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  
                }  
            }  
}  
...  

第四步:签名打包APK

terminal进入项目下的android目录,运行如下代码:./gradlew assembleRelease

签名打包成功后你会在 “android/app/build/outputs/apk/”目录下看到签名成功后的app-release.apk文件。

提示:如果你需要对apk进行混淆打包 编辑android/app/build.gradle:。

/**     
 * Run Proguard to shrink the Java bytecode in release builds.  
 */  
def enableProguardInReleaseBuilds = true

2.iOS打包

第一步:rn项目的ios工程文件夹创建bundle文件夹,然后生成jsbundle

进入rn项目的ios工程文件夹,找到和rn项目同名的文件件,打开AppDelegate.m文件,将这一行注释掉(为了方便真机和模拟器间的切换,尽量注释):

 jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

新加一行:

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"jsbundle"];

如果需要切换回模拟器调试,只需要将新加这行注释掉,并恢复原代码即可。

新加这行代码意思就是告诉native rn代码的入口,我们会在下一步生成这个jsbundle。

第二步:打开终端,进入你的rn工程,在根目录下执行bundle命令

react-native bundle --entry-file ./index.ios.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false

参数说明:

  • -entry-file 指定入口文件 因为要打包ios平台,所以指定为rn项目的index.ios.js作为入口
  • –bundle-output 指定输出的jsbundle文件路径和文件名 指定到rn项目的ios工程文件夹下,记得一定要先创建bundle文件夹,不然终端会报文件夹找不到的错误
  • –platform 指定平台类型
  • –assets-dest 指定资源文件夹路径 assets文件夹的路径,包含图片、node模块等资源
  • –dev 是否为开发模式 如果设置为false,不会产生警告,并且bundle会被压缩
    还有其他命令,比如:transformer、prepack、bundle-encoding等,可以到官网查看具体介绍。

完成后bundle生成完成后,终端会有类似提示:
React-Native 项目打包(iOS/Android)_第1张图片

第三步:用xcode Open another project打开rn项目的ios工程文件夹
React-Native 项目打包(iOS/Android)_第2张图片

配置网络访问白名单:
打开info.plist
React-Native 项目打包(iOS/Android)_第3张图片

设置应用图标和启动图:

iOS应用中没有图标,打包会报错。

然后,就可以进行打包,流程和原生iOS打包流程一样,(首先的配置证书)
iOS打包流程可以参照博客中的打包上线流程:传送门

注:Ad Hoc 和 App Store 打包过程基本一样,区别在于生成证书时需选择相对应的证书。

你可能感兴趣的:(React-Native 项目打包(iOS/Android))