React-native Long List Processing Method and System

Abstract

The present invention provides a method and system for processing long lists in React-native. The native module of the intelligent terminal operating system parses the data source from React-native, and the parsed data source is transmitted back to the long list component in the React-native layer. The long list component renders according to the parsed data source. The present invention realizes the long list function of React-native in the way of native bridging, ensuring that the long list has both the development experience of React-native and the smooth performance of the native; and does not depend on the rendering file.

Description

Technical Field

[0001] The present invention relates to the technical field of interface rendering, and in particular, to a method and system for processing long lists in React-native. Background Art

[0002] In the prior art, interface rendering needs to rely on rendering files for implementation, and the rendering files need to be pre-buried in the installation package or downloaded in advance. There is a weak coupling relationship between the actual business data and the rendering files. When page display is required, it cannot be fully guaranteed whether the rendering files exist. For example, the rendering files may fail to download, resulting in serious consequences such as the page being unable to be correctly rendered or the program crashing. Summary of the Invention

[0003] Aiming at the defects in the prior art, the purpose of the present invention is to provide a method and system for processing long lists in React-native.

[0004] According to a method for processing long lists in React-native provided by the present invention, the native module of the intelligent terminal operating system parses the data source from React-native, and the parsed data source is passed back to the long list component at the React-native layer, and the long list component renders according to the parsed data source.

[0005] Preferably, the intelligent terminal operating system includes iOS. For the native module of iOS, a UITableView is used to implement the long list container, and the rendering is performed in the following manner:

[0006] Step SA.1: Create a long list component of React-native;

[0007] Step SA.2: Create a UITableView of iOS, which includes a pull-up loading refreshFooter and a pull-down refresh refreshHeader;

[0008] Step SA.3: Obtain the data source from React-native;

[0009] Step SA.4: Hand over the data source to tableViewDataSource for parsing, and the parsed data is handed over to the layout rendering of UITableView. UITableView will judge whether to render the tableViewHeader at the head and the tableViewFooter at the tail according to the result of tableViewDataSource;

[0010] Step SA.5: UITableView passes the parsed data source to tableViewCell;

[0011] Step SA.6: The UITableView is rendered according to the data source, and the tableViewDelegate notifies the UITableView to determine the heights of the tableVIewCell, tableViewHeader, and tableViewFooter based on the data parsed by the tableViewDataSource.

[0012] Step SA.7: The tableViewCell passes back the individual data source within its own cell to the long list component of React-native.

[0013] Step SA.8: The long list component of React-native is rendered based on the data source received from the tableViewCell.

[0014] The tableViewDataSource is the data source for rendering each row of the UITableView. It receives a two-dimensional array from the React-native business layer. Each array element becomes a session, and each element within the session is the data source for each row. By parsing the data of the data source, it determines the grouping structure during the UITableView rendering, whether the header and footer need to be displayed, and the data that needs to be rendered for the tableViewCell.

[0015] The tableViewHeader is used to render the header for each session of the UITableView. It internally loads an RCTView, which is used to load the page that has been registered in the React-native part during initialization.

[0016] The tableViewFooter is used to render the footer for each session of the UITableView. It internally loads an RCTView, which is used to load the page that has been registered in the React-native part during initialization.

[0017] The tableViewCell is used to render the data for each row of the UITableView. It internally loads an RCTView, which is used to load the page that has been registered in the React-native part during initialization.

[0018] The tableViewDelegate is used to handle the rendering and interaction of the UITableView.

[0019] The `refreshHeader` is used to display the waiting effect at the top when the UITableView is pulled down for refreshing;

[0020] The `refreshFooter` is used to display the waiting effect at the bottom when the UITableView is pulled up for loading;

[0021] Among them, the interaction between the iOS and React-native business layers is implemented through the RCTBridgeModule interface.

[0022] Preferably, the intelligent terminal operating system includes android. For the native modules of android, the RecyclerView is used to implement the long list container, and the rendering is performed in the following manner:

[0023] Step SB.1: Create a long list component of React-native;

[0024] Step SB.2: Create a RecyclerView of android;

[0025] Step SB.3: Obtain the data source from React-native;

[0026] Step SB.4: The ListManager parses the data source and performs data processing;

[0027] Step SB.5: Android determines the rendering content according to the parsed data;

[0028] Step SB.6: The RecyclerView renders each row of data according to the ListAdapter;

[0029] Step SB.7: The ListAdapter passes each row of data source back to the long list component of React-native;

[0030] Step SB.8: The long list component of React-native renders according to the data source received from the tableViewCell;

[0031] The `ReactView` is used as the list element container and is controlled by the ListAdapter to load the content;

[0032] The `ListAdapter` is used to manage the rendering content and click interaction of the ReactView;

[0033] The ListManager is used to process the data received by the RecyclerView, expand the received two-dimensional array to form the corresponding header, row, and footer data sources, and is responsible for handling the sliding interaction, pull-up loading, and pull-down refresh events of the RecyclerView;

[0034] The android bridging communication module is responsible for the communication and interaction between the android native part and React-native.

[0035] Preferably, React-native includes a React-native business layer; the React-native business layer completes the part of the unified external api in the react-native layer; the react-native layer refers to the application of React-native;

[0036] The React-native business layer implements the unified external api, is responsible for integrating the functions of the native modules and exposing them to the outside world. Through the UIManager provided by React-native, it passes the interaction events of the React-native layer back to the native and passes the native interaction events back to the React-native layer;

[0037] The React-native business layer realizes the communication and docking with the native modules, provides data processing methods externally, processes the React-native data into the form of a two-dimensional array, and passes the processed information back to the corresponding native modules through the react-bridge provided by React-native for rendering processing;

[0038] The React-native business layer realizes the long list TableList component in the React-native layer and directly uses it in the form of tags in the React-native layer.

[0039] A React-native long list processing system provided by the present invention includes React-native and an intelligent terminal operating system;

[0040] The native module of the intelligent terminal operating system parses the data source from React-native, and the parsed data source is passed back to the long list component in the React-native layer, and the long list component renders according to the parsed data source.

[0041] Preferably, the intelligent terminal operating system includes iOS. For the native module of iOS, a UITableView is used to implement the long list container,

[0042] The UITableView includes tableViewDataSource, tableViewHeader, tableViewFooter, tableViewCell, tableViewDelegate, refreshHeader, and refreshFooter;

[0043] The data source from React-native is handed over to tableViewDataSource for parsing, and the parsed data is handed over to the layout rendering of UITableView. Among them, UITableView will judge whether to render the header tableViewHeader and the footer tableViewFooter according to the result of tableViewDataSource;

[0044] UITableView passes the parsed data source to tableViewCell;

[0045] UITableView renders according to the data source, and tableViewDelegate notifies UITableView to determine the heights of tableVIewCell, tableViewHeader, and tableViewFooter according to the data parsed by tableViewDataSource;

[0046] tableViewCell passes the individual data source within its own cell back to the long list component of React-native;

[0047] The long list component of React-native renders according to the data source received from tableViewCell;

[0048] The tableViewDataSource is used to render the data source for each row of UITableView. What is received from the React-native business layer is a two-dimensional array, where each array element becomes a session, and each element within the session is the data source for each row. By parsing the data of the data source, it determines the grouping structure during the rendering of UITableView and whether the header and footer need to be displayed, and also determines the data that needs to be rendered by tableViewCell;

[0049] The tableViewHeader is used to render the header of each session of the UITableView. It internally loads an RCTView, which is used to load the pages that have been registered in the React-native part during initialization.

[0050] The tableViewFooter is used to render the footer of each session of the UITableView. It internally loads an RCTView, which is used to load the pages that have been registered in the React-native part during initialization.

[0051] The tableViewCell is used to render the data of each row of the UITableView. It internally loads an RCTView, which is used to load the pages that have been registered in the React-native part during initialization.

[0052] The tableViewDelegate is used to handle the rendering and interaction of the UITableView.

[0053] The refreshHeader is used to display the waiting effect at the top when the UITableView is pulled down for refreshing.

[0054] The refreshFooter is used to display the waiting effect at the bottom when the UITableView is pulled up for loading.

[0055] Among them, the interaction between the iOS and React-native business layers is achieved through the RCTBridgeModule interface.

[0056] Preferably, the intelligent terminal operating system includes android. For the native modules of android, the RecyclerView is used to implement the long list container.

[0057] The RecyclerView includes a ReactView, a ListAdapter, and a ListManager.

[0058] The ListManager parses the data source from React-native and performs data processing.

[0059] Android determines the rendering content according to the parsed data.

[0060] The RecyclerView renders each row of data according to the ListAdapter.

[0061] ListAdapter passes each row of data back to the React-native long list component;

[0062] React-native's long list component renders based on the data source received from tableViewCell;

[0063] The ReactView acts as a list element container, and ListAdapter controls the loading of content;

[0064] The ListAdapter is used to manage ReactView rendering content and click interaction;

[0065] The ListManager is used to process the data received by RecyclerView, expand the received two-dimensional array to form the corresponding header, row, and footer data sources, and is responsible for handling the sliding interaction, pull-up loading, and pull-down refresh events of RecyclerView;

[0066] The Android bridge communication module is responsible for communication and interaction between the Android native part and React-native.

[0067] Preferably, React-native includes a React-native business layer; the React-native business layer completes the part of the React-native layer that unifies the external API; the React-native layer refers to the React-native application;

[0068] The React-native business layer implements a unified external API, is responsible for integrating the functions of native modules and exposing them to the outside world, and transmits interaction events from the React-native layer back to the native layer and vice versa through the UIManager provided by React-native.

[0069] The React-native business layer implements communication with native modules, provides external data processing methods, processes React-native data into a two-dimensional array, and transmits the processed information back to the corresponding native module through React-native's built-in react-bridge for rendering;

[0070] The React-native business layer implements the React-native layer's long list TableList component, which is directly used in the React-native layer in the form of tags.

[0071] A computer-readable storage medium storing a computer program, wherein when the computer program is executed by a processor, the steps of the React-native long list processing method are implemented.

[0072] An electronic device provided according to the present invention includes a memory, a processor, and a computer program stored on the memory and executable on the processor. When the computer program is executed by the processor, the steps of the React-native long list processing method are implemented.

[0073] Compared with the prior art, the present invention has the following beneficial effects:

[0074] 1. The present invention realizes the React-native long list function in a native bridging manner, ensuring that the long list has both the development experience of React-native and the smooth performance of the native.

[0075] 2. The present invention uses a native module to implement the long list base. React-native passes the long list data to the native module, and the native module loads the content of React-native by itself, thereby solving the problems of low refresh frame rate and white screen of the React-native long list.

[0076] 3. The present invention does not rely on the implementation of a rendering file. The page layout is obtained by parsing the data source, and the data source is passed from the react layer. The business update is the page layout update, and there is no decoupling between the data source and the rendering file. BRIEF DESCRIPTION OF THE DRAWINGS

[0077] By reading the detailed description of the non-restrictive embodiments with reference to the following drawings, other features, objects, and advantages of the present invention will become more apparent:

[0078] Figure 1 It is a schematic diagram of the process steps of the preferred embodiment of the present invention for iOS.

[0079] Figure 2 It is a schematic diagram of the process steps of the preferred embodiment of the present invention for android. DETAILED DESCRIPTION OF THE INVENTION

[0080] The present invention will be described in detail below with reference to specific embodiments. The following embodiments will help those skilled in the art to further understand the present invention, but do not limit the present invention in any form. It should be noted that those of ordinary skill in the art can make several changes and improvements without departing from the concept of the present invention. These all belong to the protection scope of the present invention.

[0081] A long list is a list that returns multiple pieces of data at once for the front-end to render. The present invention implements the React-native long list function in a native bridging manner, ensuring that the long list has both the React-native development experience and the smooth performance of the native. In addition, the present invention solves the problems of low refresh frame rate and white screen in the React-native long list by using a native module to implement the long list base, and React-native passes the long list data to the native module, which then loads the React-native content by itself.

[0082] Next, according to a solution for React-native long list provided by the present invention, it will be described from three parts: the native iOS module, the native android module, and the React-native business layer module.

[0083] First, the native iOS module will be described as the first preferred embodiment. The UITableView (which can be abbreviated as tableView) is used to implement the long list container. The UITableView includes tableViewDataSource, tableViewHeader, tableViewFooter, tableViewCell, tableViewDelegate, refreshHeader, and refreshFooter.

[0084] The tableViewDataSource is used to render the data source for each row of the UITableView. What is received from the React-native business layer module is a two-dimensional array, where each array element becomes a session (the session mentioned later is the same). Each element within the session is the data source for each row. By parsing the data in the data source, the grouping structure when the UITableView is rendered and whether the header / footer needs to be displayed can be determined, and it can also determine what data needs to be rendered in the tableViewCell, etc.

[0085] The tableViewHeader is used to render the header for each session of the UITableView. It internally loads an RCTView, which is used to load the page that has been registered in the React-native part during initialization.

[0086] The `tableViewFooter` is used to render the footer of each session of the `UITableView`. It internally loads an `RCTView` which is used to load the pages that have been registered in the React-native part during initialization.

[0087] The `tableViewCell` is used to render the data of each row of the `UITableView`. It internally loads an `RCTView` which is used to load the pages that have been registered in the React-native part during initialization.

[0088] The `tableViewDelegate` is used to handle the rendering and interaction issues of the `UITableView`, such as the heights of each cell, footer, and header, the click events of the cell, footer, and header, and the sliding events of the `UITableView`, etc.

[0089] The `refreshHeader` is used to display the waiting effect at the top when the `UITableView` is pulled down for refreshing.

[0090] The `refreshFooter` is used to display the waiting effect at the bottom when the `UITableView` is pulled up for loading.

[0091] The iOS bridging communication module is responsible for the communication and interaction between the iOS native part and React-native. Among them, the interaction between the iOS and React-native business layer modules is achieved through the `RCTBridgeModule` interface.

[0092] The rendering process of the `tableView` is as Figure 1 shown:

[0093] Step SA.1: Create a long list component in React-native;

[0094] Step SA.2: Create an `iOS` `UITableView` which includes the `refreshFooter` for pulling up to load and the `refreshHeader` for pulling down to refresh;

[0095] Step SA.3: Obtain the data source from React-native;

[0096] Step SA.4: Parse according to the data source by tableViewDataSource, and hand the parsed data to the layout rendering of UITableView. UITableView will judge whether to render tableViewHeader (header) and tableViewFooter (footer) according to the result of tableViewDataSource;

[0097] Step SA.5: UITableView passes the parsed data source to tableViewCell;

[0098] Step SA.6: UITableView renders according to the data source. tableViewDelegate will notify UITableView to determine the heights of tableVIewCell, tableViewHeader, and tableViewFooter according to the data parsed by tableViewDataSource;

[0099] Step SA.7: tableViewCell passes the individual data source within its cell back to the long list component of React-native;

[0100] Step SA.8: The long list component of React-native renders according to the data source received from tableViewCell.

[0101] Then the native android module will explain the present invention as the second preferred embodiment. RecyclerView is used to implement the long list container. The RecyclerView includes ReactView, ListAdapter (abbreviated as adapter for short), and ListManager (abbreviated as manager for short)

[0102] The ReactView is used as the container for list elements. Since RecyclerView has no concept of header and footer, ReactView is uniformly used as the container for list elements, and the content loading is controlled by ListAdapter.

[0103] The ListAdapter is used to manage the rendering content and click interaction of ReactView.

[0104] The ListManager is used to process the data received by the RecyclerView, expand the received two-dimensional array to form corresponding header, row, and footer data sources, and is responsible for handling events such as the sliding interaction, pull-up loading, and pull-down refreshing of the RecyclerView.

[0105] The android bridging communication module is responsible for the communication and interaction between the android native part and React-native.

[0106] The rendering process of the RecyclerView is as Figure 2 shown:

[0107] Step SB.1: Create a long list component in the React-native layer;

[0108] Step SB.2: Create an android RecyclerView;

[0109] Step SB.3: Obtain the data source from React-native;

[0110] Step SB.4: The ListManager parses the data source and performs data processing;

[0111] Step SB.5: Android determines the rendering content based on the parsed data;

[0112] Step SB.6: The RecyclerView renders each row of data according to the ListAdapter;

[0113] Step SB.7: The ListAdapter passes each row of data source back to the long list component in React-native;

[0114] Step SB.8: The long list component in React-native renders based on the data source received from the tableViewCell.

[0115] Next, the React-native business layer module will be described in detail as the third preferred embodiment. The third preferred embodiment can be used as a supplement to the first preferred embodiment or as a supplement to the second dotted-line embodiment. In the third preferred embodiment, the following method is adopted:

[0116] Step SC.1: Implement a unified external API, which is responsible for integrating the functions of native modules and exposing them to the outside world. According to the characteristics of the native side, it provides callable events such as line element click events, list sliding events, pull-up loading events, pull-down refresh events, and control of sliding to a certain position. Through the UIManager provided by React-native, the interaction events of the React-native layer are passed back to the native side and the native interaction events are passed back to the React-native layer;

[0117] Step SC.2: Implement communication docking with native modules and provide data processing methods externally. It is necessary to process the data of React-native into a two-dimensional array form and describe specific information such as the registration name of each React-native component and the expected rendering component height. The processed information is passed back to the corresponding native module for rendering processing through the react-bridge provided by React-native.

[0118] Step SC.3: Implement the long list TableList component in the React-native layer, which can be directly used in the React-native layer in the form of tags.

[0119] React-native refers to the React-native framework.

[0120] The React-native layer, abbreviated as the react layer, refers to a React-native application. Excluding the native part, it is the business logic layer implemented in the code of react and js.

[0121] The React-native business layer refers to the implementation logic for docking with the native side and completing the part of the unified external API in the React-native layer.

[0122] Those skilled in the art know that in addition to implementing the systems, devices, and their respective modules provided by the present invention in the form of pure computer-readable program code, the method steps can be logically programmed to enable the systems, devices, and their respective modules provided by the present invention to be implemented in the form of logic gates, switches, application-specific integrated circuits, programmable logic controllers, and embedded microcontrollers to achieve the same program. Therefore, the systems, devices, and their respective modules provided by the present invention can be considered as a kind of hardware component, and the modules included therein for implementing various programs can also be regarded as the structure within the hardware component; the modules for implementing various functions can also be regarded as both software programs for implementing methods and the structure within the hardware component.

[0123] The specific embodiments of the present invention have been described above. It should be understood that the present invention is not limited to the above specific embodiments, and those skilled in the art can make various changes or modifications within the scope of the claims, which do not affect the essence of the present invention. Without conflict, the embodiments of the present application and the features in the embodiments can be arbitrarily combined with each other.

Claims

1. A method for processing long lists in React-native, characterized in that, The native module of the intelligent terminal operating system parses the data source from React-native, and the parsed data source is passed back to the long list component in the React-native layer, and the long list component is rendered according to the parsed data source; React-native includes the React-native business layer; the React-native business layer completes part of the unified external API in the react-native layer; the react-native layer refers to the application of React-native; The React-native business layer implements a unified external API, is responsible for integrating the functions of the native module and exposing them to the outside world. Through the UIManager provided by React-native, the interaction events in the React-native layer are passed back to the native side and the native interaction events are passed back to the React-native layer; The React-native business layer realizes communication docking with the native module, provides data processing methods externally, processes the data of React-native into a two-dimensional array form, and passes the processed information back to the corresponding native module through the react-bridge provided by React-native for rendering processing; The React-native business layer implements the long list TableList component in the React-native layer and directly uses it in the form of tags in the React-native layer.

2. The React-native long list processing method according to claim 1, wherein The intelligent terminal operating system includes iOS. For the native module of iOS, a UITableView is used to implement the long list container, and the rendering is performed in the following way: Step SA.1: Create a long list component of React-native; Step SA.2: Create a UITableView for iOS, which includes a pull-up loading refreshFooter and a pull-down refresh refreshHeader; Step SA.3: Obtain the data source from React-native; Step SA.4: Hand the data source to tableViewDataSource for parsing, and the parsed data is handed to the layout rendering of UITableView. UITableView will judge whether to render the tableViewHeader at the head and tableViewFooter at the tail according to the result of tableViewDataSource; Step SA.5: UITableView passes the parsed data source to tableViewCell; Step SA.6: The UITableView is rendered according to the data source, and the tableViewDelegate notifies the UITableView to determine the heights of the tableVIewCell, tableViewHeader, and tableViewFooter based on the data parsed by the tableViewDataSource; Step SA.7: The tableViewCell passes the individual data source within its own cell back to the long list component of React-native; Step SA.8: The long list component of React-native is rendered based on the data source received from the tableViewCell; The tableViewDataSource is the data source for rendering each row of the UITableView. It receives a two-dimensional array from the React-native business layer. Each array element becomes a session, and each element within the session is the data source for each row. By parsing the data of the data source, it determines the grouping structure during the rendering of the UITableView and whether the header and footer need to be displayed, and also determines the data to be rendered by the tableViewCell; The tableViewHeader is used to render the header of each session of the UITableView. It internally loads an RCTView, which is used to load the page that has been registered in the React-native part during initialization; The tableViewFooter is used to render the footer of each session of the UITableView. It internally loads an RCTView, which is used to load the page that has been registered in the React-native part during initialization; The tableViewCell is used to render the data of each row of the UITableView. It internally loads an RCTView, which is used to load the page that has been registered in the React-native part during initialization; The tableViewDelegate is used to handle the rendering and interaction of the UITableView; The refreshHeader is used to display the waiting effect at the top when the UITableView is pulled down for refreshing; The refreshFooter is used to display the waiting effect at the bottom when the UITableView is pulled up for loading; Among them, the interaction between iOS and the React-native business layer is achieved through the RCTBridgeModule interface.

3. The React-native long list processing method according to claim 1, characterized in that The intelligent terminal operating system includes android. For the native modules of android, the RecyclerView is used to implement the long list container, and the rendering is performed in the following way: Step SB.1: Create a React-native long list component. Step SB.2: Create an Android RecyclerView. Step SB.3: Get the data source from React-native; Step SB.4: ListManager parses the data source and processes the data; Step SB.5: Android determines the rendering content based on the parsed data; Step SB.6: RecyclerView renders each row of data according to the ListAdapter; Step SB.7: The ListAdapter passes each row of the data source back to the React-native long list component; Step SB.8: The React-native long list component renders based on the data source received from tableViewCell; ReactView is used as a container for list elements, and ListAdapter controls the loading of content; The ListAdapter is used to manage ReactView rendering content and click interaction; The ListManager is used to process the data received by RecyclerView, expand the received two-dimensional array to form the corresponding header, row, and footer data sources, and is responsible for handling the sliding interaction, pull-up loading, and pull-down refresh events of RecyclerView; The Android bridge communication module is responsible for communication and interaction between the Android native part and React-native.

4. A React-native long list processing system, characterized in that, Including React-native and smart terminal operating systems; The native module of the smart terminal operating system parses the data source from React-native, and transmits the parsed data source back to the long list component of the React-native layer. The long list component renders according to the parsed data source. React-native includes the React-native business layer; the React-native business layer completes the part of the React-native layer that unifies the external API; the React-native layer refers to the React-native application; The React-native business layer implements a unified external API, is responsible for integrating the functions of native modules and exposing them to the outside world, and transmits interaction events from the React-native layer back to the native layer and vice versa through the UIManager provided by React-native. The React-native business layer implements communication with native modules, provides external data processing methods, processes React-native data into a two-dimensional array, and transmits the processed information back to the corresponding native module through React-native's built-in react-bridge for rendering; The React-native business layer implements the React-native layer long list TableList component and directly uses it in the form of tags in the React-native layer.

5. The React-native long list processing system according to claim 4, characterized in that The intelligent terminal operating system includes iOS. For the native modules of iOS, UITableView is used to implement the long list container. The UITableView includes tableViewDataSource, tableViewHeader, tableViewFooter, tableViewCell, tableViewDelegate, refreshHeader, and refreshFooter. The data source from React-native is handed over to tableViewDataSource for parsing, and the parsed data is handed over to the layout rendering of UITableView. Among them, UITableView will judge whether to render the header tableViewHeader and the footer tableViewFooter according to the result of tableViewDataSource. UITableView passes the parsed data source to tableViewCell. UITableView renders according to the data source, and tableViewDelegate notifies UITableView to determine the heights of tableVIewCell, tableViewHeader, and tableViewFooter according to the data parsed by tableViewDataSource. tableViewCell passes the individual data source within its own cell back to the React-native long list component. The React-native long list component renders according to the data source received from tableViewCell. The tableViewDataSource is used to render the data source for each row of UITableView. What is received from the React-native business layer is a two-dimensional array, where each array element becomes a session, and each element within the session is the data source for each row. By parsing the data of the data source, it determines the grouping structure when UITableView renders and whether the header and footer need to be displayed, and determines the data that tableViewCell needs to render. The tableViewHeader is used to render the header for each session of UITableView. It internally loads an RCTView, which is used to load the page that has been registered in the React-native part during initialization. The tableViewFooter is used to render the footer of each session of the UITableView. It internally loads an RCTView, which is used to load the pages that have been registered in the React-native part during initialization; The tableViewCell is used to render the data of each row of the UITableView. It internally loads an RCTView, which is used to load the pages that have been registered in the React-native part during initialization; The tableViewDelegate is used to handle the rendering and interaction of the UITableView; The refreshHeader is used to display the waiting effect at the top when the UITableView is pulled down for refreshing; The refreshFooter is used to display the waiting effect at the bottom when the UITableView is pulled up for loading; Among them, the interaction between the iOS and React-native business layers is realized through the RCTBridgeModule interface.

6. The React-native long list processing system according to claim 4, characterized in that The intelligent terminal operating system includes android. For the native modules of android, the RecyclerView is used to implement the long list container; The RecyclerView includes ReactView, ListAdapter, and ListManager; The ListManager parses the data source from React-native and performs data processing; android determines the rendering content according to the parsed data; The RecyclerView renders each row of data according to the ListAdapter; The ListAdapter passes the data source of each row back to the long list component of React-native; The long list component of React-native renders according to the data source received from the tableViewCell; The ReactView serves as the list element container and is controlled by the ListAdapter to load the content; The ListAdapter is used to manage the rendering content and click interaction of the ReactView; The ListManager is used to process the data received by the RecyclerView, expand the received two-dimensional array to form the corresponding header, row, and footer data sources, and is responsible for handling the sliding interaction, pull-up loading, and pull-down refreshing events of the RecyclerView; The android bridge communication module is responsible for the communication and interaction between the android native part and React-native.

7. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the steps of the React-native long list processing method described in any one of claims 1 to 3.

8. An electronic device, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, When the computer program is executed by the processor, it implements the steps of the React-native long list processing method described in any one of claims 1 to 3.

Images