React Native 资源包拆分实战分析

 更新时间:2023年08月01日 09:31:02   作者:涅槃快乐是金  
这篇文章主要为大家介绍了React Native 资源包拆分实战分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

Native加载多个 JS Bundle

客户端会先加载公共基础包,加载完成后,再加载业务包。

安卓端加载多个 JS Bundle

先加载公共基础包,安卓端需要在创建 ReactNativeHost 实例的时候重写 getBundleAssetName()方法或 getJSBundleFile()方法,返回公共基础包的本地路径,然后再调用 ReactNativeHost实例的 getReactInstanceManager() 方法触发 ReactInstanceManager实例的创建,最后调用 createReactContextInBackground()方法来触发 ReactNative 的初始化流程。

// 安卓端代码示例 - 加载公共基础包
ReactNativeHost RNHost = new ReactNativeHost(application) {
  @Nullable 
  @Override 
  protected String getBundleAssetName() {
    return "Assets目录下的common.android.bundle路径";
  }
  @Nullable 
  @Override 
  protected String getJSBundleFile() {
    return "本地磁盘中的common.android.bundle路径";
  }
}
ReactInstanceManager bridge = RNHost.getReactInstanceManager();
if (!bridge.hasStartedCreatingInitialContext()) {
  bridge.createReactContextInBackground();
}

安卓端ReactNative在加载完公共基础包后,会回调ReactInstanceManager 实例中注册的所有 ReactInstanceEventListeneronReactContextInitialized()方法,可以在onReactContextInitialized()回调方法中加载业务包。

通过使用上文中的 ReactInstanceManager 实例的 getCurrentReactContext()获取到当前的 ReactContext 上下文对象,再调用上下文对象的 getCatalystInstance()方法获取 CatalystInstance 实例,最终调用该实例的 loadScriptFromFile() 方法完成业务包的加载。

// 安卓端代码示例 - 加载业务包
ReactContext context = RNHost.getReactInstanceManager().getCurrentReactContext();
CatalystInstance catalyst = context.getCatalystInstance();
String fileName = "本地业务包business.android.bundle路径"
catalyst.loadScriptFromFile(fileName, fileName, false);

iOS端加载多个 JS Bundle

先加载公共基础包,iOS端可以使用 RCTBridge 的实例化方法 [RCTBridge initWithBundleURL: moduleProvider: launchOptions:],传入公共基础包的本地路径。

// iOS端代码示例 - 加载公共基础包
NSURL *commonBundleURL = [[NSBundle mainBundle] URLForResource:@"common" withExtension:@"ios.bundle"];//公共基础包路径
RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:commonBundleURL moduleProvider:nil launchOptions:launchOptions];

iOS端ReactNative在加载完公共基础包后,会发送 RCTJavaScriptDidLoadNotification 事件全局通知。
可以通过注册监听 RCTJavaScriptDidLoadNotification 事件,然后加载业务包,可以使用RCTCxxBridgeexecuteSourceCode()方法来加载。

这里需要注意的是: executeSourceCode() 方法是 RCTCxxBridge的私有方法。可以用过 Category 的方式将executeSourceCode()方法暴露出来。

// iOS端代码示例 - Category暴露私有方法
@interface RCTBridge (MyCustomerBridge)   
 - (void)executeSourceCode:(NSData *)sourceCode sync:(BOOL)sync;
@end
// iOS端代码示例 - 加载业务包
NSURL *businessBundleURL = [[NSBundle mainBundle] URLForResource:@"business" withExtension:@"ios.bundle"];//业务包路径
NSError *error = nil;
NSData *sourceData = [NSData dataWithContentsOfURL:businessBundleURL options:NSDataReadingMappedIfSafe error:&error];
if (error) { 
  return 
}
[bridge.batchedBridge executeSourceCode:sourceData sync:NO];

以上就是React Native 资源包拆分实战分析的详细内容,更多关于React Native 资源包拆分的资料请关注脚本之家其它相关文章!

相关文章

  • react滚动加载useInfiniteScroll 详解

    react滚动加载useInfiniteScroll 详解

    使用useInfiniteScroll hook可以处理检测用户何时滚动到页面底部的逻辑,并触发回调函数以加载更多数据,它还提供了一种简单的方法来管理加载和错误消息的状态,今天通过实例代码介绍下react滚动加载useInfiniteScroll 相关知识,感兴趣的朋友跟随小编一起看看吧
    2023-09-09
  • React Form组件的实现封装杂谈

    React Form组件的实现封装杂谈

    这篇文章主要介绍了React Form组件的实现封装杂谈,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • React Refs转发实现流程详解

    React Refs转发实现流程详解

    Refs是一个 获取 DOM节点或React元素实例的工具,在React中Refs 提供了一种方式,允许用户访问DOM 节点或者在render方法中创建的React元素,这篇文章主要给大家介绍了关于React中refs的一些常见用法,需要的朋友可以参考下
    2022-12-12
  • 详解React中key的作用

    详解React中key的作用

    这篇文章主要介绍了React中key的作用,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下
    2021-04-04
  • 基于React.js实现兔兔牌九宫格翻牌抽奖组件

    基于React.js实现兔兔牌九宫格翻牌抽奖组件

    这篇文章主要为大家详细介绍了如何基于React.js实现兔兔牌九宫格翻牌抽奖组件,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-01-01
  • React详细讲解JSX和组件的使用

    React详细讲解JSX和组件的使用

    jsx就是javsscript与xml结合的一种格式,是js语法的一种扩展,只要把html代码写在js中就是jsx。react中定义组件有3种写法:函数的方式、es5的写法、es6(类)的写法
    2022-08-08
  • react底层的四大核心内容架构详解

    react底层的四大核心内容架构详解

    这篇文章主要为大家详细介绍了react四大核心内容架构,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • React受控组件与非受控组件详细介绍

    React受控组件与非受控组件详细介绍

    具体来说这是一种react非受控组件,其状态是在input的react内部控制,不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识,感兴趣的朋友一起看看吧
    2022-09-09
  • React中Provider组件详解(使用场景)

    React中Provider组件详解(使用场景)

    这篇文章主要介绍了React中Provider组件使用场景,使用Provider可以解决数据层层传递和每个组件都要传props的问题,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • React SSR架构Stream Rendering与Suspense for Data Fetching

    React SSR架构Stream Rendering与Suspense for Data Fetching

    这篇文章主要为大家介绍了React SSR架构Stream Rendering与Suspense for Data Fetching解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03

最新评论