CN107045438B

CN107045438B - Application top view processing method, device and component

Info

Publication number: CN107045438B
Application number: CN201611166798.2A
Authority: CN
Inventors: 牟强
Original assignee: Alibaba Group Holding Ltd
Current assignee: Advanced New Technologies Co Ltd; Advantageous New Technologies Co Ltd
Priority date: 2016-12-16
Filing date: 2016-12-16
Publication date: 2020-03-27
Anticipated expiration: 2036-12-16
Also published as: CN107045438A

Abstract

The embodiment of the application discloses a method, a device and a component for processing an application top view. The method comprises the following steps: monitoring events added and removed by a top-level view in a react-native application; monitoring and acquiring the transmitted operation parameters of the triggering event when the triggering event is triggered, and processing the operation parameters by using a re-realized module registration method of a real-native application page entrance; and returning the application view processed by the operation parameters. By utilizing the embodiments of the application, the top-level view can be dynamically added in a cross-platform mode through the simple front-end javascript code, developers can quickly, efficiently and conveniently add and delete the top-level view of the application, the learning cost and the development period are reduced, and the application development efficiency and the operation experience of the developers are improved.

Description

Application top view processing method, device and component

Technical Field

The application belongs to the technical field of data processing of terminal application development, and particularly relates to a method, a device and a component for processing an application top view.

Background

The fact Native (RN) is a cross-platform mobile application development framework sourced from Facebook in 2015 4, is a derivative product of the UI framework React sourced from Facebook in the Native mobile application platform, and currently supports iOS and android platforms. The RN develops the mobile application by using Javascript (JS for short), JSX similar to HTML and CSS, so that native application development can be quickly realized by technical personnel developing Web front end by using the RN.

The RN comprises a primary main thread and a JS thread during running, the JS thread executes the JS codes and is responsible for interface layout and business logic processing, and the primary thread is responsible for interface rendering and primary function execution. In the process of real Native application development, top-level views are often required to be inserted into an application or inserted view operations are required to be deleted according to design requirements. The react-native provides UIManager objects that provide createView, which can create a top-level view, and manageChildren, which does not remove the created elements. JavaScript is a script language that does not undergo operations such as compiling and linking, but performs lexical and syntactic analyses dynamically at runtime to generate Abstract Syntax Trees (AST) and bytecodes, and then is executed by an interpreter or converted into machine code by JIT. The whole process is completed by the JavaScript engine. For a Web front-end development technician using RN, if the view can be dynamically added across platforms through pure javascript codes without writing native platform codes, the development, design and application of the native platform agent can be efficiently and quickly learned without deep learning, and the view dynamic layout and operation capability of the development technician are greatly improved.

The real Native application carries out application development on the basis of a real framework, and the current real Native does not provide a method for dynamically inserting a top view into the application and removing an inserted corresponding view through pure Javascript codes. Once the Reactnative application is generated and run, in order to dynamically add a view to the top layer of the application without a reference point, a native code module is written by each mobile phone system (iOS) to provide a javascript interface for implementation. In an existing method, native system module codes can be written in a system (iOS, android or other systems subsequently supported by reactive native) corresponding to development and application, and then a native module is referred by the native module of the reactive native, so that creation of a top-level view and deletion of the created top-level view can be realized. Obviously, the method needs technical personnel of Web front-end development to understand and deeply learn the native platform codes of swift, objective-c, java and the like, and then compile a native code module and the like, thereby greatly increasing the learning cost and the development period and reducing the application development efficiency.

Disclosure of Invention

The application top view processing method, device and component can dynamically add top views across platforms through simple front-end javascript codes in the reactive-native application UI design, developers do not need to write module codes of a native system, the top views of applications can be added and deleted quickly, efficiently and conveniently, the learning cost and the development period are reduced, and the application development efficiency and the operation experience of the developers are improved.

The application top view processing method, device and component provided by the application are realized as follows:

monitoring events added and removed by a top-level view in a react-native application;

monitoring and acquiring the transmitted operation parameters of the event when the event is triggered, and processing the operation parameters by using a re-realized module registration method of a real-native application page entrance;

and returning the application view processed by the operation parameters.

An application top layer processing device comprises:

a processor and a memory for storing processor-executable instructions,

the processor is configured to monitor events of adding and removing top-level views in a react-native application; acquiring the operation parameters of the event when the event is monitored to be triggered, and processing the operation parameters by using a module registration method of a re-realized act-native application page entrance; and the application view after the operation parameter processing is returned.

An application layer processing component configured to, comprising:

reserving an occupation gap of a top-level view in a root module registration method of a real-native application page, and setting the top-level view initially reserved in the occupation gap to be empty; setting a code implementation mode for monitoring the events of view addition and removal in real time and the events of view addition and removal in the root module registration method; creating an interface for adding and deleting a top view to a react-native application through a javascript code; and the number of the first and second groups,

and when an event triggering the addition/deletion of the top-level view of the exact-native application is monitored, adding/deleting the top-level view of the exact-native application through the interface.

According to the application top-level view processing method, device and component, the occupation gap of the top-level view is reserved in advance by a method for re-realizing the application root module registration in the reactive-native (the module registered by the method is used as the inlet of the reactive-native application, and the view page can be rendered from the inlet module). When the top-level view needs to be inserted, the top-level view of the reactive-native application can be added by transferring the view elements of the top-level view and then rendering the view added by the original view and the placeholder in the application. The embodiment of the application provides a simple interface for adding and deleting the top view to the react-native application by the front-end code such as the javascript code, so that the top view can be inserted into the application by the code familiar to the developer, the developer can quickly, efficiently and conveniently add and delete the top view of the application without writing module codes (such as swift, objective-c, java and the like) of a native system, the learning cost and the development period are reduced, and the application development efficiency and the operation experience of the developer are improved.

Drawings

In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, it is obvious that the drawings in the following description are only some embodiments described in the present application, and for those skilled in the art, other drawings can be obtained according to the drawings without any creative effort.

FIG. 1 is a flowchart of a method of one embodiment of a method for processing an application top-level view provided herein;

FIG. 2 is a flow diagram illustrating one embodiment of creating a referencing object provided herein;

fig. 3 is a schematic structural diagram of an APP interface layer for implementing an embodiment of the present application;

fig. 4 is a schematic block structure diagram of an embodiment of an apparatus for processing a top layer provided in the present application.

Detailed Description

In order to make those skilled in the art better understand the technical solutions in the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

FIG. 1 is a flowchart of a method of an embodiment of a method for processing a top-level view of an application according to the present application. Although the present application provides the method operation steps or apparatus structures as shown in the following embodiments or figures, more or less operation steps or module units after partial combination may be included in the method or apparatus based on conventional or non-inventive labor. In the case of steps or structures which do not logically have the necessary cause and effect relationship, the execution sequence of the steps or the module structure of the apparatus is not limited to the execution sequence or the module structure shown in the embodiment or the drawings of the present application. When the described method or module structure is applied to a practical device or an end product, the method or module structure according to the embodiment or the figures may be executed sequentially or executed in parallel (for example, in the environment of parallel processors or multi-thread processing, or even in the environment of distributed processing).

For clarity, a specific implementation scenario for developing and designing a mobile phone application UI using a reactive-native will be described below. However, those skilled in the art will appreciate that the substantial spirit of the present solution may be applied to other scenarios where a reactive-native application adds or deletes added top-level views. Namely, by re-realizing the root module registration method of the act-native application page entry, a simple interface for adding and deleting the top view to the act-native application by the front-end javascript code is provided, the top view can be dynamically added across platforms by the front-end javascript familiar to developers, deep learning and compiling of module codes of a native system are not needed, the top view of the application is quickly, efficiently and conveniently added and deleted, the learning cost and the development period are reduced, and the application development efficiency and the operation experience of the developers are improved.

In a specific embodiment, as shown in fig. 1, in an embodiment of an application top-level view processing method provided by the present application, the method may include:

s1: and monitoring events added and removed by the top-level view in the reactive-native application.

The method and the device for monitoring the view operation events can monitor the view operation events in real time in the real-native application UI page development design. Notifications may be obtained when a developer invokes a method to add or remove a view. The notification event for adding and removing the view can be set at a buried point in the original application page entry registration method of the react-native application in advance, for example, in this embodiment, the notification event can be implemented by setting some functions of the react-native, such as a deviceeventemeritter. In one embodiment, listening to all view operation events, such as adding top view, removing middle view, interchanging positions between layers, etc., may be set. Of course, in one implementation, it may also be configured to monitor only events added and removed from the top view in the reactive-native application, and no attention may be paid to other events, such as layer movement of the application layer middle view.

In a specific example of this embodiment, app registry is an object in a real-native, register component is a method in the object, and events for adding and removing a listening view can be set in a method to be presented by the register component, as shown below;

in this way, events for monitoring the addition and removal of views are added, and can be notified when a method for adding or removing views is called, so that corresponding events are triggered.

S2: and acquiring the transmitted operation parameters of the event when the event is triggered, and processing the operation parameters by using a re-realized module registration method of a real-native application page entrance.

The specific implementation manner may include setting all view operation events in the monitoring active-native application view development design, and triggering the event of adding or removing the top-level view when determining that the target object of adding or deleting the view is the top-level view, so as to obtain a notification. Of course, it may be set that no response is made when the operation events of other intermediate views are monitored. Or in another embodiment, it may be set to only listen for calls to add or remove top level view methods or to trigger the event. The specific design method can be set by operators according to development environment and design requirements. After the monitored event is set, a method for adding and removing the top-level view can be set at the same time, and the purpose of the method comprises adding or removing the added top-level view of the reactive-native application in a module registration method for operating the application view.

In the embodiment of the application, a developer can create a reference object for adding or deleting the code used by the top-level view, and the developer can directly transmit the operation parameters of the top-level view to the developer by using a function matched with the created reference object. Generally, the transmitting the actual operation parameters to the created referencing object when the triggering event is intercepted in the embodiment of the present application may include triggering an application scenario of the event when a view operation method set in the referencing object is called/loaded/referenced. Then further, a set adding top view method and a remove adding top view method can be provided, and when an event triggering the top view adding or removing is monitored, the adding or removing of the top view can be realized by the following steps:

setTopView(element){

this.setState({element:element})；

}

the element in the code is an inserted top-level view element module, and set is expressed as an operation function for adding the top-level view.

Alternatively, the first and second electrodes may be,

removeTopView(){this.setState({elment:null})；

null in the above code is to blank the top view, and remove is represented as an operation function to remove the top view.

In this embodiment, an interface for adding and removing a top-level view by an external opener (job) using a simple front-end code may be provided by using a module registration method of a re-implemented real-native application page entry. In a specific embodiment, a reference object may be created by using a module registration method of a re-implemented reactive-native application page entry, where the reference object may include a reference object created in advance by re-implementing the module registration method of the reactive-native application page entry, and the reference object may be loaded and called by a developer using a corresponding javascript, so as to implement addition or deletion of a top-level view by directly referencing the reference object.

The operation implementation method of the created reference object and the view in the object is provided by the embodiment of the application after encapsulation and is not provided by a reactive-native authority. An implementation manner of the reference object described in this embodiment may include creating a reference object after rewriting a call of an entry method of a native view in a real-native application, where the reference object may include an original view of the real-native application, and a place-occupying gap of a top-level view is reserved above the original view. And when the top-level view needs to be inserted, loading and referencing the referenced object by using the code corresponding to the referenced object, and inserting the view at the position of the place-occupying gap to finish adding the real-native application top-level view.

The real-native uses javascript as an engine, and the native component provided by the real-native can be called in the javascript environment after being processed and packaged. In this way, in the process of application development by a cross-platform based on a react frame provided by a react-native, the component encapsulated by JS (javascript for short) can support the module registration method for realizing the react-native application page entry again, which may include providing an interface for inserting or deleting a top-level view into the react-native application by using JS codes. Of course, this application does not exclude other embodiments in which the implementation of inserting the top-level view into the reactive-native application by using other development language codes is achieved by rewriting the module registration method of the page entry of the reactive-native application. The insertion or deletion of the top level view into the react-native application is for example achieved by a pure Objective-C code referencing the referencing object. Therefore, in an embodiment of the present application, an interface for adding and deleting a top-level view to the react-native application through javascript code may be provided. In a specific embodiment, the module registration method for the re-implemented act-native application page entry may include:

s201: reserving an occupation gap of a top-level view in a root module registration method of a real-native application page, and setting the top-level view initially reserved in the occupation gap to be empty;

s202: setting a trigger event of view operation of the place-occupying gap and a layer rendering method of the view at the place-occupying gap, and creating an interface for adding and deleting a top-layer view to the reactive-native application through a javascript code.

AppRegistry is an object in the real-native, register component is a method in the object, which functions as a root module for registering applications, and a module registered by the method will be used as an entry of an application from which rendering is started. App registry is a portal for JS to run all read Native applications, the root component of an application should register itself through the app registry component method, then the Native system can load the code package of the application and actually run the application after the start is complete by calling app registry. In one method provided by the embodiment of the present application, the appregistry component method can be rewritten in order to preserve a view placeholder in the reactdom. render method. And simultaneously setting triggering and layer rendering methods corresponding to the occupation gap. When the top-level view needs to be inserted, the view elements can be transmitted through the javascript interface created by reference, and the top-level view can be inserted into the reactive-native application through the provided view adding/deleting implementation method.

The React-native takes the act technology as a javascript frame, and the ReactDom is an object in the React frame. The code in the render method will be rendered in the page of the application layer. For example, in one example, a placeholder for one element may be left in ReactDom.

ReactDom.render(<div>123</div>,document.getElementById(‘root’))

The page of the layer after the code execution will display '123'. The purpose of reserving the placeholder in the embodiment of the present application includes that when the top-level view needs to be inserted, the top-level view is inserted at the position (since the register component is an entry, the view inserted by the placeholder is also the top-level view). For example, in a simple example, if the original method implementation was to return "1234", then we re-implement as "() 1234", () i.e. the placeholder. When the top-level view needs to be inserted (assuming that the code is identified as 0), "01234" is used, and when the top-level view is not needed, the placeholder is set to empty or "1234" of the original application view.

Setting an initial view element to null in the Component returned by the application scene in the embodiment, wherein the purpose is to render no view before a method for adding the view is not called, so that the original view display of the application is not influenced;

getInitialState(){return{elemen:null}；}

the concept of null in javascript can understand why none, and therefore not a view layer, exists. When the top-level view needs to be added, the top-level view module component will replace null here; the concept of the top-level view does not exist in the APP view rendered by the native method, and the method provided by the application can insert a layer of view (top-level view) on the view layer in the original APP. Similarly to the zIndex (originally zIndex 1, new zIndex 2, one layer higher);

in an embodiment provided by the present application, the setting of the view operation trigger event of the place-occupying gap and the method for rendering the layer of the view at the place-occupying gap includes:

s2021: setting events for monitoring view addition and removal in real time in the root module registration method, and determining a view operation triggering event for triggering the occupancy gap when the events for triggering the addition or deletion of the top view are monitored; and the number of the first and second groups,

s2022: and setting an implementation mode for rendering the view elements added at the position of the occupancy gap into a view page of the react-native application.

For example, in a method to be presented by Component, events of adding and removing views can be monitored; the purpose of this step is to be notified after the method of adding or removing the view is called, thus trigger the corresponding view operation trigger event;

then, a method for adding and removing events in the monitoring events can be realized, and the purpose is to add or remove a corresponding view at the position occupied;

herein, setTopView and removeTopView are implementation codes of "event added by snoop view" and "event removed by snoop view".

The rendering method in Component is realized as follows, and the purpose is to render the original view and the occupied space in the application;

the javascript object can be further created according to the above re-implemented app registry. The javascript object may provide set and remove methods, wherein the set method triggers an event of adding a view, and an added view element is introduced; the remove method triggers an event that removes a view. A javascript object which can provide an interface for creating and removing a view using the JS code by the above setting;

export default{

set (element) { deviceeventemeiter

remove () { DeviceEventEmitter. emit ('topViewremove') }// trigger view removal event

The set and remove are interfaces really provided for the call of the operator, and the addition and deletion views are called through the js terminal.

The RN uses a javascript language as an engine, so this embodiment may also set a view operation trigger event and an image layer rendering method of the placeholder, and create and form a javascript object, where the javascript object provides an interface for adding and deleting a top view to the react-native application through a javascript code. In an embodiment provided by the present application, the processing the operation parameter by using a module registration method of a re-implemented reactive-native application page entry may include:

s21: inserting, by the module registration method, a top-level view corresponding to the view element at the placeholder location when the operational parameters include an incoming view element; and the number of the first and second groups,

s22: when the operating parameters include removing the top level view, removing, by the module registration method, the top level view added to the placeholder location.

According to the embodiment of the application, a place occupying gap of a top-level view can be reserved by a module registration method of rewriting a real-native application page entry, and a trigger event for adding and removing the top-level view is set. When a trigger event added and removed to the top view is monitored, operation parameters of the trigger event transmitted to the created reference object are obtained, and then the operation parameters can be processed by a module registration method of a re-implemented reactive-native application page entry.

S3: and returning the application view processed by the operation parameters.

And acquiring the operation parameters of the trigger time, determining the execution mode of adding/deleting the top-level view, and adding/removing the top-level view in the reactive-native application by using a view operation method such as set or remove provided by the reference object by referring to the reference object. After the top view is added, the current view of the react-native application after the top view is added or deleted can be realized by using a return method of a module registration method of a native react-native application page entry. Such as adding a new top-level view with 75% transparency, or deleting the previously added top-level view with a LOGO, etc.

In the process of processing the operation parameters, if the view placeholder is reserved as described in the foregoing embodiment scenario, the reference object may be referred to, and a view element is transmitted thereto to add the top-level view, or the added top-level view is removed by the reference object, for example, the top-level view placeholder is set to be empty or not empty. In a specific embodiment, if a root module registration method of a new real-native application pagein is used, and a method for adding and monitoring view adding and removing events, a rendering method of a top-level view and the like are added, a javascript object can be created, and set and remove methods called externally are provided, wherein the set method can be set to trigger the event for adding the view and introduce added view elements; the remove method triggers an event that removes a view. Thus, one example of when processing in particular according to the incoming operating parameters may include:

when the operation parameters comprise the added view elements, inserting a top-level view corresponding to the view elements at the position of the place-occupying gap by a module registration method of a real-native application page entry provided by the reference object;

when the operation parameters comprise the removal of the top-level view, removing the top-level view added to the position of the placeholder through a module registration method of a reactive-native application page entry provided by the reference object.

Therefore, the application top-level view processing method provided by the application realizes the pre-reservation of the place-occupying gap of the top-level view by realizing the method of registering the root module of the application in the reactive-native again. When the top-level view needs to be inserted, the top-level view of the reactive-native application can be added by transferring the view elements of the top-level view and then rendering the view added by the original view and the placeholder in the application. The embodiment of the application provides an interface for adding and deleting the top view to the react-native application by using a simple front-end code such as a javascript code, so that the top view can be inserted into the application by using a code familiar to developers, the developers can quickly, efficiently and conveniently add and delete the top view of the application without writing module codes (such as swift, objective-c, java and the like) of a native system, the learning cost and the development period are reduced, and the application development efficiency and the operation experience of the developers are improved.

In another embodiment of the application top-level view processing method described in the present application, the method of implementing the appregistry. Specifically, in another embodiment of the method of the present application, the reserving a place-occupying gap of the top-level view in the root module registration method of the real-native application pagein may include:

s2011: a reference to the real-native app registry method is saved.

The reference to the real native app registry method is saved in order to not destroy the native method and facilitate the invocation at the next step. In an application scenario of an embodiment of the present application, the following steps may be implemented:

var originRegisterComponent＝AppRegistry.registerComponent；

s2012: reserving an occupation gap of a top-layer view in a root diagram layer parameter of the act-native application AppRegistrationComponent method;

s2013: setting the initial top layer view at the occupancy gap to be empty.

The rewrite AppRegistry register component method aims to preserve the placeholder for an element in the ReactDom render method. The implementation process of saving the original application module and returning to the native method, and returning to ReactComponent in the native method, may be as follows:

in a specific embodiment, reserving a place-occupying hole for inserting into the top-level view can be implemented by the following arrangement:

register component (key, B) as appregister register component (key, (a) + B);

the key is represented as a unique identifier of a parameter object, B is represented as a root view page of a react-native application, () is represented as an occupancy gap, A is represented as a top-level view and is initially empty; (A) + B is denoted return view B and top-level view a of the upper layer of said view B.

Native appregistry. register component method usage: register component (key, B), which may be referred to herein as a unique identifier of a parameter object, B means a root view page referred to as a reactive-native application. Now, in the embodiment of the present application, it is implemented again that B is (a) + B, a is a top layer view, and ((a)) is a placeholder, and when there is no a, B is only a placeholder and B. The embodiment of the application realizes adding the top-level view by re-realizing the register component method and adding the position-occupying gap of the view, and the native method executes AppRRegistry.

For example, in one example, a native application module, i.e., the actual application content, is saved in the method implementation;

const ProjectComponent＝getComponentFunc()；

component is returned with the second argument rewritten for the native method, in order to leave an occupation of the view in Component:

register component (key, (a) + B), the second parameter is the root view, page entry module of the reactive-native application. The entry module is reserved with a footprint of the top view to plug in the top view when needed. getComponentFunc () is actually root view B, since B is the React module, the React module of (A) + B is returned to match the second parameter requirement.

And the initial top-level view at the place-occupying gap may be set to null in the AppRegistry register component method so that the top-level view at the place-occupying gap is not rendered when the method of adding the top-level view is not called.

Setting an initial view element as null (null) in a returned Component, wherein the purpose is to render a view before a method for adding the view is not called, so that the display of a real-native application original view is not influenced, and the following implementation modes can be included;

getInitialState(){return{elemen:null}；}

FIG. 2 is a flow chart illustrating an embodiment of creating a referencing object provided herein. The computer language used may be javascript, the environment implemented may include software iOS or android simulator, and the hardware may include iPhone or android handset. Fig. 3 is a schematic structural diagram of an APP interface layer for implementing the embodiment of the present application. Layer-0 is the top-level view layer we want to add, and is empty by default and non-existent. When a new top layer view needs to be added to the APP interface (APP original top layer view layer-1) that we see, the top layer view can be inserted by using a set method provided after packaging, and the top layer view is covered on the original top layer view layer-1.

The embodiment realizes the occupation gap of the reserved view, and rewrites the register component method, wherein the created objects and the object methods are provided after being packaged and are not provided by a reactive-native authority. When the JS layer invokes the set method here, the view can be added to the previously implemented placeholder. According to the scheme of the embodiment of the application, the function of realizing top-level view operation through the pure JS codes is provided for developers, the middle process of view processing is reduced, the efficiency is greatly improved, and the developers can simply and quickly realize addition or deletion of the real-native application top-level view by using the JS codes across platforms without deeply knowing the languages of the native codes (swift, objective-c, java and the like).

Of course, based on the innovative ideas described in the above method embodiments of the present application, other schemes that re-implement the application registry component method in the real-native and add elements to the method should belong to the scope of the present application. Based on the application top-level view processing method, the application top-level view processing device is further provided. The means may comprise a module/component encapsulated by rewriting the module registration method of the application page entry, in combination with the necessary hardware-implemented means. Based on the same inventive concept, the device in one embodiment provided by the present application is as described in the following embodiment. Because the implementation scheme of the device for solving the problems is similar to that of the method, the implementation of the specific device in the present application can refer to the implementation of the method, and repeated details are not repeated. As used hereinafter, the term "unit" or "module" may be a combination of software and/or hardware that implements a predetermined function. Although the means described in the embodiments below are preferably implemented in software, an implementation in hardware, or a combination of software and hardware is also possible and contemplated. Fig. 4 is a schematic block structure diagram of an embodiment of an apparatus for processing a top layer image layer provided in the present application, and as shown in fig. 4, the apparatus may include:

a processor and a memory for storing processor-executable instructions,

In the apparatus provided by the present application, the processing, by the processor, the operating parameter by using the module registration method may include:

inserting, by the re-implemented module registration method, a top-level view corresponding to the view element at the placeholder location when the operational parameters include an incoming view element;

removing the top-level view added to the placeholder location by the re-implemented module registration method when the operating parameter comprises removing the top-level view.

In this way, according to the application top-level view processing apparatus provided by the application, the method for registering the root module of the application in the reactive-native is implemented again (the module registered by the method is used as the entry of the reactive-native application, and the view page can be rendered from the entry module) so as to implement the pre-reservation of the place-occupying gap of the top-level view. When the top-level view needs to be inserted, the top-level view of the reactive-native application can be added by transferring the view elements of the top-level view and then rendering the view added by the original view and the placeholder in the application. The embodiment of the application provides an interface for adding and deleting the top view to the react-native application through a simple front-end code such as a javascript code, so that the top view can be inserted into the application by using a code familiar to developers, the developers can quickly, efficiently and conveniently add and delete the top view of the application without writing module codes (such as swift, objective-c, java and the like) of a native system, the learning cost and the development period are reduced, and the application development efficiency and the operation experience of the developers are improved.

In an embodiment mode of the apparatus provided in the present application, the method for registering a module of a react-native application page entry through re-implementation may include:

reserving an occupation gap of a top-level view in a root module registration method of a real-native application page, and setting the top-level view initially reserved in the occupation gap to be empty;

and the module registration method for the page entry of the reactive-native application through the re-realization provides an interface for adding and deleting a top view to the reactive-native application through a javascript code.

In another embodiment of the apparatus provided in the present application, the reserving a place-occupying gap of a top-level view in a root module registration method of a real-native application pagein may include:

save a reference to the real-native AppRegistration.

Reserving an occupation gap of a top-layer view in a root diagram layer parameter of the act-native application AppRegistrationComponent method;

setting the initial top layer view at the occupancy gap to be empty.

The specific manner of reserving the top view placeholder in the application layer entry method may be different according to the actual open environment and design requirements. In an embodiment provided by the present application, the processor is configured to implement reservation of a placeholder for inserting the top-level view by:

register component (key, B) as appregister register component (key, (a) + B);

key represents a unique identifier of a parameter object, B represents a root view page of a reactive-native application, () represents an occupancy gap, A represents a top-level view and is empty initially; (A) + B is denoted return view B and top-level view a of the upper layer of said view B.

Of course, in another embodiment of the apparatus, the trigger event of the listening view operation and the rendering processing manner of the inserted top-level view may also be different according to the actual open environment and design requirements. In another embodiment of the apparatus provided in the present application, the method for setting a view operation trigger event of the placeholder and rendering the layer may include:

setting events for monitoring view addition and removal in real time in the root module registration method, and determining a view operation triggering event for triggering the occupancy gap when the events for triggering the addition or deletion of the top view are monitored; and the number of the first and second groups,

and setting an implementation mode for rendering the view elements added at the position of the occupancy gap into a view page of the react-native application.

According to the application top-level view processing method, device and component, the occupation gap of the top-level view is reserved in advance by a method for re-realizing the application root module registration in the reactive-native (the module registered by the method is used as the inlet of the reactive-native application, and the view page can be rendered from the inlet module). When the top-level view needs to be inserted, the top-level view of the reactive-native application can be added by transferring the view elements of the top-level view and then rendering the view added by the original view and the placeholder in the application. The embodiment of the application provides an interface for adding and deleting the top view to the react-native application through a simple front-end javascript code, so that the top view can be inserted into the application by using the code familiar to developers, the developers can quickly, efficiently and conveniently add and delete the top view of the application, module codes (such as swift, objective-c, java and the like) of a native system do not need to be written, the learning cost and the development period are reduced, and the application development efficiency and the operation experience of the developers are improved.

By utilizing the method, a processing component of the application layer can be created in the development and processing processes of the reactive-native application layer. The components can comprise native reactive-native based data objects/modules which are created and generated in the iOS or android simulator and other application systems in combination with necessary hardware support such as iPhone or android mobile phones and computer development language environments, and realize an interface for providing javascript load call. Therefore, top-level views can be added to or deleted from the reactive-native application through the pure javascript codes, operators can directly operate the top-level views in a cross-platform mode without knowing and compiling native codes of all mobile phone systems, and application development efficiency and use experience of the operators are greatly improved. Specifically, in an embodiment of an application layer processing component provided in the present application, the application layer processing component may be configured to include:

In this way, the added views can be dynamically added and removed to the react-native application across platforms using pure javascript code. In a scheme provided by the present application, that is, by re-implementing an application registry method in a real-native and adding elements to the method, a place-occupying gap of a top-level view is reserved in a root module registration method of a real-native application page, and the method includes:

the target object of the method of application registry.

AppRegistry.registerComponent(key，(A)+B)；

The component may comprise a component object formed by rewriting encapsulation on top of the native reactive-native component development. These components may run in an application system that is architected in hardware, implementing a feature or a specified function when a call is loaded. According to the component provided by the embodiment of the application, in actual product development, an operator can add and delete the interface of the top view to the real-native application through the front-end javascript code, so that the top view can be inserted into the application by using the code familiar to the developer, the developer can quickly, efficiently and conveniently add and delete the top view of the application, the module code (such as swift, object-c, java and the like) of a native system is not required to be written, the learning cost and the development period are reduced, and the application development efficiency and the operation experience of the developer are improved.

Although the description of the re-method of the real native application registry, implementation of the reserved placeholder for (a) + B, monitoring/placeholder view rendering of view manipulation events, data definition for creating JS objects, etc., standard component/object function modification, interaction, calculation, judgment, etc. is mentioned in the present disclosure, the present disclosure is not limited to the case where it is necessary to conform to the industry communication standard, standard data/function structure, standard design language processing method, or the embodiments of the present disclosure. Certain industry standards, or implementations modified slightly from those described using custom modes or examples, may also achieve the same, equivalent, or similar, or other, contemplated implementations of the above-described examples. The embodiments obtained by applying the modified or transformed data definition, storage, judgment, setting mode, etc. may still fall within the scope of the alternative embodiments of the present application.

In the 90 s of the 20 th century, improvements in a technology could clearly distinguish between improvements in hardware (e.g., improvements in circuit structures such as diodes, transistors, switches, etc.) and improvements in software (improvements in process flow). However, as technology advances, many of today's process flow improvements have been seen as direct improvements in hardware circuit architecture. Designers almost always obtain the corresponding hardware circuit structure by programming an improved method flow into the hardware circuit. Thus, it cannot be said that an improvement in the process flow cannot be realized by hardware physical modules. For example, a Programmable Logic Device (PLD), such as a Field Programmable Gate Array (FPGA), is an integrated circuit whose Logic functions are determined by programming the Device by a user. A digital system is "integrated" on a PLD by the designer's own programming without requiring the chip manufacturer to design and fabricate application-specific integrated circuit chips. Furthermore, nowadays, instead of manually making an integrated Circuit chip, such Programming is often implemented by "logic compiler" software, which is similar to a software compiler used in program development and writing, but the original code before compiling is also written by a specific Programming Language, which is called Hardware Description Language (HDL), and HDL is not only one but many, such as abel (advanced Boolean Expression Language), ahdl (alternate Language Description Language), traffic, pl (core unified Programming Language), HDCal, JHDL (Java Hardware Description Language), langue, Lola, HDL, laspam, hardsradware (Hardware Description Language), vhjhd (Hardware Description Language), and vhigh-Language, which are currently used in most common. It will also be apparent to those skilled in the art that hardware circuitry that implements the logical method flows can be readily obtained by merely slightly programming the method flows into an integrated circuit using the hardware description languages described above.

The controller may be implemented in any suitable manner, for example, the controller may take the form of, for example, a microprocessor or processor and a computer-readable medium storing computer-readable program code (e.g., software or firmware) executable by the (micro) processor, logic gates, switches, an Application Specific Integrated Circuit (ASIC), a programmable logic controller, and an embedded microcontroller, examples of which include, but are not limited to, the following microcontrollers: ARC 625D, AtmelAT91SAM, Microchip PIC18F26K20, and Silicone Labs C8051F320, the memory controller may also be implemented as part of the control logic for the memory. Those skilled in the art will also appreciate that, in addition to implementing the controller as pure computer readable program code, the same functionality can be implemented by logically programming method steps such that the controller is in the form of logic gates, switches, application specific integrated circuits, programmable logic controllers, embedded microcontrollers and the like. Such a controller may thus be considered a hardware component, and the means included therein for performing the various functions may also be considered as a structure within the hardware component. Or even means for performing the functions may be regarded as being both a software module for performing the method and a structure within a hardware component.

The systems, devices, modules or units illustrated in the above embodiments may be implemented by a computer chip or an entity, or by a product with certain functions. One typical implementation device is a computer. In particular, the computer may be, for example, a personal computer, a laptop computer, a vehicle-mounted human-computer interaction device, a cellular telephone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.

Although the present application provides method steps as described in an embodiment or flowchart, more or fewer steps may be included based on conventional or non-inventive means. The order of steps recited in the embodiments is merely one manner of performing the steps in a multitude of orders and does not represent the only order of execution. When an actual apparatus or end product executes, it may execute sequentially or in parallel (e.g., parallel processors or multi-threaded environments, or even distributed data processing environments) according to the method shown in the embodiment or the figures. The terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, the presence of additional identical or equivalent elements in a process, method, article, or apparatus that comprises the recited elements is not excluded.

For convenience of description, the above devices are described as being divided into various modules by functions, and are described separately. Of course, in implementing the present application, the functions of each module may be implemented in one or more software and/or hardware, or a module implementing the same function may be implemented by a combination of a plurality of sub-modules or sub-units, and the like. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units is only one logical division, and other divisions may be realized in practice, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, devices or units, and may be in an electrical, mechanical or other form.

Those skilled in the art will also appreciate that, in addition to implementing the controller as pure computer readable program code, the same functionality can be implemented by logically programming method steps such that the controller is in the form of logic gates, switches, application specific integrated circuits, programmable logic controllers, embedded microcontrollers and the like. Such a controller may therefore be considered as a hardware component, and the means included therein for performing the various functions may also be considered as a structure within the hardware component. Or even means for performing the functions may be regarded as being both a software module for performing the method and a structure within a hardware component.

The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.

The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.

Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.

As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.

The application may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The application may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.

The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, for the system embodiment, since it is substantially similar to the method embodiment, the description is simple, and for the relevant points, reference may be made to the partial description of the method embodiment.

The above description is only an example of the present application and is not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application. .

Claims

1. A method for processing an application top view, the method comprising:

and returning the application view processed by the operation parameters.

2. The method for processing an application top-level view of claim 1, wherein the module registration method for the re-implemented reactive-native application page entry comprises:

setting a trigger event of view operation of the place-occupying gap and a layer rendering method of the view at the place-occupying gap, and creating an interface for adding and deleting a top-layer view to the reactive-native application through a javascript code.

3. The method according to claim 2, wherein reserving a placeholder for the top-level view in a root module registration method of a reactive-native application pagein comprises:

save a reference to the real-native AppRegistration.

setting the initial top layer view at the occupancy gap to be empty.

4. The method of claim 3, wherein reserving placeholders for the top-level view is implemented by:

register component (key, B) as appregister register component (key, (a) + B);

5. The method according to claim 2, wherein the setting of the view operation triggering event of the placeholder and the layer rendering method of the view at the placeholder comprises:

setting events for monitoring view addition and removal in real time in the root module registration method, and determining a view operation event triggering the occupancy gap when the events triggering the addition or the deletion of the top view are monitored; and the number of the first and second groups,

6. The method for processing the application top-level view according to any one of claims 2 to 5, wherein the processing the operation parameters by using the module registration method of the re-implemented reactive-native application page entry comprises:

inserting, by the module registration method, a top-level view corresponding to the view element at the placeholder location when the operational parameters include an incoming view element;

when the operating parameters include removing the top level view, removing, by the module registration method, the top level view added to the placeholder location.

7. An application top layer processing apparatus, comprising:

a processor and a memory for storing processor-executable instructions,

8. The apparatus according to claim 7, wherein the module registration method for the re-implemented function-native application page entry includes:

9. The apparatus according to claim 8, wherein reserving a placeholder for the top-level view in a root module registration method of a reactive-native application pagein includes:

save a reference to the real-native AppRegistration.

setting the initial top layer view at the occupancy gap to be empty.

10. The apparatus for processing top layer map according to claim 9, wherein the reservation of the placeholder for the top layer view is implemented by:

register component (key, B) as appregister register component (key, (a) + B);

11. The apparatus for processing top layer of application according to claim 8, wherein the method for setting view operation triggering event and layer rendering of the placeholder comprises:

12. The apparatus according to any one of claims 8 to 11, wherein the processor processes the operation parameter by using the module registration method, including:

13. An application layer processing component, configured to include:

14. The application layer processing component according to claim 13, wherein reserving a placeholder for a top-level view in a root module registration method of a reactive-native application pagein includes:

the target object of the method of application registry.

AppRegistry.registerComponent(key，(A)+B)；