React Native 分包实践-阿里云开发者社区

开发者社区> 凌浩雨> 正文

React Native 分包实践

简介: 1. 实现思路 1. RN从本地中读取bundle文件进行显示 2. 将JS文件进行分包打包 3. Native实现页面跳转,每个包跳转都为一个新的Activity 4.
+关注继续查看

1. 实现思路

1. RN从本地中读取bundle文件进行显示
2. 将JS文件进行分包打包
3. Native实现页面跳转,每个包跳转都为一个新的Activity
4. 进行bundle文件基础包与功能包的拆分,使用Google的diff_match_patch算法生成差异文件
5. 网络下载差异文件进行合并
6. 展示新页面

2. 操作步骤

Android 
1. 修改MainApplication
2. 修改MainActivity
3. 创建LocalReactActivityDelegate
4. 打第一bundle
react-native bundle --platform android --dev false --entry-file index.js --bundle-output bundle/index.android.bundle --assets-dest bundle/assets/

5. 打第二个bundle
react-native bundle --platform android --dev false --entry-file src/indexNet.js --bundle-output bundle/index1.android.bundle --assets-dest bundle/assets/
其中indexNet.js是新页面的入口文件
6. 使用google-diff-match-patch进行差异比对

3. 本地加载实现

1). 修改MainApplication
public class MainApplication extends Application {
  
  private static MainApplication sInstance;
  
  /**
   * 获取当前对象
   */
  public static MainApplication getInstance() {
    return sInstance;
  }
  
  @Override
  public void onCreate() {
    super.onCreate();
    sInstance = this;
    SoLoader.init(this, /* native exopackage */ false);
  }
}

这里主要是将Application中实现的接口取消,转由MainActivity中提供.

2). 修改MainActivity
public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "Unpacking";
    }
    
    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new LocalReactActivityDelegate(this, getMainComponentName());
    }
}

这里实现ReactActivity中的createReactActivityDelegate方法,自定义代理设置

3). LocalReactActivityDelegate代理代码
/**
 * 本地ReactActivity代理
 */
class LocalReactActivityDelegate(activity: Activity, @Nullable mainComponentName: String) :
        ReactActivityDelegate(activity, mainComponentName) {
  
  private val mReactNativeHost: ReactNativeHost = object : ReactNativeHost(MainApplication.getInstance()) {
    /**
     * 返回ReactPackage对象
     */
    override fun getPackages(): MutableList<ReactPackage> = Arrays.asList(
            MainReactPackage(),
            CustomPackage()
    )
  
    /**
     * 是否为开发
     */
    override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
  
    /**
     * 返回JSBundle文件路径
     */
    override fun getJSBundleFile(): String? = "${Environment.getExternalStorageDirectory()}/bundle/index.android.bundle"
  }
  
  /**
   * 返回ReactNativeHost对象
   */
  override fun getReactNativeHost(): ReactNativeHost = mReactNativeHost
}
4). Native实现页面跳转

I. 创建CustomPackage

/**
 * 自定义ReactPackage
 */
class CustomPackage : ReactPackage {
  /**
   * 创建本地模块
   */
  override fun createNativeModules(reactContext: ReactApplicationContext?): MutableList<NativeModule>
    = Arrays.asList(PageModule(reactContext))
  
  /**
   * 创建视图管理者
   */
  override fun createViewManagers(reactContext: ReactApplicationContext?): MutableList<ViewManager<View, ReactShadowNode<*>>>
    = Collections.emptyList()
  
}
5). 创建PageMoudle
/**
 * 页面管理模块
 */
@ReactModule(name = "PageModule")
class PageModule(reactContext: ReactApplicationContext?) : ReactContextBaseJavaModule(reactContext) {
  override fun getName(): String = "PageModule"
  
  /**
   * 开启网络上的模块页面
   */
  @ReactMethod
  fun startNetActivity() {
    val intent = Intent(currentActivity, NetActivity::class.java)
    currentActivity?.startActivity(intent)
  }
  
}
6). NetActivity页面
/**
 * 新页面
 */
class NetActivity : ReactActivity() {
  override fun getMainComponentName(): String? {
    return "NetActivity"
  }
  
  override fun createReactActivityDelegate(): ReactActivityDelegate =
          object: ReactActivityDelegate(this, mainComponentName) {
            override fun getReactNativeHost(): ReactNativeHost = object : ReactNativeHost(MainApplication.getInstance()) {
              override fun getPackages(): MutableList<ReactPackage> = Arrays.asList(MainReactPackage())
  
              override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
  
              override fun getJSBundleFile(): String? = "${Environment.getExternalStorageDirectory()}/bundle/index1.android.bundle"
            }
          }
}

7). RN中使用

修改App.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, NativeModules, TouchableOpacity} from 'react-native';

const PageModule = NativeModules.PageModule;

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
    startPage() {
        PageModule.startNetActivity()
    }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
                <TouchableOpacity
                    onPress={() => this.startPage()}
                >
                    <Text style={styles.instructions}>开启新页面</Text>
                </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
8). 执行打包
react-native bundle --platform android --dev false --entry-file index.js --bundle-output bundle/index.android.bundle --assets-dest bundle/assets/

--platform: 平台
--dev: 是否为开发模式
--entry-file: 入口文件
--bundle-output: bundle输出路径,这里注意bundle文件夹必须存在
--assets-dest: 资源文件存放路径

9). 测试

I. 生成之后将bundle文件夹拷贝至sdcard下
II. 如果想要在调试时可用,务必修改android/app/build.gradle文件,将bundleInDebug设置为false, 设置为false之后即不将bundle文件打包进app

project.ext.react = [
        entryFile    : "index.js",
        bundleInDebug: false
]

III. 运行
注:此时无法开启新的页面,因为新页面的js文件不存在

4. 开启新页面

1). RN中创建入口文件indexNet.js
/** @format */

import {AppRegistry} from 'react-native';
import NetJs from './NetJs';
import {name as appName} from './NetActivity';

AppRegistry.registerComponent(appName, () => NetJs);
2). RN中创建NetActivity.json文件
{
  "name": "NetActivity",
  "displayName": "NetActivity"
}

注:此处的name和displayName应当与NetActivity.kt中的getMainComponentName方法返回的一致。

3). NetJs.js文件内容
import React, {PureComponent} from 'react';
import {
    StyleSheet, Text,
    View
} from 'react-native';

/**
 * @FileName: NetJs
 * @Author: mazaiting
 * @Date: 2018/10/9
 * @Description:
 */
class NetJs extends PureComponent {
    render() {
        return (
            <View style={styles.container}>
                <Text>Welcome mazaiting!</Text>
            </View>
        )
    }
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
    container: {
        backgroundColor: '#DDD'
    }
});

/**
 * 导出当前Module
 */
module.exports = NetJs;
4). 打包
react-native bundle --platform android --dev false --entry-file src/indexNet.js --bundle-output bundle/index1.android.bundle --assets-dest bundle/assets/
5). 拷贝文件

将bundle文件夹直接拷贝到sdcard目录下,此时再重新运行APP, 即可成功显示页面。

6). 带来的问题

初始包太大,每个包都讲RN基础内容打包,此时应该比较差异,进行差异化分解。

5. 差异化

1). diff-match-patch主页
2). 测试页面
3). 依赖
  implementation 'google-diff-match-patch:google-diff-match-patch:0.1'
4). 代码使用
const val FILE1 = "index.android"
const val FILE2 = "index1.android"
const val FILE3 = "$FILE2-$FILE1.patch"

const val FILE_DIR = "E:\\android\\React-Native-Study\\Unpacking\\bundle\\"
const val SUFFIX = ".bundle"

object Patch {
  @JvmStatic
  fun main(args: Array<String>) {
    val file1 = "$FILE_DIR$FILE1$SUFFIX"
    val file2 = "$FILE_DIR$FILE2$SUFFIX"
    val file3 = "$FILE_DIR$FILE3"
    val patch = productPatch(file1, file2)
    
    productFile(file1, file3, patch)
  }
  
  /**
   * 生成文件
   * @param fileOri 源文件
   * @param fileDest 目标文件
   * @param patchString 差异字符串
   */
  private fun productFile(fileOri: String, fileDest: String, patchString: String?) {
    // 创建对象
    val patch = diff_match_patch()
    // 读取文件
    val file1 = readFile(fileOri)
    // 获取补丁内容
    val patchText = patch.patch_fromText(patchString)
    // 应用补丁
    val patchApply = patch.patch_apply(LinkedList(patchText), file1)
    
    println("===============================================")
    println("结果:" + patchApply[0])
    // 写入文件内容
    writeResult(fileDest, patchApply[0].toString())
    println("===============================================")
    // 获取执行结果数组,true为成功,false为失败
    val patchResult: BooleanArray = patchApply[1] as BooleanArray
    val result = StringBuilder()
    patchResult.forEach { result.append("$it  ") }
    
    println("result: $result")
  }
  
  /**
   * 写入文件
   * @param fileDest 目标文件
   * @param string 文件内容
   */
  private fun writeResult(fileDest: String, string: String) {
    // Read a file from disk and return the text contents.
    val output = FileWriter(fileDest)
    val writer = BufferedWriter(output)
    try {
      writer.write(string)
    } finally {
      writer.close()
      output.close()
    }
  }
  
  /**
   * 生成差异patch
   * @param fileOri 源文件
   * @param fileDest 目标文件
   * @return 差异字符串
   */
  private fun productPatch(fileOri: String, fileDest: String): String? {
    // 创建对象
    val diff = diff_match_patch()
    // 读取基础文件内容
    val file1 = readFile(fileOri)
    // 读取目标文件内容
    val file2 = readFile(fileDest)
    // 进行差异化
    val diffString = diff.diff_main(file1, file2, true)
    // 数组长度大于2执行
    if (diffString.size > 2) {
      diff.diff_cleanupSemantic(diffString)
    }
    
    println(diffString)
    
    println("===============================================")
    // 生成patch内容
    val patchString = diff.patch_make(file1, diffString)
    println(patchString)
    
    println("===============================================")
    // 将patch内容转为字符串
    val patchText = diff.patch_toText(patchString)
    println(patchText)
    
    return patchText
  }
  
  /**
   * 读取文件
   * @param filename 文件名
   * @return 文件内容
   */
  @Throws(IOException::class)
  private fun readFile(filename: String): String {
    // Read a file from disk and return the text contents.
    val sb = StringBuilder()
    val input = FileReader(filename)
    val bufRead = BufferedReader(input)
    try {
      var line = bufRead.readLine()
      while (line != null) {
        sb.append(line).append('\n')
        line = bufRead.readLine()
      }
    } finally {
      bufRead.close()
      input.close()
    }
    return sb.toString()
  }
}

6. [代码下载] (https://gitee.com/mazaiting/React-Native-Study/tree/master/Unpacking)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10089 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13892 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9161 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7503 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4508 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22406 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
+关注
凌浩雨
毕业于贵州大学大数据与信息工程学院,目前是一名移动端工程师,就职于北京乾元大通信息技术有限责任公司。
398
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载