[发明专利]桥接原生列表视图的方法、存储介质、设备及系统

说明书

本发明公开了一种桥接原生列表视图的方法、存储介质、设备及系统，涉及移动端应用开发领域，该方法包括JS端按照设定数量创建一组视图，并将创建的一组视图发送至Native层；Native层将接收的视图按照序号索引放至列表组件RecycleView中；Native层监听RecycleView中的上下滑动事件，计算出RecycleView显示的首行和尾行的序号索引；将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端。本发明能够有效避免使用ReactNative中提供的UI控件的列表视图存在的内存占用高、页面刷新延迟高问题。

技术领域

本发明涉及移动端应用开发领域，具体涉及一种桥接原生列表视图的方法、存储介质、设备及系统。

背景技术

ReactNative是Facebook公司于2015年4月开源的跨平台移动应用开发框架，是先前开源的JS(Javascript)框架React在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台，ReactNative致力于提高多平台开发的开发效率。

但是在使用ReactNative进行软件开发，得到的移动端应用程序在使用的过程中，ReactNative提供的UI(User Interface，用户界面)控件中的列表视图在处理多行数据时，存在内存占用高、页面刷新延迟高等问题。

发明内容

针对现有技术中存在的缺陷，本发明的目的在于提供一种桥接原生列表视图的方法，能够有效避免使用ReactNative中提供的UI控件的列表视图存在的内存占用高、页面刷新延迟高问题。

为达到以上目的，本发明采取的技术方案是，包括：

JS端按照设定数量创建一组视图，并将创建的一组视图发送至Native层；

Native层将接收的视图按照序号索引放至列表组件RecycleView中；

Native层监听RecycleView中的上下滑动事件，计算出RecycleView显示的首行和尾行的序号索引；

将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端。

在上述技术方案的基础上，所述JS端按照设定数量创建一组视图，具体步骤为：JS端基于屏幕高度创建多个适配于屏幕高度的视图，且视图的个数为设定数量。

在上述技术方案的基础上，所述JS端通过ReactNative桥接接口将创建的一组视图发送至Native层。

在上述技术方案的基础上，所述Native层中还创建有数组，Native层将接收的视图存储至创建的数组中，然后再将视图按照序号索引放至列表组件RecycleView中。

在上述技术方案的基础上，当将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端，JS端接收了首行和尾行的序号索引后，JS端按照设定数量再次创建一组视图，然后将创建的一组视图发送至Native层。

本发明还提供一种存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

JS端按照设定数量创建一组视图，并将创建的一组视图发送至Native层；

Native层将接收的视图按照序号索引放至列表组件RecycleView中；

Native层监听RecycleView中的上下滑动事件，计算出RecycleView显示的首行和尾行的序号索引；

将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端。

本发明还提供一种电子设备，其包括：