ReactNative下拉刷新实现方法、存储介质、电子设备及方法与流程

本发明涉及用户视图处理技术领域，具体涉及一种reactnative下拉刷新实现方法、存储介质、电子设备及方法。

背景技术：

随着facebook开源的reactnative框架的流行，越来越多的移动开发团队开始使用其进行应用程序开发，通过reactnative框架，开发人员可以很容易开发出能够同时在ios和android平台运行的应用程序。而reactnative框架在ios开发中有一个很严重的问题，就是其内置列表视图控件listview在无限滑动列表场景，当滚动列表达到一定规模时会因为内存占用过高而导致应用程序被系统杀死。因此，为克服这一缺陷，现有ios8以上版本的开发中弃用了listview控件，选择通过桥接ios内置的视图控件uicollectionview替代listview控件。

然而reactnative提供的下拉刷新控件refreshcontrol并不支持桥接的uicollectionview控件，因此，亟需一种reactnative中能支持桥接的uicollectionview控件的下拉刷新技术方案。

同时，reactnative提供的下拉刷新控件refreshcontrol不能自定义样式，限制了开发者视图样式开发，影响用户体验。

技术实现要素：

针对现有技术中存在的缺陷，本发明解决的技术问题为：在reactnative中实现支持桥接的uicollectionview控件且可自定义视图样式。

为达到以上目的，本发明采取的技术方案是：一种reactnative下拉刷新实现方法：

在reactnative的js端创建显示视图及js端视图状态处理函数，所述js端为reactnative中使用javascript语言开发的模块；在reactnative的oc端创建空白视图及oc端视图状态处理函数，所述oc端为reactnative中使用object_c语言开发的模块；

在reactnative中绑定用于处理相同视图状态的js端视图状态处理函数和oc端视图状态处理函数；所述视图状态包括闲置状态，下拉状态，加载刷新状态和下拉百分比更新状态；

在js端定义视图样式并通知oc端所述视图样式，在oc端的空白视图内根据所述视图样式创建子视图；

在oc端获取用户操作指令并将所述用户操作指令处理成视图状态；

在oc端根据视图状态调用对应的oc端视图状态处理函数，通过oc端视图状态处理函数调用与oc端视图状态处理函数绑定的js端视图状态处理函数，通过js端视图状态处理函数更新显示视图的显示状态。

在上述技术方案的基础上，所述oc端视图状态处理函数包括：onenteridle函数，其用于处理进入闲置状态的回调；onenterpulling函数，其用于处理进入下拉状态的回调；onenterloading函数，其用于处理进入加载/刷新状态的回调；onpullingpercentupdate函数，其用于处理更新下拉偏移量与触发刷新最大偏移量的百分比的回调。

在上述技术方案的基础上，所述js端视图状态处理函数包括：onrefreshheaderenteridle函数，其用于处理oc端onenteridle函数回调；onrefreshheaderenterpulling函数，其用于处理oc端onenterpulling函数回调；onrefreshheaderenterloading函数，其用于处理oc端onenterloading函数回调；onpullingpercentupdate函数，其用于处理oc端onpullingpercentupdate函数回调。

在上述技术方案的基础上，在oc端通过scrollview获取用户操作指令，以及用户操作指令产生的滚动视图偏移量，然后根据偏移量计算出视图状态，所述视图状态包括闲置状态，下拉状态，加载刷新状态和下拉百分比更新状态；通过state函数设置更新由scrollview计算出的视图状态；通过pullingpercent函数标记下拉偏移量与触发刷新最大偏移量的百分比。

本发明还公开了一种存储介质，该存储介质上存储有计算机程序：所述计算机程序被处理器执行时实现所述的reactnative下拉刷新实现方法。

本发明还公开了一种电子设备，包括存储器和处理器，存储器上储存有在处理器上运行的计算机程序：处理器执行计算机程序时实现任一项所述的reactnative下拉刷新实现方法。

本发明还公开了一种reactnative下拉刷新实现系统，包括：

视图创建处理模块，其用于在reactnative的js端创建显示视图及js端视图状态处理函数；在reactnative的oc端创建空白视图及oc端视图状态处理函数；在reactnative中绑定用于处理相同视图状态的js端视图状态处理函数和oc端视图状态处理函数；所述视图状态包括闲置状态，下拉状态，加载刷新状态和下拉百分比更新状态；

视图样式定义模块，其用于在js端定义视图样式并通知oc端所述视图样式，在oc端的空白视图内根据所述视图样式创建子视图；

操作指令处理模块，其用于在oc端获取用户操作指令并将所述用户操作指令处理成视图状态；

视图状态更新模块，其用于在oc端根据视图状态调用对应的oc端视图状态处理函数，通过oc端视图状态处理函数调用与oc端视图状态处理函数绑定的js端视图状态处理函数，通过js端视图状态处理函数更新显示视图的显示状态。

在上述技术方案的基础上，所述oc端视图状态处理函数包括：onenteridle函数，其用于处理进入闲置状态的回调；onenterpulling函数，其用于处理进入下拉状态的回调；onenterloading函数，其用于处理进入加载/刷新状态的回调；onpullingpercentupdate函数，其用于处理更新下拉偏移量与触发刷新最大偏移量的百分比的回调。

在上述技术方案的基础上，所述js端视图状态处理函数包括：onrefreshheaderenteridle函数，其用于处理oc端onenteridle函数回调；onrefreshheaderenterpulling函数，其用于处理oc端onenterpulling函数回调；onrefreshheaderenterloading函数，其用于处理oc端onenterloading函数回调；onpullingpercentupdate函数，其用于处理oc端onpullingpercentupdate函数回调。

在上述技术方案的基础上，所述操作指令处理模块包括：

scrollview函数，其用于获取用户操作指令，以及用户操作指令产生的滚动视图偏移量，然后根据偏移量计算出视图状态，所述视图状态包括闲置状态，下拉状态，加载刷新状态和下拉百分比更新状态；

state函数，其用于设置更新由scrollview计算出的视图状态；

pullingpercent函数，其用于标记下拉偏移量与触发刷新最大偏移量的百分比。

与现有技术相比，本发明的优点在于：

本发明在reactnative的js端创建显示视图及js端视图状态处理函数；在reactnative的oc端创建空白视图及oc端视图状态处理函数；绑定用于处理相同视图状态的js端视图状态处理函数和oc端视图状态处理函数；在oc端获取用户操作指令并将用户操作指令处理成视图状态并根据视图状态调用对应的oc端视图状态处理函数，再调用其绑定的js端视图状态处理函数，通过js端视图状态处理函数更新显示视图的显示状态。oc端创建的空白视图支持桥接的uicollectionview控件，同时，在js端定义视图样式并通知oc端视图样式，在oc端的空白视图内根据视图样式创建子视图，可实现自定义视图样式。

附图说明

图1为本发明实施例中reactnative下拉刷新实现方法的流程示意图；

图2为本发明实施例中电子设备的连接框图。

具体实施方式

以下结合附图及实施例对本发明作进一步详细说明。

参见图1所示，本发明实施例提供一种reactnative下拉刷新实现方法，本发明实施例中涉及的术语说明：

reactnative：facebook开源的移动端跨平台开发框架；

oc：即objective-c，一种mac平台开发语言，常用于ios应用开发；

oc端：reactnative中使用object_c语言开发的模块；

js：即javascript，一种web脚本开发语言；

js端：reactnative中使用javascript语言开发的模块；

下拉刷新：通过下拉列表到一定偏移量之后松开列表，列表弹回并重新加载的效果；

桥接：对oc或js开发的模块进行封装，让oc端和js端代码能够互相调用。

本发明实施例提供的reactnative下拉刷新实现方法包括以下步骤：

s1，在reactnative的js端创建显示视图及js端视图状态处理函数，js端为reactnative中使用javascript语言开发的模块；在reactnative的oc端创建空白视图及oc端视图状态处理函数，oc端为reactnative中使用object_c语言开发的模块。

s2，在reactnative中绑定用于处理相同视图状态的js端视图状态处理函数和oc端视图状态处理函数；视图状态包括闲置状态，下拉状态，加载刷新状态和下拉百分比更新状态。

其中，oc端视图状态处理函数包括：onenteridle函数，其用于处理进入闲置状态的回调；onenterpulling函数，其用于处理进入下拉状态的回调；onenterloading函数，其用于处理进入加载/刷新状态的回调；onpullingpercentupdate函数，其用于处理更新下拉偏移量与触发刷新最大偏移量的百分比的回调。

js端视图状态处理函数包括：onrefreshheaderenteridle函数，其用于处理oc端onenteridle函数回调；onrefreshheaderenterpulling函数，其用于处理oc端onenterpulling函数回调；onrefreshheaderenterloading函数，其用于处理oc端onenterloading函数回调；onpullingpercentupdate函数，其用于处理oc端onpullingpercentupdate函数回调。

s3，在js端定义视图样式并通知oc端视图样式，在oc端的空白视图内根据视图样式创建子视图；

s4，在oc端获取用户操作指令并将用户操作指令处理成视图状态。

s5，在oc端根据视图状态调用对应的oc端视图状态处理函数，通过oc端视图状态处理函数调用与oc端视图状态处理函数绑定的js端视图状态处理函数，通过js端视图状态处理函数更新显示视图的显示状态。

其中，在oc端通过scrollview获取用户操作指令，以及用户操作指令产生的滚动视图偏移量，然后根据偏移量计算出视图状态，所述视图状态包括闲置状态，下拉状态，加载刷新状态和下拉百分比更新状态；通过state函数设置更新由scrollview计算出的视图状态；通过pullingpercent函数标记下拉偏移量与触发刷新最大偏移量的百分比。

处理state改变的逻辑如下：

a.处理进入闲置状态：

a101，判断在进入闲置状态之前是否是加载状态，若是，进入步骤a102；若否，直接进入步骤a103；

a102，说明下拉刷新视图需要重置了，此时通过oc端修改scrollview的contentinsets属性，将contentinsets的top设置为0，此操作会重置scrollview的偏移量，让scrollview滚回到顶部；

a103，oc端调用onenteridle回调，此时rn会将onenteridle事件转发给js端，js端收到事件转发之后再通过_onrefreshheaderenteridle来重置下拉刷新视图的显示。

b.处理进入下拉状态：

通过oc端调用onenterpulling回调，此时reactnative会将onenterpulling事件转发给js端，js端收到事件转发之后再通过_onrefreshheaderenterpulling来刷新下拉刷新视图的显示状态；

c.处理进入加载/刷新状态：

通过oc端调用onenterloading回调，此时reactnative会将onenterloading事件转发给js端，js端收到事件转发之后再通过_onrefreshheaderenterloading来刷新下拉刷新视图的显示状态并开始重新获取要显示的数据；

d.处理下拉百分比更新状态：

通过oc端在scrollview的内部处理滚动逻辑的同时计算偏移量，并调用onpullingpercentupdate回调，此时reactnative会将onpullingpercentupdate事件转发给js端，js端收到事件转发之后再通过_onpullingpercentupdate来更新下拉刷新视图显示，如显示一个根据用户下拉偏移量多少来动态变化的动画效果。

本发明实施例还公开了一种存储介质，该存储介质上存储有计算机程序，计算机程序被处理器执行时实现reactnative下拉刷新实现方法。需要说明的是，存储介质包括u盘、移动硬盘、rom(read-onlymemory，只读存储器)、ram(randomaccessmemory，随机存取存储器)、磁碟或者光盘等各种可以存储程序代码的介质。

参见图2所示，本发明实施例还公开了一种电子设备，包括存储器和处理器，存储器上储存有在处理器上运行的计算机程序，处理器执行计算机程序时实现reactnative下拉刷新实现方法。

本发明实施例还公开了一种reactnative下拉刷新实现系统，包括：

视图创建处理模块，其用于在reactnative的js端创建显示视图及js端视图状态处理函数；在reactnative的oc端创建空白视图及oc端视图状态处理函数；在reactnative中绑定用于处理相同视图状态的js端视图状态处理函数和oc端视图状态处理函数；视图状态包括闲置状态，下拉状态，加载刷新状态和下拉百分比更新状态；

视图样式定义模块，其用于在js端定义视图样式并通知oc端视图样式，在oc端的空白视图内根据视图样式创建子视图；

操作指令处理模块，其用于在oc端获取用户操作指令并将用户操作指令处理成视图状态；

视图状态更新模块，其用于在oc端根据视图状态调用对应的oc端视图状态处理函数，通过oc端视图状态处理函数调用与oc端视图状态处理函数绑定的js端视图状态处理函数，通过js端视图状态处理函数更新显示视图的显示状态。

oc端视图状态处理函数包括：onenteridle函数，其用于处理进入闲置状态的回调；onenterpulling函数，其用于处理进入下拉状态的回调；onenterloading函数，其用于处理进入加载/刷新状态的回调；onpullingpercentupdate函数，其用于处理更新下拉偏移量与触发刷新最大偏移量的百分比的回调。

js端视图状态处理函数包括：onrefreshheaderenteridle函数，其用于处理oc端onenteridle函数回调；onrefreshheaderenterpulling函数，其用于处理oc端onenterpulling函数回调；onrefreshheaderenterloading函数，其用于处理oc端onenterloading函数回调；onpullingpercentupdate函数，其用于处理oc端onpullingpercentupdate函数回调。

操作指令处理模块包括：

scrollview函数，其用于获取用户操作指令，以及用户操作指令产生的滚动视图偏移量，然后根据偏移量计算出视图状态，所述视图状态包括闲置状态，下拉状态，加载刷新状态和下拉百分比更新状态；

state函数，其用于设置更新由scrollview计算出的视图状态；

pullingpercent函数，其用于标记下拉偏移量与触发刷新最大偏移量的百分比。

本发明不局限于上述实施方式，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围之内。本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。