WO2019071928A1

WO2019071928A1 - Method and apparatus for implementing list view, and readable storage medium and device

Info

Publication number: WO2019071928A1
Application number: PCT/CN2018/082342
Authority: WO
Inventors: 黄露洋; 张文明; 陈少杰
Original assignee: 武汉斗鱼网络科技有限公司
Priority date: 2017-10-09
Filing date: 2018-04-09
Publication date: 2019-04-18
Also published as: CN107678741B; CN107678741A

Abstract

A method and apparatus for implementing a list view involved in software development, and a readable storage medium and a device. The method comprises: in an OC module developed by using an OC language, creating an RN set view class, and bridging the RN set view class with a JS module developed by using a JS language, wherein the RN set view class inherits UICollectionView (101); and using the JS module to invoke the RN set view class, and creating an instance of the RN set view class (102). Since UICollectionView, which has a reuse mechanism, is utilized for bridging, in the implementation process of introducing the reuse mechanism to a list view, the performance of an infinite sliding list is improved; and with regard to the infinite sliding list, the consumption of resources can be reduced both in terms of a memory and in terms of computation resources, avoiding same being killed by a system due to occupying an excessive amount of memory.

Description

List view implementation method, device, readable storage medium and device

Technical field

The present invention relates to the field of software development technologies, and in particular, to a method, an apparatus, a readable storage medium, and a device for implementing a list view.

Background technique

With the popularity of Facebook's open source ReactNative (RN) framework, more and more mobile development teams are using it for application development. With the RN framework, developers can develop applications that run on both the iOS and Android systems, as well as dynamically create native views of any style via JavaScript (JS), ie, JS code can be delivered via the server. The JS code creates a native view of the specified style when executed.

However, when using the ReactNative framework to develop applications under iOS, the following problems exist: The list view control (ListView) built into the iOS system is in an infinite sliding list scenario. When the scrolling list reaches a certain size, the application will be The memory is too high and is killed by the system.

Summary of the invention

In view of the above problems, the present invention has been made in order to provide an implementation method, apparatus, readable storage medium and apparatus for a list view that overcomes the above problems or at least partially solves the above problems.

An embodiment of the present invention provides a method for implementing a list view, where the method includes:

In the OC module developed by using the OC language, the RN set view class is created, and the RN set view class is bridged with the JS module developed by the JS language, and the RN set view class inherits from the UICollectionView;

The RN set view class is invoked by the JS module to create an instance of the RN set view class.

Preferably, the RN set view class is created, and the RN set view class is bridged with a JS module developed by using a JS language, including:

Creating an RNSmartCollectionViewCell class for characterizing a cell shell view in the list view, and bridging the RNSmartCollectionViewCell class with the JS module;

Creating an RNSmartCollectionView class for carrying the list view, and bridging the RNSmartCollectionView class with the JS module, wherein the RNSmartCollectionView class maintains a template attribute and a paragraph attribute, where the template attribute is used to store the registration a template view of the RNSmartCollectionView class, where the paragraph attribute is used to store the data source of the RNSmartCollectionView class;

Create the RNSmartCollectionTemplateView class.

Advantageously, the creating an RNSmartCollectionViewCell class for characterizing a cell shell view in the list view comprises:

Inherit the UICollectionViewCell to create the RNSmartCollectionViewCell class.

Preferably, the creating an RNSmartCollectionView class for carrying the list view includes:

Inheriting the UIView to create the RNSmartCollectionView class, wherein the RNSmartCollectionView class is internally created with a UICollectionView, and the UICollectionView is added as a child view of the RNSmartCollectionView class in the view hierarchy of the RNSmartCollectionView class.

Preferably, the invoking the RN set view class by using the JS module to create an instance of the RN set view class includes:

Constructing template information corresponding to the template attribute, and paragraph information corresponding to the paragraph attribute;

Create an instance of the RNSmartCollectionView class;

Passing the template information and the paragraph information into an instance of the RNSmartCollectionView class.

An embodiment of the present invention further provides an apparatus for implementing a list view, where the apparatus includes:

a first creating module, configured to create an RN set view class in an OC module developed by using an OC language, and bridge the RN set view class with a JS module developed by using a JS language, wherein the RN set view class inherits from UICollectionView;

And a second creating module, configured to invoke the RN set view class by using the JS module, and create an instance of the RN set view class.

Preferably, the first creating module includes:

a first creating unit, configured to create an RNSmartCollectionViewCell class for characterizing a cell shell view in the list view, and bridging the RNSmartCollectionViewCell class with the JS module;

a second creating unit, configured to create an RNSmartCollectionView class for carrying the list view, and bridging the RNSmartCollectionView class with the JS module, where the template and the paragraph attribute are maintained in the RNSmartCollectionView class, where the template is The attribute is used to store a template view registered to the RNSmartCollectionView class, where the paragraph attribute is used to store the data source of the RNSmartCollectionView class;

The third creation unit is used to create the RNSmartCollectionTemplateView class.

Preferably, the first creating unit is specifically configured to:

Inherit the UICollectionViewCell to create the RNSmartCollectionViewCell class.

The embodiment of the invention further provides a computer readable storage medium, on which a computer program is stored, and when the program is executed by the processor, the following steps are implemented:

The embodiment of the invention further provides a computer device, comprising a memory, a processor and a computer program stored on the memory and operable on the processor, the processor implementing the program to implement the following steps:

One or more technical solutions in the embodiments of the present invention have at least the following technical effects or advantages:

This application uses the OC module to create the RN set view class, and bridges the RN set view class with the JS module developed by the JS language. The RN set view class inherits from the UICollectionView, and then uses the JS module to call the RN set view class to create the RN set view. An instance of a class, which is bridged by a UICollectionView with reuse mechanism, introduces the reuse mechanism into the implementation of the list view, improving the performance of the infinitely sliding list, for infinitely sliding lists, whether from memory or computing resources. Both can reduce the consumption of resources and avoid being killed by the system due to excessive memory usage.

DRAWINGS

Various other advantages and benefits will become apparent to those skilled in the art from a The drawings are only for the purpose of illustrating the preferred embodiments and are not to be construed as limiting. Further, the same components are denoted by the same reference numerals throughout the drawings. In the drawing:

FIG. 1 is a flowchart showing a method for implementing a list view in an embodiment of the present invention;

2 is a structural diagram of an apparatus for implementing a list view in an embodiment of the present invention;

FIG. 3 is a schematic diagram showing the physical structure of a computer device in an embodiment of the present invention.

Detailed ways

Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While the embodiments of the present invention have been shown in the drawings, the embodiments Rather, these embodiments are provided so that this disclosure will be more fully understood, and the scope of the disclosure may be fully conveyed by those skilled in the art.

The embodiment of the present application provides a method for implementing a list view, which is applied to a client that includes an OC module and a JS module. The OC module is developed by using an OC language (Objective-C), and the JS module is developed by using a JS language. As shown in FIG. 1, the method includes:

Step 101: In the OC module, create an RN set view class, and bridge the RN set view class with the JS module, and the RN set view class inherits from the UICollectionView.

Step 102: The RN set view class is invoked by using the JS module to create an instance of the RN set view class.

The implementation method of the list view of this application will be described in detail from the two ends of the OC module JS module.

On the OC module, the RN set view class is created and the RN set view class is bridged with the JS module, including:

Create an RNSmartCollectionViewCell class that represents the cell shell view in the list view and bridge the RNSmartCollectionViewCell class with the JS module. Specifically, inheriting the UICollectionViewCell creates the RNSmartCollectionViewCell class, which contains the shell view of each cell in the list view, and then bridges the RNSmartCollectionViewCell class, enabling the JS module to create an instance of the RNSmartCollectionViewCell class.

Create an RNSmartCollectionView class for the list view, and bridge the RNSmartCollectionView class with the JS module. The RNSmartCollectionView class maintains templates and sections properties. The template properties are used to store the template view registered to the RNSmartCollectionView class. The paragraph attribute is used to store the data source of the RNSmartCollectionView class. Specifically, the UIView is created to inherit the RNSmartCollectionView class. The RNSmartCollectionView class is internally created with a UICollectionView. The UICollectionView is added as a subview of the RNSmartCollectionView class in the view hierarchy of the RNSmartCollectionView class, and provides a data source for the UICollectionView.

Further, the template attribute is a dictionary type, which is used to store a template view registered to the RNSmartCollectionView class. The caller of this view can copy all the template views with custom styles by copying the template attributes, and combine the reuse mechanism of UICollectionView. Each time the UICollectionView needs to create a new RNSmartCollectionViewCell class, it will get the corresponding template view from the template property according to the reuse identifier, then copy this view to get a view with the same style and data as the template view, and then add Into the RNSmartCollectionViewCell, the creation of a unit view with a custom style is implemented.

Further, the paragraph attribute is an array type, which is used to store a data source. Through this data source, the caller can pass in various information required by each unit view, such as reusing identifiers and unit view sizes, etc., together with template attributes. This enables a dynamically created unit view with custom styles based on externally passed in configuration.

Create the RNSmartCollectionTemplateView class. In the process of creating the RNSmartCollectionTemplateView class, you can use the copiedTemplateView method to return a copy of the view instance first, and then call the copiedTemplateView method on an RNSmartCollectionTemplateView instance to get an instance identical to the view instance. Then, use configureWithltem:templateView: The method configures the copy view obtained by copying, for example, filling the data.

On the JS module side, first, the template information corresponding to the template attribute is constructed. Specifically, the Cell label provided by the RN SmartCollectionViewCell class of the OC end bridged with the JS module can be provided to the Cell label by writing an ordinary HTML page. Various subtags are used to implement custom style views, and these template views are assigned to reuse identifiers and then stored in the templates dictionary. And constructing section information corresponding to the paragraph attribute, specifically, processing the data source to be displayed in the list, adding the reuse identifier and the template information. Next, create an instance of the RNSmartCollectionView class, and pass the template information and paragraph information to the instance of the RNSmartCollectionView class.

In this application, the UICollectionView is used as a list view, which has a reuse mechanism. When each list unit view slides out of the screen, it will be added to the reuse queue. When the list unit view slides into the screen, it will be reused first. The list unit view instance is taken out from the queue, and then directly reused. If the list unit view instance is not retrieved from the reuse queue, the list view view instance is re-created. Therefore, the use of the UICollectionView to implement the list view call can be performed from both the memory and the computing resource. Reduce resource consumption.

Based on the same inventive concept, an embodiment of the present invention further provides a device for implementing a list view. As shown in FIG. 2, the device includes:

The first creating module 201 is configured to create an RN set view class in an OC module developed by using an OC language, and bridge the RN set view class with a JS module developed by using a JS language, where the RN set view class inherits In UICollectionView;

The second creating module 202 is configured to invoke the RN set view class by using the JS module to create an instance of the RN set view class.

Preferably, the first creating module 201 includes:

a first creating unit, configured to create an RNSmartCollectionViewCell class for representing a cell shell view in the list view, and bridging the RNSmartCollectionViewCell class with the JS module;

Preferably, the first creating unit is specifically configured to:

Inherit the UICollectionViewCell to create the RNSmartCollectionViewCell class.

Preferably, the second creating unit is specifically configured to:

Preferably, the second creating module 202 includes:

a building unit, configured to construct template information corresponding to the template attribute, and paragraph information corresponding to the paragraph attribute;

a fourth creating unit, configured to create an instance of the RNSmartCollectionView class;

An incoming unit, configured to pass the template information and the paragraph information into an instance of the RNSmartCollectionView class.

Based on the same inventive concept, an embodiment of the present invention further provides a computer readable storage medium, where a computer program is stored, and when the program is executed by the processor, the following steps are implemented:

The embodiment of the present invention further provides a computer device. As shown in FIG. 3, for the convenience of description, only parts related to the embodiment of the present invention are shown. If the specific technical details are not disclosed, please refer to the method part of the embodiment of the present invention. . The computer device may be any terminal device including a mobile phone, a tablet computer, a PDA (Personal Digital Assistant), a POS (Point of Sales), an in-vehicle computer, and the like, and the computer device is used as a mobile phone as an example:

3 is a block diagram showing a portion of the structure associated with a computer device provided by an embodiment of the present invention. Referring to FIG. 3, the computer device includes a memory 301 and a processor 302. Those skilled in the art will appreciate that the computer device architecture illustrated in Figure 3 does not constitute a limitation to a computer device, and may include more or fewer components than those illustrated, or a combination of certain components, or different component arrangements.

The specific components of the computer device will be specifically described below with reference to FIG. 3:

The memory 301 can be used to store software programs and modules, and the processor 302 executes various functional applications and data processing by running software programs and modules stored in the memory 301. The memory 301 can mainly include a storage program area and a storage data area, wherein the storage program area can store an operating system, an application required for at least one function (such as a sound playing function, an image playing function, etc.), and the like; the storage data area can store data. (such as audio data, phone book, etc.). Further, the memory 301 may include a high speed random access memory, and may also include a nonvolatile memory such as at least one magnetic disk storage device, flash memory device, or other volatile solid state storage device.

The processor 302 is a control center of a computer device that performs various functions and processing data by running or executing software programs and/or modules stored in the memory 301, and recalling data stored in the memory 301. Optionally, the processor 302 may include one or more processing units; preferably, the processor 302 may integrate an application processor and a modem processor, where the application processor mainly processes an operating system, a user interface, an application, and the like. The modem processor primarily handles wireless communications.

In the embodiment of the present invention, the processor 302 included in the computer device may have the following functions:

In summary, the present application uses the OC module to create an RN set view class, and bridges the RN set view class with a JS module developed using the JS language. The RN set view class inherits from the UICollectionView, and then uses the JS module to call the RN set view class to create an RN. An instance of a collection view class, which is bridged by a UICollectionView with reuse mechanism, introduces the reuse mechanism into the implementation of the list view, improving the performance of the infinite sliding list, for infinite sliding lists, whether from memory or computing Resources can reduce the consumption of resources, and avoid being killed by the system due to excessive memory usage.

The algorithms and displays provided herein are not inherently related to any particular computer, virtual system, or other device. Various general purpose systems can also be used with the teaching based on the teachings herein. The structure required to construct such a system is apparent from the above description. Moreover, the invention is not directed to any particular programming language. It is to be understood that the invention may be embodied in a variety of programming language, and the description of the specific language has been described above in order to disclose the preferred embodiments of the invention.

In the description provided herein, numerous specific details are set forth. However, it is understood that the embodiments of the invention may be practiced without these specific details. In some instances, well-known methods, structures, and techniques are not shown in detail so as not to obscure the understanding of the description.

Similarly, the various features of the invention are sometimes grouped together into a single embodiment, in the above description of the exemplary embodiments of the invention, Figure, or a description of it. However, the method disclosed is not to be interpreted as reflecting the intention that the claimed invention requires more features than those specifically recited in the claims. Rather, as the following claims reflect, inventive aspects reside in less than all features of the single embodiments disclosed herein. Therefore, the claims following the specific embodiments are hereby explicitly incorporated into the embodiments, and each of the claims as a separate embodiment of the invention.

Those skilled in the art will appreciate that the modules in the devices of the embodiments can be adaptively changed and placed in one or more devices different from the embodiment. The modules or units or components of the embodiments may be combined into one module or unit or component, and further they may be divided into a plurality of sub-modules or sub-units or sub-components. In addition to such features and/or at least some of the processes or units being mutually exclusive, any combination of the features disclosed in the specification, including the accompanying claims, the abstract and the drawings, and any methods so disclosed, or All processes or units of the device are combined. Each feature disclosed in this specification (including the accompanying claims, the abstract and the drawings) may be replaced by alternative features that provide the same, equivalent or similar purpose.

In addition, those skilled in the art will appreciate that although some embodiments herein include certain features included in other embodiments and not other features, combinations of features of different embodiments are intended to be within the scope of the present invention. And different embodiments are formed. For example, in the following claims, any one of the claimed embodiments can be used in any combination.

The various component embodiments of the present invention may be implemented in hardware, or in a software module running on one or more processors, or in a combination thereof. Those skilled in the art will appreciate that a microprocessor or digital signal processor (DSP) may be used in practice to implement some or all of the functionality of some, or all, of the gateways, proxy servers, systems in accordance with embodiments of the present invention. The invention can also be implemented as a device or device program (e.g., a computer program and a computer program product) for performing some or all of the methods described herein. Such a program implementing the invention may be stored on a computer readable medium or may be in the form of one or more signals. Such signals may be downloaded from an Internet website, provided on a carrier signal, or provided in any other form.

It is to be noted that the above-described embodiments are illustrative of the invention and are not intended to be limiting, and that the invention may be devised without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as a limitation. The word "comprising" does not exclude the presence of the elements or steps that are not recited in the claims. The word "a" or "an" The invention can be implemented by means of hardware comprising several distinct elements and by means of a suitably programmed computer. In the unit claims enumerating several means, several of these means can be embodied by the same hardware item. The use of words, second, third, etc. does not indicate any order. These words can be interpreted as names.

Claims

A method for implementing a list view, the method comprising:

In the OC module developed by using the OC language, the RN set view class is created, and the RN set view class is bridged with the JS module developed by the JS language, and the RN set view class inherits from the UICollectionView;

The RN set view class is invoked by the JS module to create an instance of the RN set view class.
The method of claim 1, wherein the creating an RN set view class and bridging the RN set view class with a JS module developed using a JS language comprises:

Creating an RNSmartCollectionViewCell class for characterizing a cell shell view in the list view, and bridging the RNSmartCollectionViewCell class with the JS module;

Creating an RNSmartCollectionView class for carrying the list view, and bridging the RNSmartCollectionView class with the JS module, wherein the RNSmartCollectionView class maintains a template attribute and a paragraph attribute, where the template attribute is used to store the registration a template view of the RNSmartCollectionView class, where the paragraph attribute is used to store the data source of the RNSmartCollectionView class;

Create the RNSmartCollectionTemplateView class.
The method of claim 2, wherein the creating an RNSmartCollectionViewCell class for characterizing a cell shell view in a list view comprises:

Inherit the UICollectionViewCell to create the RNSmartCollectionViewCell class.
The method of claim 2, wherein the creating an RNSmartCollectionView class for piggybacking the list view comprises:

Inheriting the UIView to create the RNSmartCollectionView class, wherein the RNSmartCollectionView class is internally created with a UICollectionView, and the UICollectionView is added as a child view of the RNSmartCollectionView class in the view hierarchy of the RNSmartCollectionView class.
The method according to claim 2, wherein the invoking the RN set view class by using the JS module to create an instance of the RN set view class comprises:

Constructing template information corresponding to the template attribute, and paragraph information corresponding to the paragraph attribute;

Create an instance of the RNSmartCollectionView class;

Passing the template information and the paragraph information into an instance of the RNSmartCollectionView class.
A device for implementing a list view, characterized in that the device comprises:

a first creating module, configured to create an RN set view class in an OC module developed by using an OC language, and bridge the RN set view class with a JS module developed by using a JS language, wherein the RN set view class inherits from UICollectionView;

And a second creating module, configured to invoke the RN set view class by using the JS module, and create an instance of the RN set view class.
The device of claim 6, wherein the first creation module comprises:

a first creating unit, configured to create an RNSmartCollectionViewCell class for characterizing a cell shell view in the list view, and bridging the RNSmartCollectionViewCell class with the JS module;

a second creating unit, configured to create an RNSmartCollectionView class for carrying the list view, and bridging the RNSmartCollectionView class with the JS module, where the template and the paragraph attribute are maintained in the RNSmartCollectionView class, where the template is The attribute is used to store a template view registered to the RNSmartCollectionView class, where the paragraph attribute is used to store the data source of the RNSmartCollectionView class;

The third creation unit is used to create the RNSmartCollectionTemplateView class.
The device according to claim 7, wherein the first creating unit is specifically configured to:

Inherit the UICollectionViewCell to create the RNSmartCollectionViewCell class.
A computer readable storage medium having stored thereon a computer program, wherein the program, when executed by the processor, implements the following steps:

In the OC module developed by using the OC language, the RN set view class is created, and the RN set view class is bridged with the JS module developed by the JS language, and the RN set view class inherits from the UICollectionView;

The RN set view class is invoked by the JS module to create an instance of the RN set view class.
A computer device comprising a memory, a processor, and a computer program stored on the memory and operable on the processor, wherein the processor performs the following steps when executing the program:

In the OC module developed by using the OC language, the RN set view class is created, and the RN set view class is bridged with the JS module developed by the JS language, and the RN set view class inherits from the UICollectionView;

The RN set view class is invoked by the JS module to create an instance of the RN set view class.