CN107678741A - 列表视图的实现方法、装置、可读存储介质及设备 - Google Patents

Abstract

本发明涉及软件开发技术领域，尤其涉及列表视图的实现方法、装置、可读存储介质及设备，所述方法包括：在利用OC语言开发的OC模块中，创建RN集合视图类，并将RN集合视图类与利用JS语言开发的JS模块进行桥接，RN集合视图类继承于UICollectionView；利用JS模块调用RN集合视图类，创建RN集合视图类的实例。本申请由于利用具有重用机制的UICollectionView进行桥接，使得将重用机制引入到列表视图的实现过程中，提高了无限滑动列表的性能，对于无限滑动列表而言，无论从内存还是从计算资源上均能够降低资源的消耗，避免了因占用内存过高而被系统杀死。

Description

列表视图的实现方法、装置、可读存储介质及设备

技术领域

本发明涉及软件开发技术领域，尤其涉及列表视图的实现方法、装置、可读存储介质及设备。

背景技术

随着Facebook开源的ReactNative(RN)框架的流行，越来越多的移动开发团队开始使用其进行应用程序开发。利用RN框架，开发人员可以开发出能够同时在iOS系统和Android系统中运行的应用程序，同时，还可以通过JavaScript(JS)动态创建任意样式的原生视图，即，可以通过服务器下发JS代码，JS代码在执行时创建指定样式的原生视图。

然而，利用ReactNative框架在iOS系统下进行应用程序的开发时，存在以下问题：iOS系统内置的列表视图控件(ListView)在无限滑动列表场景下，当滚动列表达到一定规模时，应用程序将会因占用内存过高而被系统杀死。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的列表视图的实现方法、装置、可读存储介质及设备。

本发明实施例提供一种列表视图的实现方法，所述方法包括：

在利用OC语言开发的OC模块中，创建RN集合视图类，并将所述RN集合视图类与利用JS语言开发的JS模块进行桥接，所述RN集合视图类继承于UICollectionView；

利用所述JS模块调用所述RN集合视图类，创建所述RN集合视图类的实例。

优选的，所述创建RN集合视图类，并将所述RN集合视图类与利用JS语言开发的JS模块进行桥接，包括：

创建用于表征列表视图中单元壳视图的RNSmartCollectionViewCell类，并将所述RNSmartCollectionViewCell类与所述JS模块桥接；

创建用于搭载所述列表视图的RNSmartCollectionView类，并将所述RNSmartCollectionView类与所述JS模块桥接，其中，所述RNSmartCollectionView类中维护有模板属性和段落属性，所述模板属性用于存放注册给所述RNSmartCollectionView类的模板视图，所述段落属性用于存放所述所述RNSmartCollectionView类的数据源；

创建RNSmartCollectionTemplateView类。

优选的，所述创建用于表征列表视图中单元壳视图的RNSmartCollectionViewCell类，包括：

继承UICollectionViewCell创建所述RNSmartCollectionViewCell类。

优选的，所述创建用于搭载所述列表视图的RNSmartCollectionView类，包括：

继承UIView创建所述RNSmartCollectionView类，其中，所述RNSmartCollectionView类的内部创建有UICollectionView，所述UICollectionView作为所述RNSmartCollectionView类的子视图添加在所述RNSmartCollectionView类的视图层级中。

优选的，所述利用所述JS模块调用所述RN集合视图类，创建所述RN集合视图类的实例，包括：

构建与所述模板属性对应的模板信息，以及与所述段落属性对应的段落信息；

创建所述RNSmartCollectionView类的实例；

将所述模板信息和所述段落信息传入所述RNSmartCollectionView类的实例中。

本发明实施例还提供一种列表视图的实现装置，所述装置包括：

第一创建模块，用于在利用OC语言开发的OC模块中，创建RN集合视图类，并将所述RN集合视图类与利用JS语言开发的JS模块进行桥接，所述RN集合视图类继承于UICollectionView；

第二创建模块，用于利用所述JS模块调用所述RN集合视图类，创建所述RN集合视图类的实例。

优选的，所述第一创建模块，包括：

第一创建单元，用于创建用于表征列表视图中单元壳视图的RNSmartCollectionViewCell类，并将所述RNSmartCollectionViewCell类与所述JS模块桥接；

第二创建单元，用于创建用于搭载所述列表视图的RNSmartCollectionView类，并将所述RNSmartCollectionView类与所述JS模块桥接，其中，所述RNSmartCollectionView类中维护有模板属性和段落属性，所述模板属性用于存放注册给所述RNSmartCollectionView类的模板视图，所述段落属性用于存放所述所述RNSmartCollectionView类的数据源；

第三创建单元，用于创建RNSmartCollectionTemplateView类。

优选的，所述第一创建单元，具体用于：

继承UICollectionViewCell创建所述RNSmartCollectionViewCell类。

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

在利用OC语言开发的OC模块中，创建RN集合视图类，并将所述RN集合视图类与利用JS语言开发的JS模块进行桥接，所述RN集合视图类继承于UICollectionView；

利用所述JS模块调用所述RN集合视图类，创建所述RN集合视图类的实例。

本发明实施例还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现以下步骤：

在利用OC语言开发的OC模块中，创建RN集合视图类，并将所述RN集合视图类与利用JS语言开发的JS模块进行桥接，所述RN集合视图类继承于UICollectionView；

利用所述JS模块调用所述RN集合视图类，创建所述RN集合视图类的实例。

本发明实施例中的一个或多个技术方案，至少具有如下技术效果或优点：

本申请利用OC模块创建RN集合视图类，并将RN集合视图类与利用JS语言开发的JS模块进行桥接，RN集合视图类继承于UICollectionView，再利用JS模块调用RN集合视图类，创建RN集合视图类的实例，由于利用具有重用机制的UICollectionView进行桥接，使得将重用机制引入到列表视图的实现过程中，提高了无限滑动列表的性能，对于无限滑动列表而言，无论从内存还是从计算资源上均能够降低资源的消耗，避免了因占用内存过高而被系统杀死。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考图形表示相同的部件。在附图中：

图1示出了本发明实施例中的列表视图的实现方法的流程图；

图2示出了本发明实施例中的列表视图的实现装置的结构图；

图3示出了本发明实施例中的计算机设备的实体结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

本申请实施例提供一种列表视图的实现方法，应用于包含OC模块和JS模块的客户端中，其中，OC模块利用OC语言(Objective-C)开发，JS模块利用JS语言开发。如图1所示，所述方法包括：

步骤101：在OC模块中，创建RN集合视图类，并将RN集合视图类与JS模块进行桥接，RN集合视图类继承于UICollectionView。

步骤102：利用JS模块调用RN集合视图类，创建RN集合视图类的实例。

下面将分别从OC模块JS模块两端对本申请的列表视图的实现方法进行详细介绍。

在OC模块端，对于创建RN集合视图类并将RN集合视图类与JS模块进行桥接，具体包括：

创建用于表征列表视图中单元壳视图的RNSmartCollectionViewCell类，并将RNSmartCollectionViewCell类与JS模块桥接。具体地，继承UICollectionViewCell创建RNSmartCollectionViewCell类，该类包含列表视图中每个单元的壳视图，再桥接RNSmartCollectionViewCell类，使得JS模块能够创建RNSmartCollectionViewCell类的实例。

创建用于搭载列表视图的RNSmartCollectionView类，并将RNSmartCollectionView类与JS模块桥接，其中，RNSmartCollectionView类中维护有模板(templates)属性和段落(sections)属性，模板属性用于存放注册给RNSmartCollectionView类的模板视图，段落属性用于存放RNSmartCollectionView类的数据源。具体地，继承UIView创建RNSmartCollectionView类，RNSmartCollectionView类的内部创建有UICollectionView，UICollectionView作为RNSmartCollectionView类的子视图添加在RNSmartCollectionView类的视图层级中，同时，为UICollectionView提供数据源。

进一步，模板属性为字典类型，其用于存放注册给RNSmartCollectionView类的模板视图，此视图的调用方可以通过给模板属性进行复制，以传入具有自定义样式的所有模板视图，结合UICollectionView的重用机制，UICollectionView每次需要创建新的RNSmartCollectionViewCell类时，会根据重用标识符从模板属性中获取到对应的模板视图，然后对此视图进行拷贝，得到一个与模板视图具有相同样式和数据的视图，然后添加到RNSmartCollectionViewCell中，由此实现了一个具有自定义样式的单元视图的创建。

进一步，段落属性为数组类型，其用于存放数据源，通过此数据源，调用方可以传入每个单元视图所需要的各种信息，如重用标识符和单元视图尺寸等，同时配合模板属性，由此实现了根据外部传入的配置来动态创建具有自定义样式的单元视图。

创建RNSmartCollectionTemplateView类。在创建RNSmartCollectionTemplateView类的过程中，可以利用copiedTemplateView方法，先返回一个该视图实例的拷贝，再通过对一个RNSmartCollectionTemplateView实例调用copiedTemplateView方法获取到一个与该视图实例完全一样的实例，接着，利用configureWithItem:templateView:方法对拷贝得到的复制视图进行配置，例如进行数据的填充。

在JS模块端，首先，构建与模板属性对应的模板(templates)信息，具体的，通过与JS模块桥接的OC端的RNSmartCollectionViewCell类提供的Cell标签，可以向边写普通HTML页面一样通过给Cell标签提供各种子标签来实现自定义样式的视图，将这些模板视图指定重用标识符之后存入到templates字典中。以及构建与段落属性对应的段落(sections)信息，具体的，对列表要展示的数据源进行处理，添加重用标识符与模板信息。接着，创建RNSmartCollectionView类的实例，再将模板信息和段落信息传入RNSmartCollectionView类的实例中。

在本申请中，将UICollectionView作为列表视图，其拥有重用机制，当每个列表单元视图滑出屏幕时，将会被添加到重用队列中，当列表单元视图滑入屏幕时，将会先从重用队列中取出列表单元视图实例，再直接复用，如果从重用队列中取不出列表单元视图实例，再重新进行创建，因此，利用UICollectionView实现列表视图的调用无论从内存还是从计算资源上均能够降低资源的消耗。

基于同一发明构思，本发明实施例还提供一种列表视图的实现装置，如图2所示，所述装置包括：

第一创建模块201，用于在利用OC语言开发的OC模块中，创建RN集合视图类，并将所述RN集合视图类与利用JS语言开发的JS模块进行桥接，所述RN集合视图类继承于UICollectionView；

第二创建模块202，用于利用所述JS模块调用所述RN集合视图类，创建所述RN集合视图类的实例。

优选的，第一创建模块201，包括：

第一创建单元，用于创建用于表征列表视图中单元壳视图的RNSmartCollectionViewCell类，并将所述RNSmartCollectionViewCell类与所述JS模块桥接；

第二创建单元，用于创建用于搭载所述列表视图的RNSmartCollectionView类，并将所述RNSmartCollectionView类与所述JS模块桥接，其中，所述RNSmartCollectionView类中维护有模板属性和段落属性，所述模板属性用于存放注册给所述RNSmartCollectionView类的模板视图，所述段落属性用于存放所述所述RNSmartCollectionView类的数据源；

第三创建单元，用于创建RNSmartCollectionTemplateView类。

优选的，所述第一创建单元，具体用于：

继承UICollectionViewCell创建所述RNSmartCollectionViewCell类。

优选的，所述第二创建单元，具体用于：

继承UIView创建所述RNSmartCollectionView类，其中，所述RNSmartCollectionView类的内部创建有UICollectionView，所述UICollectionView作为所述RNSmartCollectionView类的子视图添加在所述RNSmartCollectionView类的视图层级中。

优选的，第二创建模块202，包括：

构建单元，用于构建与所述模板属性对应的模板信息，以及与所述段落属性对应的段落信息；

第四创建单元，用于创建所述RNSmartCollectionView类的实例；

传入单元，用于将所述模板信息和所述段落信息传入所述RNSmartCollectionView类的实例中。

基于同一发明构思，本发明实施例还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现以下步骤：

在利用OC语言开发的OC模块中，创建RN集合视图类，并将所述RN集合视图类与利用JS语言开发的JS模块进行桥接，所述RN集合视图类继承于UICollectionView；

利用所述JS模块调用所述RN集合视图类，创建所述RN集合视图类的实例。

本发明实施例还提供了一种计算机设备，如图3所示，为了便于说明，仅示出了与本发明实施例相关的部分，具体技术细节未揭示的，请参照本发明实施例方法部分。该计算机设备可以为包括手机、平板电脑、PDA(Personal Digital Assistant，个人数字助理)、POS(Point of Sales，销售终端)、车载电脑等任意终端设备，以计算机设备为手机为例：

图3示出的是与本发明实施例提供的计算机设备相关的部分结构的框图。参考图3，该计算机设备包括：存储器301和处理器302。本领域技术人员可以理解，图3中示出的计算机设备结构并不构成对计算机设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

下面结合图3对计算机设备的各个构成部件进行具体的介绍：

存储器301可用于存储软件程序以及模块，处理器302通过运行存储在存储器301的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器301可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储数据(比如音频数据、电话本等)等。此外，存储器301可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

处理器302是计算机设备的控制中心，通过运行或执行存储在存储器301内的软件程序和/或模块，以及调用存储在存储器301内的数据，执行各种功能和处理数据。可选的，处理器302可包括一个或多个处理单元；优选的，处理器302可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。

在本发明实施例中，该计算机设备所包括的处理器302可以具有以下功能：

在利用OC语言开发的OC模块中，创建RN集合视图类，并将所述RN集合视图类与利用JS语言开发的JS模块进行桥接，所述RN集合视图类继承于UICollectionView；

利用所述JS模块调用所述RN集合视图类，创建所述RN集合视图类的实例。

总之，本申请利用OC模块创建RN集合视图类，并将RN集合视图类与利用JS语言开发的JS模块进行桥接，RN集合视图类继承于UICollectionView，再利用JS模块调用RN集合视图类，创建RN集合视图类的实例，由于利用具有重用机制的UICollectionView进行桥接，使得将重用机制引入到列表视图的实现过程中，提高了无限滑动列表的性能，对于无限滑动列表而言，无论从内存还是从计算资源上均能够降低资源的消耗，避免了因占用内存过高而被系统杀死。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的网关、代理服务器、系统中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (10)

1.一种列表视图的实现方法，其特征在于，所述方法包括：

在利用OC语言开发的OC模块中，创建RN集合视图类，并将所述RN集合视图类与利用JS语言开发的JS模块进行桥接，所述RN集合视图类继承于UICollectionView；

利用所述JS模块调用所述RN集合视图类，创建所述RN集合视图类的实例。

2.如权利要求1所述的方法，其特征在于，所述创建RN集合视图类，并将所述RN集合视图类与利用JS语言开发的JS模块进行桥接，包括：

创建用于表征列表视图中单元壳视图的RNSmartCollectionViewCell类，并将所述RNSmartCollectionViewCell类与所述JS模块桥接；

创建用于搭载所述列表视图的RNSmartCollectionView类，并将所述RNSmartCollectionView类与所述JS模块桥接，其中，所述RNSmartCollectionView类中维护有模板属性和段落属性，所述模板属性用于存放注册给所述RNSmartCollectionView类的模板视图，所述段落属性用于存放所述所述RNSmartCollectionView类的数据源；

创建RNSmartCollectionTemplateView类。

3.如权利要求2所述的方法，其特征在于，所述创建用于表征列表视图中单元壳视图的RNSmartCollectionViewCell类，包括：

继承UICollectionViewCell创建所述RNSmartCollectionViewCell类。

4.如权利要求2所述的方法，其特征在于，所述创建用于搭载所述列表视图的RNSmartCollectionView类，包括：

继承UIView创建所述RNSmartCollectionView类，其中，所述RNSmartCollectionView类的内部创建有UICollectionView，所述UICollectionView作为所述RNSmartCollectionView类的子视图添加在所述RNSmartCollectionView类的视图层级中。

5.如权利要求2所述的方法，其特征在于，所述利用所述JS模块调用所述RN集合视图类，创建所述RN集合视图类的实例，包括：

构建与所述模板属性对应的模板信息，以及与所述段落属性对应的段落信息；

创建所述RNSmartCollectionView类的实例；

将所述模板信息和所述段落信息传入所述RNSmartCollectionView类的实例中。

6.一种列表视图的实现装置，其特征在于，所述装置包括：

第一创建模块，用于在利用OC语言开发的OC模块中，创建RN集合视图类，并将所述RN集合视图类与利用JS语言开发的JS模块进行桥接，所述RN集合视图类继承于UICollectionView；

第二创建模块，用于利用所述JS模块调用所述RN集合视图类，创建所述RN集合视图类的实例。

7.如权利要求6所述的装置，其特征在于，所述第一创建模块，包括：

第一创建单元，用于创建用于表征列表视图中单元壳视图的RNSmartCollectionViewCell类，并将所述RNSmartCollectionViewCell类与所述JS模块桥接；

第二创建单元，用于创建用于搭载所述列表视图的RNSmartCollectionView类，并将所述RNSmartCollectionView类与所述JS模块桥接，其中，所述RNSmartCollectionView类中维护有模板属性和段落属性，所述模板属性用于存放注册给所述RNSmartCollectionView类的模板视图，所述段落属性用于存放所述所述RNSmartCollectionView类的数据源；

第三创建单元，用于创建RNSmartCollectionTemplateView类。

8.如权利要求7所述的装置，其特征在于，所述第一创建单元，具体用于：

继承UICollectionViewCell创建所述RNSmartCollectionViewCell类。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现以下步骤：

在利用OC语言开发的OC模块中，创建RN集合视图类，并将所述RN集合视图类与利用JS语言开发的JS模块进行桥接，所述RN集合视图类继承于UICollectionView；

利用所述JS模块调用所述RN集合视图类，创建所述RN集合视图类的实例。

10.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现以下步骤：

在利用OC语言开发的OC模块中，创建RN集合视图类，并将所述RN集合视图类与利用JS语言开发的JS模块进行桥接，所述RN集合视图类继承于UICollectionView；

利用所述JS模块调用所述RN集合视图类，创建所述RN集合视图类的实例。