CN110688114A - 桥接原生列表视图的方法、存储介质、设备及系统 - Google Patents

桥接原生列表视图的方法、存储介质、设备及系统 Download PDF

Info

Publication number
CN110688114A
CN110688114A CN201810731437.0A CN201810731437A CN110688114A CN 110688114 A CN110688114 A CN 110688114A CN 201810731437 A CN201810731437 A CN 201810731437A CN 110688114 A CN110688114 A CN 110688114A
Authority
CN
China
Prior art keywords
views
recycleview
native
native layer
list
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201810731437.0A
Other languages
English (en)
Other versions
CN110688114B (zh
Inventor
周维
张文明
陈少杰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Wuhan Douyu Network Technology Co Ltd
Original Assignee
Wuhan Douyu Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Wuhan Douyu Network Technology Co Ltd filed Critical Wuhan Douyu Network Technology Co Ltd
Priority to CN201810731437.0A priority Critical patent/CN110688114B/zh
Publication of CN110688114A publication Critical patent/CN110688114A/zh
Application granted granted Critical
Publication of CN110688114B publication Critical patent/CN110688114B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages

Abstract

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

Description

桥接原生列表视图的方法、存储介质、设备及系统
技术领域
本发明涉及移动端应用开发领域，具体涉及一种桥接原生列表视图的方法、存储介质、设备及系统。
背景技术
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端。
本发明还提供一种电子设备，其包括：
创建单元，其用于驱使JS端按照设定数量创建一组视图，并将创建的一组视图发送至Native层；
存储单元，其用于将Native层接收的视图按照序号索引放至列表组件RecycleView中；
监听单元，其用于在Native层监听RecycleView中的上下滑动事件，计算出RecycleView显示的首行和尾行的序号索引；
传输单元，其用于将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端。
本发明还提供一种桥接原生列表视图的系统，包括：
创建模块，其用于驱使JS端按照设定数量创建一组视图，并将创建的一组视图发送至Native层；
存储模块，其用于将Native层接收的视图按照序号索引放至列表组件RecycleView中；
监听模块，其用于在Native层监听RecycleView中的上下滑动事件，计算出RecycleView显示的首行和尾行的序号索引；
传输模块，其用于将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端。
在上述技术方案的基础上，所述创建模块驱使JS端按照设定数量创建一组视图，具体过程为：JS端基于屏幕高度创建多个适配于屏幕高度的视图，且视图的个数为设定数量。
在上述技术方案的基础上，所述创建模块还用于在Native层中数组，Native层接收的视图存储至创建的数组中，然后再将视图按照序号索引放至列表组件RecycleView中。
与现有技术相比，本发明的优点在于：在JS端按照设定数量创建视图并发送至Native层，Native层将接收视图按照序号索引放至列表组件RecycleView中，Native层监听到上下滑动事件时，将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端，完成对于ReactNative中视图的桥接操作，通过桥接到RecycleView中方式，有效避免直接使用ReactNative中提供的UI控件的列表视图存在的内存占用高、页面刷新延迟高等问题。
附图说明
图1为本发明实施例中一种桥接原生列表视图的方法的流程图；
图2为本发明实施例中一种电子设备的结构示意图。
具体实施方式
以下结合附图及实施例对本发明作进一步详细说明。本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
参见图1所示，本发明实施例提供一种桥接原生列表视图的方法，用于在ReactNative上桥接原生的列表视图。本发明实施例的桥接原生列表视图的方法，具体包括以下步骤：
S1：JS端按照设定数量创建一组视图，并将创建的一组视图发送至Native层，即在JS端创建设定数量的视图，组成一组视图，然后将该组视图发送至Native层。在Android平台中，分4层，分别为java应用程序、java框架、本地框架和java运行环境，Native层指的是本地框架。JS端按照设定数量创建一组视图，具体的为：JS端基于屏幕高度创建多个适配于屏幕高度的视图，且视图的个数为设定数量。本发明实施例中的屏幕为用于显示视图的智能移动设备的屏幕。JS端通过ReactNative桥接接口将创建的一组视图发送至Native层。
S2：Native层将接收的视图按照序号索引放至列表组件RecycleView中。RecycleView为Android平台的原生列表组件。
在一种实施方式中，Native层中还创建有数组，Native层将接收的视图存储至创建的数组中，即Native层接收视图并以此存入数组中，然后再将视图按照序号索引放至列表组件RecycleView中。
S3：Native层监听RecycleView中的上下滑动事件，计算出RecycleView显示的首行和尾行的序号索引。Native层对RecycleView中的上下滑动事件进行监听，即当用户在屏幕上进行上下滑动操作时，此时被Native层监测，此时计算出RecycleView显示的首行和尾行的序号索引。
S4：将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端，自此完成对于ReactNative中视图的桥接操作。当将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端，JS端接收了首行和尾行的序号索引后，JS端按照设定数量再次创建一组视图，然后将创建的一组视图发送至Native层，以此进行循环。
本发明实施例的桥接原生列表视图的方法，在JS端按照设定数量创建视图并发送至Native层，Native层将接收视图按照序号索引放至列表组件RecycleView中，Native层监听到上下滑动事件时，将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端，完成对于ReactNative中视图的桥接操作，通过桥接到RecycleView中方式，有效避免直接使用ReactNative中提供的UI控件的列表视图存在的内存占用高、页面刷新延迟高等问题。
本发明实施例还提供一种存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：
JS端按照设定数量创建一组视图，并将创建的一组视图发送至Native层；
Native层将接收视图按照序号索引放至列表组件RecycleView中；
Native层监听RecycleView中的上下滑动事件，计算出RecycleView显示的首行和尾行的序号索引；
将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端。
JS端按照设定数量创建一组视图，具体步骤为：JS端基于屏幕高度创建多个适配于屏幕高度的视图，且视图的个数为设定数量。JS端通过ReactNative桥接接口将创建的一组视图发送至Native层。Native层中还创建有数组，Native层将接收的视图存储至创建的数组中，然后再将视图按照序号索引放至列表组件RecycleView中。
参见图2所示，本发明实施例还提供一种电子设备，其包括创建单元、存储单元、监听单元和传输单元。
创建单元用于驱使JS端按照设定数量创建一组视图，并将创建的一组视图发送至Native层；存储单元用于将Native层接收的视图按照序号索引放至列表组件RecycleView中；监听单元用于在Native层监听RecycleView中的上下滑动事件，计算出RecycleView显示的首行和尾行的序号索引；传输单元用于将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端。
JS端按照设定数量创建一组视图，具体步骤为：JS端基于屏幕高度创建多个适配于屏幕高度的视图，且视图的个数为设定数量。JS端通过ReactNative桥接接口将创建的一组视图发送至Native层。Native层中还创建有数组，Native层将接收的视图存储至创建的数组中，然后再将视图按照序号索引放至列表组件RecycleView中。
本发明还提供一种桥接原生列表视图的系统，包括创建模块、存储模块、监听模块和传输模块。
创建模块用于驱使JS端按照设定数量创建一组视图，并将创建的一组视图发送至Native层；存储模块用于将Native层接收的视图按照序号索引放至列表组件RecycleView中；监听模块用于在Native层监听RecycleView中的上下滑动事件，计算出RecycleView显示的首行和尾行的序号索引；传输模块用于将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端。
创建模块驱使JS端按照设定数量创建一组视图，具体过程为：JS端基于屏幕高度创建多个适配于屏幕高度的视图，且视图的个数为设定数量。
创建模块还用于在Native层中数组，Native层接收的视图存储至创建的数组中，然后再将视图按照序号索引放至列表组件RecycleView中。
本发明实施例的桥接原生列表视图的系统，在JS端按照设定数量创建视图并发送至Native层，Native层将接收视图按照序号索引放至列表组件RecycleView中，Native层监听到上下滑动事件时，将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端，完成对于ReactNative中视图的桥接操作，通过桥接到RecycleView中方式，有效避免直接使用ReactNative中提供的UI控件的列表视图存在的内存占用高、页面刷新延迟高等问题。
本发明不局限于上述实施方式，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围之内。本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。

Claims (10)

1.一种桥接原生列表视图的方法，其特征在于，包括以下步骤：
JS端按照设定数量创建一组视图，并将创建的一组视图发送至Native层；
Native层将接收的视图按照序号索引放至列表组件RecycleView中；
Native层监听RecycleView中的上下滑动事件，计算出RecycleView显示的首行和尾行的序号索引；
将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端。
2.如权利要求1所述的一种桥接原生列表视图的方法，其特征在于：所述JS端按照设定数量创建一组视图，具体步骤为：JS端基于屏幕高度创建多个适配于屏幕高度的视图，且视图的个数为设定数量。
3.如权利要求1所述的一种桥接原生列表视图的方法，其特征在于：所述JS端通过ReactNative桥接接口将创建的一组视图发送至Native层。
4.如权利要求1所述的一种桥接原生列表视图的方法，其特征在于：所述Native层中还创建有数组，Native层将接收的视图存储至创建的数组中，然后再将视图按照序号索引放至列表组件RecycleView中。
5.如权利要求1所述的一种桥接原生列表视图的方法，其特征在于：当将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端，JS端接收了首行和尾行的序号索引后，JS端按照设定数量再次创建一组视图，然后将创建的一组视图发送至Native层。
6.一种存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现以下步骤：
JS端按照设定数量创建一组视图，并将创建的一组视图发送至Native层；
Native层将接收的视图按照序号索引放至列表组件RecycleView中；
Native层监听RecycleView中的上下滑动事件，计算出RecycleView显示的首行和尾行的序号索引；
将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端。
7.一种电子设备，其特征在于，其包括：
创建单元，其用于驱使JS端按照设定数量创建一组视图，并将创建的一组视图发送至Native层；
存储单元，其用于将Native层接收的视图按照序号索引放至列表组件RecycleView中；
监听单元，其用于在Native层监听RecycleView中的上下滑动事件，计算出RecycleView显示的首行和尾行的序号索引；
传输单元，其用于将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端。
8.一种桥接原生列表视图的系统，其特征在于，包括：
创建模块，其用于驱使JS端按照设定数量创建一组视图，并将创建的一组视图发送至Native层；
存储模块，其用于将Native层接收的视图按照序号索引放至列表组件RecycleView中；
监听模块，其用于在Native层监听RecycleView中的上下滑动事件，计算出RecycleView显示的首行和尾行的序号索引；
传输模块，其用于将计算出的首行和尾行的序号索引通过ReactNative桥接接口发送至JS端。
9.如权利要求8所述的一种桥接原生列表视图的系统，其特征在于：所述创建模块驱使JS端按照设定数量创建一组视图，具体过程为：JS端基于屏幕高度创建多个适配于屏幕高度的视图，且视图的个数为设定数量。
10.如权利要求8所述的一种桥接原生列表视图的系统，其特征在于：所述创建模块还用于在Native层中数组，Native层接收的视图存储至创建的数组中，然后再将视图按照序号索引放至列表组件RecycleView中。
CN201810731437.0A 2018-07-05 2018-07-05 桥接原生列表视图的方法、存储介质、设备及系统 Active CN110688114B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810731437.0A CN110688114B (zh) 2018-07-05 2018-07-05 桥接原生列表视图的方法、存储介质、设备及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810731437.0A CN110688114B (zh) 2018-07-05 2018-07-05 桥接原生列表视图的方法、存储介质、设备及系统

Publications (2)

Publication Number Publication Date
CN110688114A true CN110688114A (zh) 2020-01-14
CN110688114B CN110688114B (zh) 2022-11-11

Family

ID=69106807

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810731437.0A Active CN110688114B (zh) 2018-07-05 2018-07-05 桥接原生列表视图的方法、存储介质、设备及系统

Country Status (1)

Country Link
CN (1) CN110688114B (zh)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170091159A1 (en) * 2015-09-25 2017-03-30 Yahoo! Inc. Programmatic native rendering of structured content
US20170185577A1 (en) * 2015-12-25 2017-06-29 Alibaba Group Holding Limited Method and device for extending a layout template of an application component
CN107153528A (zh) * 2016-03-02 2017-09-12 阿里巴巴集团控股有限公司 混合模型列表项重用的方法及设备
US20170329746A1 (en) * 2016-05-12 2017-11-16 Alibaba Group Holding Limited Page component dynamic layout
CN108023960A (zh) * 2017-12-08 2018-05-11 百度在线网络技术（北京）有限公司 构建Feed流应用的装置和Feed流信息推送的方法
CN108153515A (zh) * 2017-05-28 2018-06-12 国云科技股份有限公司 一种安卓平台RecycleView控件编辑数据后回看滚动混乱的解决方法

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170091159A1 (en) * 2015-09-25 2017-03-30 Yahoo! Inc. Programmatic native rendering of structured content
US20170185577A1 (en) * 2015-12-25 2017-06-29 Alibaba Group Holding Limited Method and device for extending a layout template of an application component
CN107153528A (zh) * 2016-03-02 2017-09-12 阿里巴巴集团控股有限公司 混合模型列表项重用的方法及设备
US20170329746A1 (en) * 2016-05-12 2017-11-16 Alibaba Group Holding Limited Page component dynamic layout
CN108153515A (zh) * 2017-05-28 2018-06-12 国云科技股份有限公司 一种安卓平台RecycleView控件编辑数据后回看滚动混乱的解决方法
CN108023960A (zh) * 2017-12-08 2018-05-11 百度在线网络技术（北京）有限公司 构建Feed流应用的装置和Feed流信息推送的方法

Non-Patent Citations (5)

* Cited by examiner, † Cited by third party
Title
338D708389AE: "ReactNative 研究", 《HTTPS://WWW.JIANSHU.COM/P/AFDFC49E6DEA》 *
OBANIU: "react native Android真正回收复用RecycleView/ListView", 《HTTPS://MY.OSCHINA.NET/DROIDWOLF/BLOG/750479》 *
SKYBLUE126: "android react native 高性能listview实现", 《HTTPS://BLOG.CSDN.NET/SKYBLUE126/ARTICLE/DETAILS/52062654》 *
演员新之助: "React-Native iOS列表(ListView)优化方案", 《HTTPS://WWW.JIANSHU.COM/P/54CFCAAD3400》 *
腾讯BUGLY: "【腾讯Bugly干货分享】跨平台ListView性能优化", 《HTTPS://BLOG.CSDN.NET/TENCENT_BUGLY/ARTICLE/DETAILS/53583737》 *

Also Published As

Publication number Publication date
CN110688114B (zh) 2022-11-11

Similar Documents

Publication Publication Date Title
US20180129520A1 (en) Method and apparatus for starting virtual machine
CN106055612B (zh) 一种数据分页显示方法及终端设备
US20200004464A1 (en) Method and apparatus for storing data
CN107688529A (zh) 组件调试方法和装置
CN110618848A (zh) 一种页面显示方法、装置、设备及存储介质
CN105812933A (zh) 电视的启动方法及装置
CN114020297A (zh) 一种基于蓝牙智能水表程序升级方法、装置、设备和介质
CN111124280A (zh) 一种数据追加写入方法、装置及电子设备和存储介质
CN110704148B (zh) 设备页面元素的获取方法、装置、服务器及存储介质
CN104424239A (zh) 资源文件加载方法和装置
CN104424224A (zh) 一种文件索引存储方法及装置
CN110688114B (zh) 桥接原生列表视图的方法、存储介质、设备及系统
CN104615647B (zh) 视图模型请求、下发方法及装置
CN108153566A (zh) 列表数据循环显示方法、装置、设备和存储介质
CN112688991A (zh) 用于执行点云扫描操作的方法、相关装置及计算机程序产品
CN102984160B (zh) 分布式网络扫描任务处理方法和系统
CN104615349A (zh) 一种信息处理的方法及电子设备
US11366613B2 (en) Method and apparatus for writing data
CN111314210B (zh) 一种用于社交互动的方法与设备
CN110413800B (zh) 一种提供小说信息的方法与设备
CN109960562B (zh) 一种信息展示方法、装置和计算机可读存储介质
CN110336883A (zh) 镜像数据传输方法、装置、设备及计算机可读存储介质
CN103635872B (zh) 一种菜单展示方法、装置和设备
CN107066360B (zh) 一种信息传输方法及服务器
CN103606175A (zh) 一种地图热点图标的显示方法及控制器

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant