RN组件的可见曝光方法、系统、电子设备及存储介质技术方案

技术编号:38032605 阅读:8 留言:0更新日期:2023-06-30 10:59
本发明专利技术公开了一种RN组件的可见曝光方法、系统、电子设备及存储介质。其中,RN组件的可见曝光方法包括:在RN组件内部采用事件轮询的方式执行以下步骤:获取RN组件在接入页面中的当前位置;判断所述位当前置是否在所接入页面的可见范围之内;若是,则曝光RN组件;若否,则停止曝光RN组件。本发明专利技术所有监听都在RN组件内部实现,接入页面中引入RN组件后不需增加额外代码,RN组件即可自行实现可见曝光,大大减少了接入页面的工作量,同时也降低了RN组件对接入页面的依赖性。页面的依赖性。页面的依赖性。

【技术实现步骤摘要】
RN组件的可见曝光方法、系统、电子设备及存储介质


[0001]本申请涉及终端显示领域,特别是涉及一种RN组件的可见曝光方法、系统、电子设备及存储介质。

技术介绍

[0002]RN组件(React Native)是一种通用的跨平台移动应用开发框架。RN组件开发完成后,需要嵌入某个页面使用。为了节省内存资源,RN组件并不是时时处于曝光状态的,只有在其进入可见状态时才启动曝光程序。RN组件可见曝光目前一般是通过接入页面的程序来处理,接入页面需要监听滚动事件,调用RN组件的measureInWindow函数来获得RN组件相对于屏幕的坐标信息,根据RN组件的位置判断RN组件是否曝光。假如接入页面不监听滚动事件,目前没有好的解决方案,因此需要在接入页面的程序中书写较多的代码。而且,一个RN组件开发完成后,可能会嵌入多个页面使用,每个接入页面都需添加与RN组件曝光有关的程序。

技术实现思路

[0003]本专利技术要解决的技术问题是为了克服现有技术中需要RN组件的每个接入页面书写较多代码实现RN组件可见曝光的缺陷,提供一种不需在接入页面中增加额外代码的RN组件的可见曝光方法、系统、电子设备及存储介质。
[0004]本专利技术是通过下述技术方案来解决上述技术问题:
[0005]第一方面,提供一种RN组件的可见曝光方法,包括:在RN组件内部采用事件轮询的方式执行以下步骤:
[0006]获取RN组件在接入页面中的当前位置;
[0007]判断所述当前位置是否在接入页面的可见范围之内;
[0008]若是,则曝光RN组件;若否,则停止曝光RN组件。
[0009]较佳地,RN组件的可见曝光方法方法还包括:
[0010]判断接入页面是否处于激活状态;
[0011]若是,则开启事件轮询;若否,则关闭事件轮询。
[0012]较佳地,判断接入页面是否处于激活状态的步骤,包括:
[0013]调用DeviceEventEmitter接口向接入页面发送监听事件;
[0014]通过所述监听事件获取接入页面是否处于激活状态。
[0015]较佳地,获取RN组件在接入页面中的位置的步骤,包括:
[0016]调用自定义接口向接入页面发送请求位置事件,发送的时间间隔大于设定值;
[0017]通过所述请求位置事件获取RN组件在接入页面中的位置。
[0018]第二方面,提供一种RN组件的可见曝光系统,包括:
[0019]位置获取模块,用于采用事件轮询的方式获取RN组件在接入页面中的位置;
[0020]曝光控制模块,用于采用事件轮询的方式判断RN组件位置是否在所述接入页面的
可见范围之内,若是,则曝光RN组件,若否,则停止曝光RN组件。
[0021]较佳地,RN组件的可见曝光系统还包括轮询控制模块,用于判断接入页面是否处于激活状态,若是,则开启事件轮询,若否,则关闭事件轮询。
[0022]较佳地,轮询控制模块包括:
[0023]第一发送单元,用于调用DeviceEventEmitter接口向接入页面发送监听事件;
[0024]第一获取单元,用于通过所述监听事件获取接入页面是否处于激活状态。
[0025]较佳地,位置获取模块包括:
[0026]第二发送单元,用于调用自定义接口向接入页面发送请求位置事件,其中,所述请求位置事件的发送时间间隔大于设定值;
[0027]第二获取单元,用于通过所述请求位置事件获取RN组件在接入页面中的位置。
[0028]第三方面,提供一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行计算机程序时实现任一所述的RN组件的可见曝光方法。
[0029]第四方面,提供一种计算机可读存储设备,其上存储有计算机程序,所述计算机程序被处理器执行时实现任一所述的RN组件的可见曝光方法。
[0030]本专利技术的积极进步效果在于:
[0031]本专利技术所有监听都在RN组件内部实现,接入页面中引入RN组件后不需增加额外代码,RN组件即可自行实现可见曝光,大大减少了接入页面的工作量,同时也降低了RN组件对接入页面的依赖性。
附图说明
[0032]图1为本专利技术实施例1提供的RN组件的可见曝光方法的流程示意图。
[0033]图2为本专利技术实施例2提供的RN组件的可见曝光系统的模块示意图。
[0034]图3为本专利技术实施例3提供的电子设备的结构示意图。
具体实施方式
[0035]下面通过实施例的方式进一步说明本专利技术,但并不因此将本专利技术限制在所述的实施例范围之中。
[0036]实施例1
[0037]本实施例公开了一种RN组件的可见曝光方法,如图1所示,包括:在RN组件内部采用事件轮询的方式执行以下步骤:
[0038]S101、获取RN组件在接入页面中的当前位置;
[0039]在本步骤中,RN组件通过调用自定义接口向接入页面发送请求位置事件获取RN组件在接入页面中的位置。具体地,所述自定义接口为RN组件参考实现了Web场景下流行的Intersection Observer API(交叉观察器,可以自动观察网页中的元素是否可见)机制,对measureInWindow函数进行了封装,同时基于事件通知进行检测触发。为了防止所述请求位置事件被频繁触发,采用函数节流方式实现发送时间间隔大于设定值。
[0040]S102、判断所述当前位置是否在接入页面的可见范围之内;若是,则执行S103;若否,则执行S104;
[0041]S103、曝光RN组件;
[0042]S104、停止曝光RN组件。
[0043]进一步地,RN组件的可见曝光方法还包括:
[0044]判断接入页面是否处于激活状态;若是,则开启事件轮询;若否,则关闭事件轮询。
[0045]其中,RN组件通过调用DeviceEventEmitter接口向接入页面发送监听事件获取接入页面是否处于激活状态。具体地,RN组件通过DeviceEventEmitter添加监听,实现了监听APP是否进入前台和后台的事件AppEnterForeground和AppEnterBackground、容器页面展示事件containerViewDidAppear和容器页面消失事件containerViewDidDisappear等,通过监听这些事件,获取接入页面是否处于激活状态。
[0046]本实施例提供了一种RN组件的可见曝光方法,所有监听都在RN组件内部实现,接入页面中引入RN组件后不需增加额外代码,RN组件即可自行实现可见曝光,大大减少了接入页面的工作量,同时也降低了RN组件对接入页面的依赖性。
[0047]实施例2
[0048]本实施例公开了一种RN组件的可见曝光系统,如图2所示,包括:
[0049]位置获取模块1,用于采用事件轮询的方式获取RN组件在接入页面中的当本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种RN组件的可见曝光方法,其特征在于,在RN组件内部采用事件轮询的方式执行以下步骤:获取RN组件在接入页面中的当前位置;判断所述当前位置是否在接入页面的可见范围之内;若是,则曝光RN组件;若否,则停止曝光RN组件。2.如权利要求1所述的RN组件的可见曝光方法,其特征在于,所述RN组件的可见曝光方法还包括:判断接入页面是否处于激活状态;若是,则开启事件轮询;若否,则关闭事件轮询。3.如权利要求2所述的RN组件的可见曝光方法,其特征在于,所述判断接入页面是否处于激活状态的步骤,包括:调用DeviceEventEmitter接口向接入页面发送监听事件;通过所述监听事件获取接入页面是否处于激活状态。4.如权利要求3所述的RN组件的可见曝光方法,其特征在于,所述获取RN组件在接入页面中的位置的步骤,包括:调用自定义接口向接入页面发送请求位置事件,发送的时间间隔大于设定值;通过所述请求位置事件获取RN组件在接入页面中的位置。5.一种RN组件的可见曝光系统,其特征在于,包括:位置获取模块,用于采用事件轮询的方式获取RN组件在接入页面中的当前位置;曝光控制模块,用于采用事件轮询的方式判断所述当前位置是否在所述接入页面的可见范围之内,若是,则曝光RN组件,若否,则停止曝光RN...

【专利技术属性】
技术研发人员:郝雅波周岳余坤
申请(专利权)人:携程旅游网络技术上海有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1