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生成完成后，终端会有类似提示：

第三步：用xcode Open another project打开rn项目的ios工程文件夹

配置网络访问白名单：
打开info.plist

设置应用图标和启动图:

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

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

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