从Android到React Native开发（4、打包流程解析和发布为Maven库）

一、从Android到React Native开发（1、入门）

二、从Android到React Native开发（2、通讯与模块实现）

三、从Android到React Native开发（3、自定义原生控件支持）

 做为失踪人口，本篇是对前三篇React Native文章的番外补充，主要实现把React Native项目，打包为完整aar库发布到maven，提供库支持的功能，算是小众化的需求吧，不过经过本篇你能够了解：

• React Native的资源的打包流程。
• React Native原生依赖结构。
• 本地多aar文件的合并实现。
• 进一步的Gradle脚本理解。
• 如何发布一个React Native的Maven库。

OK，Let't do it (-_^)。    

 经过前几篇，你已经对React Native的项目结构、通讯交互方式有了必定了解，不了解也不要紧（(⊙_⊙)?）， 咱们知道，发布一个maven库，首先你要先有一个lib模块。

 你须要在项目的android目录下，即app这个module的同级目录下，建立一个Android Library的 module：rn-library 。（固然你也能够修改 app下的 apply plugin: "com.android.application" 为 apply plugin: 'com.android.library' ，再屏蔽applicationId）。

1、引用

 使用过React Native的应该知道，依赖的库都是经过npm install安装，安装后的全部源码存在于node_modules文件夹中，若是依赖的库须要原生代码的支持，须要经过react-native link 实现原生代码模块的引用注册。

 而手动针对Android添加过link的应该熟悉，react-native link 其实是经过脚本，在 setting.gradle 文件中引入模块在node_modules原生路径，而后在 app 的module的build.gradle中，经过compile project(':react-native-fs')引用模块，最后在Application的getPackages()方法添加模块注册。因此这里咱们明确了一点，项目引用的原生模块都是经过本地project module的引用。（这很重要(￣へ￣)）

setting.gradle ：

//在setting中指定模块的位置
include ':react-native-fs'
project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android')

复制代码

2、建立

 看过系列篇章二的应该知道，React Native项目实际上是经过ReactInstanceManager，实现对js的bundle文件加载的。因此要呈现一个React Native页面，咱们能够经过ReactInstanceManager，在任意自定义Activity或者Fragment中，实现页面的显示渲染（固然你也能够直接继承ReactActivity）。这里只列关键点点代码，即ReactInstanceManager的建立和加载，以下发代码（更多可见篇章二）：

mReactInstanceManager = ReactInstanceManager.builder()
         //设置加载文件，这里从assets中加载打包好的js bundle
         .setBundleAssetName("index.android.bundle")
         //异常输出
         .setNativeModuleCallExceptionHandler(new NativeModuleCallExceptionHandler() {
             @Override
             public void handleException(Exception e) {
                 e.printStackTrace();
             }
         })
         //增长主模块注册，必须
         .addPackage(new MainReactPackage())
         //增长使用你的第三方模块注册
         .addPackage(new RNFSPackage())
         //通Application中指定的getJSMainModuleName
         .setJSMainModulePath("index")
         //是否支持开发者模式
         .setUseDeveloperSupport(false)
         //初始化生命周期
         .setInitialLifecycleState(LifecycleState.RESUMED)
         //设置Application
         .setApplication(getActivity().getApplication())
         .build();
        //js代码中注册的的Component名字 AppRegistry.registerComponent('AppModule', () => App);
        String moduleName = "AppModule";
        //经过页面中已经声明好ReactRootView，启动
        mReactRootView.startReactApplication(mReactInstanceManager, moduleName, null);
复制代码

一、bundle文件

 从上方代码能够看出，咱们直接加载 assets 目录下的bundle文件index.android.bundle（固然你能够从本地或者网络加载jsbundle文件也是能够），它的生成和拷贝是经过react-native目录下的react.gradle脚本实现的。这个脚本会读取一些配置路径，而后执行命令行打包和拷贝须要的资源，因此和app的build.gradle文件同样，在rn-library的build.gradle文件顶部增长引入便可，打包后，默认生成的bundle文为即为index.android.bundle文件.。

//引入react脚本
apply from: "../../node_modules/react-native/react.gradle"
复制代码

二、资源文件

 这里有一个须要额外关注的点：根据node_nodules/react-native/local-cli/bundle/目录下的assetPathUtils.js文件中，getAndroidResourceIdentifier方法的源码可知，js文件中引用本地的静态资源文件，若是存在多级目录，是会被Encode处理的，其中/会被替换为_，数字会被屏蔽，assets_会被屏蔽。

function getAndroidResourceIdentifier(asset: PackagerAsset) {
  var folderPath = getBasePath(asset);
  return (folderPath + '/' + asset.name)
    .toLowerCase()
    .replace(/\//g, '_')           // Encode folder structure in file name
    .replace(/([^a-z0-9_])/g, '')  // Remove illegal chars
    .replace(/^assets_/, '');      // Remove "assets_" prefix
}
复制代码

 因此，好比放在React Native项目根目录下的img/pic/logo.png的资源，其实编译时，会被重命名后，拷贝merged到对应的是drawable目录下，好比drawable-xxhdpi下的img_pic_logo.png。这一切都是由react native中的脚本执行的。不过默认状况下，生成拷贝的bundle文件和resources资源路径，是没法被打包到aar中的。因此以下代码所示，咱们须要配置生成的资源自动添加到aar文件中。

//默认路径
//jsBundleDirRelease: "$buildDir/intermediates/assets/release //resourcesDirRelease: "$buildDir/intermediates/res/merged/release

//修改成
project.ext.react = [
   jsBundleDirRelease: "$buildDir/intermediates/bundles/release/assets",
   resourcesDirRelease: "$buildDir/intermediates/bundles/release/res",
]

复制代码

3、打包

 上面说过：React Native项目引用的原生模块，都是经过本地project module的引用。那么默认的maven发布方式，只会发布指定module的aar文件，对于引用的其余module模块，这些dependencies列在了与aar文件同目录的.pom文件中，并不会打包仅aar，而明显React Native的这些第三方支持包，并非Maven库。

 这时候，就须要经过gradle脚本，手动对依赖的module模块，实现aar文件内容的合并。aar文件自己和Apk同样，实际上是一个zip压缩文件，其中包含文件以下所示：

/**主要文件**/
classes.jar
R.txt 
AndroidManifest.xml
res/

/**其余文件**/
proguard.txt
libs/
jni/
···
复制代码

 这里所谓的合并，就是就是将全部须要的aar文件内容，拷贝到一块儿，而后合并一个aar。固然，如何合并，合并的时机这些都是须要处理的点。而这时候， android-fat-aar 脚本，恰好知足的咱们的需求。经过引入apply from: 'fat-aar.gradle' 的脚本，对须要合并模块引用修改成 embedded project(':react-native-fs') 依赖便可：

dependencies {
    embedded project(':react-native-fs')
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    embedded "com.facebook.react:react-native:+"  // From node_modules
}
复制代码

 从脚本代码中能够知道，这里的embedded其实是一个configuration类，而这个configurations对应的是一个 ConfigurationContainer，ConfigurationContainer包含有dependencies，以下代码所示，最终仍是使用compile引用，可是这个过程当中，咱们经过embedded统计到哪些包须要合并发布。

configurations { 
    embedded  
}
dependencies {
    compile configurations.embedded
}
复制代码

 所以咱们能够根据build目录下的一些文件，动态的embedded的module进行文件拷贝和合并，如$build_dir/intermediates/exploded-aar目录下，对每一个须要合并的module的res文件夹、libs文件夹、jars文件夹、assets文件夹等的拷贝。合并aar的流程以下图所示，有兴趣的能够深刻了解： fat-aar-implementation-analysis。

 最后咱们能够先在rn-library执行../gradlew assembleRelease，让react脚本生成咱们须要的资源文件，而后再引用publish.gradle发布aar到maven便可。

4、最后

 如何，最终实现过程其实并不复杂，总结起来：

• 建立一个android.library
• 添加本地dependencies依赖
• apply react.gradle 、 fat-aar.gradle、publish.gradle
• 在library经过../gradlew assembleRelease打包，而后经过maven-publish执行publish上传。

Over(～￣▽￣)～

资源推荐：

• android-fat-aar脚本
• demo地址
• 超完整React Native学习项目