Module loading method, device, computer equipment and storage medium
By introducing the native bearing layer of the React Native module created based on Fragment in Android applications and proxying life cycle information, the problem that Android applications cannot load React Native modules is solved, and the loading and reuse of React Native modules is realized, which improves the flexibility and reusability of module loading.
Patent Information
- Application Number
- CN202011092075.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2020-10-13
- Publication Date
- 2025-08-12
- Estimated Expiration
- 2040-10-13
AI Technical Summary
Android applications cannot effectively load the React Native module, resulting in the inability to reuse the React Native module.
By introducing the native bearer layer of the React Native module created based on Fragment in Android applications, and proxying its life cycle information to the React part, the loading and multiplexing of the React Native module is realized.
It realizes the purpose of loading React Native modules in Android applications, realizes the reuse of React Native modules, and improves the flexibility and reusability of module loading.
Smart Images
Figure CN114356429B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of computer technology, and more specifically, to a module loading method, device, computer equipment, and storage medium. Background Art
[0002] React Native (RN), a cross-platform mobile app development framework released by Facebook in April 2015, is a derivative of Facebook's previously open-source JavaScript framework, React, for native mobile app platforms. It supports both iOS and Android. React Native offers several advantages, including mature hot updates, a shared React Native codebase for both Android and iOS, reduced duplication of development, and hot reload.
[0003] Android apps' native modules use Activities as a carrier to present views; React Native modules (RN modules for short) present views by proxying ReactActivities. Because Android stipulates that Activities cannot be embedded within Activities, Android apps involving mixed development of native and RN modules can only call each other via a specific communication protocol. They cannot load or reuse RN modules. Summary of the Invention
[0004] In view of this, in order to solve the above problems, the present invention provides a module loading method, device, computer equipment and storage medium, so as to realize the reuse of RN modules by Android applications on the basis of realizing the loading of RN modules by Android applications. The technical solution is as follows:
[0005] A module loading method, characterized by comprising:
[0006] Determine a second module requested to be loaded by the first module in the Android application, where the second module is a React Native module;
[0007] Introducing a native end bearing layer of the second module created based on the Fragment into a first carrier for presenting the first module;
[0008] The native-end bearing layer is triggered to load the React part of the second module and the lifecycle information of the native-end bearing layer of the second module is proxied to the React part, and the React part is used to draw and display the module content of the second module in response to the lifecycle information.
[0009] A module loading device, comprising:
[0010] a request loading determination unit, configured to determine a second module requested to be loaded by a first module in an Android application, wherein the second module is a React Native module;
[0011] A native-end bearer layer creating unit, configured to introduce a native-end bearer layer of the second module created based on the Fragment into a first carrier used to present the first module;
[0012] A module loading unit is used to trigger the native-end bearing layer to load the React part of the second module and to proxy the lifecycle information of the native-end bearing layer of the second module to the React part, and the React part is used to draw and display the module content of the second module in response to the lifecycle information.
[0013] A computer device comprises: a processor and a memory, wherein the processor and the memory are connected via a communication bus; wherein the processor is used to call and execute a program stored in the memory; and the memory is used to store a program, wherein the program is used to implement the module loading method.
[0014] A computer-readable storage medium stores a computer program, which is loaded and executed by a processor to implement the steps of the module loading method.
[0015] Embodiments of the present application provide a module loading method, apparatus, computer device, and storage medium. When determining the second module (the second module is a React Native module) requested to be loaded by a first module in an Android application, the method achieves the purpose of loading the React Native module in the Android application by introducing a native-side bearing layer of the second module created based on Fragment in a first carrier for presenting the first module, triggering the native-side bearing layer to load the React part of the second module, and proxying the lifecycle information of the native-side bearing layer of the second module to the React part (the React part is used to draw and display the module content of the second module in response to the lifecycle information), thereby achieving the reuse of the React Native module by the Android application. BRIEF DESCRIPTION OF THE DRAWINGS
[0016] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are merely embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.
[0017] Figure 1A schematic diagram of the View inheritance principle of ReactNative at the Android layer provided in an embodiment of the present application;
[0018] Figure 2 A schematic diagram of a module loading method provided in an embodiment of the present application;
[0019] Figure 3 A flow chart of a module loading method provided in an embodiment of the present application;
[0020] Figure 4 A flowchart of a method for triggering the native end bearer layer to load the React portion of the second module provided in an embodiment of the present application;
[0021] Figure 5 A React Native modular diagram provided in an embodiment of the present application;
[0022] Figure 6 A schematic diagram of another module loading method provided in an embodiment of the present application;
[0023] Figure 7 A schematic structural diagram of a module loading device provided in an embodiment of the present application;
[0024] Figure 8 A structural diagram of an implementation method of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0025] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.
[0026] Android apps' native modules use Activities as a vehicle to present views; React Native modules (RN modules) present views based on proxied Activities (which can be called React Activities). Because Android stipulates that Activities cannot be embedded within Activities (i.e., Activities cannot be loaded within Activities), Android apps involving mixed development of native and RN modules can only call each other via a specific communication protocol. They cannot load, and therefore cannot reuse, RN modules.
[0027] For example, when an Android application is developed using a hybrid of Android and React Native, the module developed using Android can be called a native module, and the module developed using React Native can be called a ReactNative module (RN module for short). If React Native defines module A, and the native module developed using Android requires module A, then the native module can directly depend on and call module A. However, if module A needs to be embedded in the native module (for example, module A needs to be embedded in a page of the native module), in this case, React Native exposes its shortcomings. This is because the React Native module is presented based on the proxy ReactActivity, and an Activity cannot be embedded in an Activity. Therefore, the purpose of embedding module A in the native module cannot be achieved. In other words, module A cannot be loaded in the native module, thereby achieving the purpose of embedding module A in the native module.
[0028] In order to solve the problem that the RN module in the prior art cannot be loaded, the embodiment of the present application proposes a module loading method, which provides a React Native loading solution based on Fragment. In this solution, React Native uses Fragment to present and can arbitrarily embed native Activity or Fragment. It is very flexible and perfectly solves the problem that the RN module in the prior art cannot be loaded, which in turn causes the RN module to be unable to be reused.
[0029] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, the present invention is further described in detail below with reference to the accompanying drawings and specific embodiments.
[0030] The inventors of this application took into account that Android stipulates that an Activity cannot be embedded in an Activity, and the native module of the Android application uses the Activity as a carrier to present the view, and the React Native module presents the view based on the proxy React Activity. As a result, Android applications involving hybrid development of Android and React Native can only call the React Native module but cannot load the React Native module.
[0031] The inventor then considered what could be embedded in the Activity. Fragments and Views were possible, and of course, windows could be displayed on top of the Activity. This was inconvenient and would block various events of the underlying View, so this could be temporarily ruled out.
[0032] Based on modularity, Fragment is a good carrier. Its functions are relatively independent, similar to Activity, and its life cycle is also similar to Activity, which can be well reused. So we need to create a Fragment (this Fragment can be called React Fragment) to implement a solution similar to ReactActivity.
[0033] Furthermore, the inventors analyzed the implementation of ReactActivity. After fully understanding the native-side loading process of React Native, they found that React Native delegates the lifecycle information of the React Native Activity to the React portion of React Native via ReactActivityDelegate. All pages in the React portion of ReactNative are loaded on the native side via ReactRootView. In the implementation of ReactActivity, ReactRootView is set as the contentView for ReactActivity. With this basic understanding, we can hazard a guess that, in theory, ReactRootView can also be used as the View in a Fragment.
[0034] Based on this, the inventors of the present application propose a module loading method, apparatus, computer equipment and storage medium to realize the reuse of RN modules by Android applications on the basis of realizing the loading of RN modules by Android applications.
[0035] The following first describes in detail a module loading method provided by an embodiment of the present application from the perspective of implementation principle. Figure 1 A schematic diagram of the View inheritance principle of ReactNative at the Android layer provided in an embodiment of the present application.
[0036] Figure 1 The left part of the diagram shows the principle of implementing the existing ReactNative View inheritance in the Android layer. Figure 1 As shown in the left part of the figure: ReactRootView is the nativeView layer used to host the React view. That is, it converts the ReactNative React view into a native view, loads the native view into the ReactRootView, and then assigns the ReactRootView to the contentView to realize the display of the ReactNative.
[0037] ReactActivity delegates its lifecycle information to ReactInstanceManager through ReactActivityDelegate. ReactInstanceManager manages ReactActivityDelegate. ReactActivity belongs to the native part of ReactNative. ReactActivity communicates with the React part of ReactNative and further passes the lifecycle information to the React part through the bridge to implement the lifecycle management of the React part.
[0038] Figure 1 The left side of the diagram shows the View inheritance principle of React Native at the Android layer in this application. Figure 1 The right part is to achieve the purpose of component modularization, such as Figure 1 As shown in the right section, ReactFragment hosts ReactRootView to display a React view. The delegate class, ReactFragmentDelegate, delegates ReactFragment lifecycle information to the React module. The React view is displayed by passing ReactRootView as the return value of ReactFragment's onCreateView method to the ReactFragment for rendering. ReactFragment can be flexibly embedded in Activities or Fragments, further implementing ReactNative's modularity and enabling reuse.
[0039] Based on the above commonalities, a module loading method provided by an embodiment of the present application is now described in detail. Figure 2 A schematic diagram of a module loading method provided in an embodiment of the present application; Figure 3 A flowchart of a module loading method provided in an embodiment of the present application.
[0040] like Figure 3 As shown, the method includes:
[0041] S301: Determine a second module requested to be loaded by a first module in an Android application, where the second module is a React Native module;
[0042] When an Android application involves hybrid development of Android and React Native, the module developed using Android can be called a native module, and the module developed using React Native can be called a React Native module (RN module for short).
[0043] It should be noted that the native module only involves the native part, and the module content of the native module is set in the native part of the native module; while the RN module includes both the native part and the React part, and the module content of the RN module is set in the React part of the RN module. In this application, the part of the module developed using Android may be referred to as the native part, and the part of the module developed using React Native may be referred to as the React part.
[0044] Android applications are composed of multiple modules, including both native modules and RN modules. When an Android application presents a first module, if a second module is embedded in the first module, the second module needs to be loaded into the first module to fully present the first module.
[0045] When the first module is a native module or a React Native module that has been loaded into a native module, and the second module is a React Native module, a module loading method provided in an embodiment of the present application can be used to achieve the purpose of loading the second module in the first module.
[0046] In an embodiment of the present application, if the first module is a React Native module that has been loaded into a native module, there is a one-level or multi-level nesting relationship between the first module and the native module, and the number of levels of the nesting relationship is related to the number of modules to which the first module belongs in the native module. The number of modules embedded by the first module in the native module can be determined, and both direct and indirect embedding can be considered embedding. The number of modules embedded by the first module in the native module is determined as the number of levels of the nesting relationship between the first module and the native module.
[0047] For example, if the first module is module A, the native module is module B, and module A is a React Native module directly embedded in module B, then the module embedded by module A in module B is considered to be module B, the number of modules embedded by module A in module B is 1, and there is a one-level nesting relationship between module A and module B; if module C and module D are embedded in module B, module E is embedded in module D, and module A is embedded in module E, then the modules embedded by module A in module B are considered to be module B, module D, and module E respectively, the number of modules embedded by module A in module B is 3, and there is a three-level nesting relationship between module A and module B.
[0048] In the case where the second module is a React Native module, if the first module is a native module, when loading the first module, the Android application will first create a first carrier for presenting the first module. The first carrier can be the Activity of the first module, and the native part of the first module loads the module content of the first module in the first carrier. In the process of the native part of the first module loading the module content of the first module in the first carrier, it is determined that the first module requests to load the second module. At this time, the native part of the first module will introduce the native-end bearing layer of the second module created based on Fragment into the first carrier, and trigger the native-end bearing layer to load the React part of the second module, and proxy the life cycle information of the native-end bearing layer of the second module to the React part. The React part is used to draw and display the module content of the second module in response to the life cycle information.
[0049] In the case where the second module is a React Native module, if the first module is a React Native module that has been loaded into the native module, the first carrier used to present the first module is the native-end bearing layer of the first module created by the module directly embedded by the first module in the native module. When the native part of the first module loads the module content (React part) of the first module into the native-end bearing layer of the first module, if it is determined that the first module requests to load the second module, then the native part of the first module will introduce the native-end bearing layer of the second module created based on Fragment into the first carrier, and trigger the native-end bearing layer to load the React part of the second module, and proxy the lifecycle information of the native-end bearing layer of the second module to the React part. The React part is used to draw and display the module content of the second module in response to the lifecycle information.
[0050] S302: Introduce a native end bearing layer of a second module created based on a fragment into a first carrier for presenting the first module;
[0051] In an embodiment of the present application, the way in which the native part of the first module introduces the native-end bearing layer of the second module created based on Fragment into the first carrier used to present the first module can be: the native part of the first module determines the first carrier used to present the first module in the Android application, and creates a native-end bearing layer of the second module based on Fragment in the first carrier.
[0052] Exemplarily, a fragment of the second module may be created in the first carrier, and the created fragment may be used as a native end bearing layer of the second module.
[0053] If the first module is a native module, the first carrier for presenting the first module in the Android application is the Activity of the first module in the Android application, and the Activity of the first module is used to present the module content of the first module; if the first module is a React Native module that has been loaded into the native module, the first carrier for presenting the first module in the Android application is the Fragment of the first module created by the module directly embedded by the first module in the native module.
[0054] In an embodiment of the present application, the native portion of the first module can create a fragment of the second module and introduce the fragment of the second module into the first carrier of the Android application used to present the first module. Specifically, the first carrier used to present the module content of the first module in the Android application can be determined, the native view used to present the module content of the first module in the first carrier can be determined (for ease of distinction, this native view can be referred to as the first native view), and the created fragment of the second module can be introduced into the first native view.
[0055] S303: Trigger the native end bearer layer to load the React part of the second module and proxy the lifecycle information of the native end bearer layer of the second module to the React part, and the React part is used to draw and display the module content of the second module in response to the lifecycle information.
[0056] In an embodiment of the present application, after the native part of the first module introduces the native-end bearing layer of the second module into the Android application for presenting the first carrier of the first module, it can trigger the native-end bearing layer of the second module to communicate with the React part of the second module to load the React part of the second module into the native-end bearing layer of the second module. In addition, the native-end bearing layer of the second module can also proxy the lifecycle information of the native-end bearing layer of the second module to the React part of the second module that has been loaded into the native-end bearing layer of the second module. Accordingly, the React part is used to draw and display the module content of the second module in response to the lifecycle information of the native-end bearing layer of the second module. Combined with Figure 2 As can be seen from the provided module loading schematic diagram, the module loading method provided in the embodiment of the present application is to load the React part of the second module into the first module.
[0057] The native end bearer of the second module may proxy the lifecycle information of the native end bearer layer of the second module to the React part by proxying the lifecycle information of the native end bearer layer of the second module to the React part through a proxy class.
[0058] Exemplarily, the proxy class may be ReactFragmentDelegate.
[0059] Figure 4 A flowchart of a method for triggering the native end bearer layer to load the React part of the second module provided in an embodiment of the present application.
[0060] like Figure 4 As shown, the method includes:
[0061] S401. Determine the module content of the second module carried by the React part of the second module;
[0062] In the embodiment of the present application, the second module is a React Native module, and the module content of the React Native module is set in the React part of the React Native module. Accordingly, the module content of the second module is obtained from the React part of the second module.
[0063] S402: Convert the module content of the second module into a second native view;
[0064] In an embodiment of the present application, the module content of the second module obtained from the React part of the second module is generated based on React Native, and the obtained module content of the second module is converted into content generated based on Android, and then a native view is generated according to the converted content. For the sake of distinction, the native view can be referred to as a second native view.
[0065] S403: Load the second native view in the native end bearer layer.
[0066] Exemplarily, the module content of the acquired second module can be considered as a React view, and the display of the React view is achieved by using ReactRootView as the return value of the onCreateView method of ReactFragment. The onCreateView method in ReactFragment instructs the creation of View, and the React view is converted into a second native view through ReactRootView. The second native view is assigned to the created View, and the View is loaded into the native carrier layer of the second module in the first carrier that has been introduced into the first module.
[0067] This application provides a module loading method for hybrid development using Android and React Native. React Native defines module A. If a page in Android Native needs to embed module A, module A can be directly added to an Activity using a fragment. This is very convenient and effectively reuses module A.
[0068] Figure 5 A React Native modular diagram provided in an embodiment of the present application.
[0069] like Figure 5 As shown, Module 1 and Module 2 are two independent ReactNative modules.
[0070] Figure 5 The left side shows the structural diagram of module 1 and module 2. Figure 5 The right side shows the module's dependency examples. There are two cases:
[0071] Case 1: Android application dependencies on modules. Android applications can depend on multiple independent React Native modules.
[0072] Case 2: React Native module's dependency on React Native module.
[0073] From the above two dependency methods, it can be seen that the reusability and flexibility of this solution implemented using ReactFragment are very high, but it also highlights the shortcomings of ReactActivity in this case.
[0074] In order to Figure 5 To illustrate the two dependency examples, we now provide another module loading method diagram. For details, see Figure 6 .
[0075] See also Figure 6 , module A is a native module, and module B, module C, module D and module E are all React Native modules. If an Android application wants to display the module content of module A, it needs to create an Activity of module A and display the module content of module A in the Activity of module A; if the module content of module A needs to embed the module content of module B and module C, it is necessary to create a Fragment of module B and a Fragment of module C respectively in the Activity of module A, and display the module content of module B in the Fragment of module B, and display the module content of module C in the Fragment of module C; further, if the module content of module B needs to embed the module content of module D, it is necessary to create a Fragment of module D in the Fragment of module B, and display the module content of module D in the Fragment of module D; further, if the module content of module D needs to embed the module content of module E, it is necessary to create a Fragment of module E in the Fragment of module D, and display the module content of module E in the Fragment of module E.
[0076] Based on the principle of the module loading method provided in the embodiment of this application, the process of using Fragment to carry ReactRootView can also be modified to use View as a proxy. The key issue is the proxy problem of the life cycle. The proxy part can be based on a LifeCycle management class to give the detailed life cycle to View, and then proxy to ReactRootView. Correspondingly, iOS can also solve this problem through a similar solution, which will not be explained in detail here.
[0077] Figure 7 A schematic structural diagram of a module loading device provided in an embodiment of the present application.
[0078] like Figure 7 As shown, the device includes:
[0079] a request loading determination unit, configured to determine a second module requested to be loaded by a first module in an Android application, wherein the second module is a React Native module;
[0080] A native end bearer layer creation unit, configured to introduce a native end bearer layer of a second module created based on a Fragment into a first carrier for presenting the first module;
[0081] The module loading unit is used to trigger the native end bearing layer to load the React part of the second module and to proxy the life cycle information of the native end bearing layer of the second module to the React part. The React part is used to draw and display the module content of the second module in response to the life cycle information.
[0082] In the embodiment of the present application, preferably, the native end bearer layer creation unit includes:
[0083] A first carrier determining unit, configured to determine a first carrier for presenting a first module in an Android application;
[0084] The native end bearer layer creation subunit is used to create a native end bearer layer of the second module based on the Fragment in the first carrier.
[0085] In the embodiment of the present application, preferably, the native end bearer layer creation subunit includes:
[0086] A creation unit, configured to create a native end bearing layer of the second module based on the Fragment;
[0087] The introducing unit is used to introduce the native end bearing layer into the first carrier to present the first native view of the module content of the first module.
[0088] In the embodiment of the present application, preferably, the module loading unit for triggering the native end bearer layer to load the React part of the second module includes:
[0089] a module content determining unit, configured to determine the module content of the second module carried by the React portion of the second module;
[0090] a conversion unit, configured to convert the module content of the second module into a second native view;
[0091] The loading unit is configured to load the second native view into the native end bearing layer.
[0092] In an embodiment of the present application, preferably, the module loading unit for proxying the lifecycle information of the native-end bearing layer of the second module to the React part is specifically used to: proxy the lifecycle information of the native-end bearing layer of the second module to the React part through a proxy class.
[0093] In the embodiment of the present application, preferably, the first module is a native module, or the first module is a React Native module that has been loaded into the native module.
[0094] In an embodiment of the present application, preferably, if the first module is a React Native module that has been loaded into the native module, there is a one-level or multi-level nesting relationship between the first module and the native module, and the number of levels of the nesting relationship is related to the number of modules to which the first module belongs in the native module.
[0095] like Figure 8 FIG. 1 is a structural diagram of an implementation of a computer device provided in an embodiment of the present application, wherein the computer device includes:
[0096] Memory 801, used for storing programs;
[0097] Processor 802 is configured to execute a program, wherein the program is specifically configured to:
[0098] Determine a second module requested to be loaded by the first module in the Android application, where the second module is a React Native module;
[0099] Introducing a native end bearing layer of the second module created based on the Fragment into the first carrier for presenting the first module;
[0100] The native end bearing layer is triggered to load the React part of the second module and the life cycle information of the native end bearing layer of the second module is proxied to the React part. The React part is used to draw and display the module content of the second module in response to the life cycle information.
[0101] The processor 802 may be a central processing unit (CPU) or an application-specific integrated circuit (ASIC).
[0102] The control device may further include a communication interface 803 and a communication bus 804 , wherein the memory 801 , the processor 802 and the communication interface 803 communicate with each other via the communication bus 804 .
[0103] An embodiment of the present application also provides a readable storage medium on which a computer program is stored. The computer program is loaded and executed by a processor to implement the various steps of the above-mentioned module loading method. The specific implementation process can refer to the description of the corresponding part of the above-mentioned embodiment, which will not be repeated in this embodiment.
[0104] This application also provides a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the methods provided in the various optional implementations of the module loading method or module loading apparatus. The specific implementation process can be referred to the description of the corresponding embodiments above and is not described in detail here.
[0105] Embodiments of the present application provide a module loading method, apparatus, computer device, and storage medium. When determining the second module (the second module is a React Native module) requested to be loaded by a first module in an Android application, the method achieves the purpose of loading the React Native module in the Android application by introducing a native-side bearing layer of the second module created based on Fragment in a first carrier for presenting the first module, triggering the native-side bearing layer to load the React part of the second module, and proxying the lifecycle information of the native-side bearing layer of the second module to the React part (the React part is used to draw and display the module content of the second module in response to the lifecycle information), thereby achieving the reuse of the React Native module by the Android application.
[0106] The above is a detailed introduction to a module loading method, device, computer equipment and storage medium provided by the present invention. Specific examples are used herein to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core ideas. At the same time, for those skilled in the art, according to the ideas of the present invention, there may be changes in the specific implementation methods and application scopes. In summary, the contents of this specification should not be understood as limiting the present invention.
[0107] It should be noted that the various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. Reference can be made to the common and similar parts between the various embodiments. For the devices disclosed in the embodiments, since they correspond to the methods disclosed in the embodiments, the description is relatively simple, and the relevant parts can be referred to the method description.
[0108] It should also be noted that, in this document, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variations thereof are intended to cover non-exclusive inclusion, such that the process, method, article, or apparatus comprising a series of elements inherent to the elements, or also including elements inherent to these processes, methods, articles, or apparatus. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of additional identical elements in the process, method, article, or apparatus comprising the element.
[0109] The above description of the disclosed embodiments is intended to enable one skilled in the art to implement or use the present invention. Various modifications to these embodiments will be readily apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention is not limited to the embodiments shown herein but is intended to conform to the widest scope consistent with the principles and novel features disclosed herein.
Claims
1. A module loading method, characterized in that: include: Determine a second module requested to be loaded by the first module in the Android application, where the second module is a React Native module; Determine a first carrier for presenting the first module in the Android application; Create a native end bearing layer of the second module based on Fragment; Introducing the native end bearer layer into the first carrier to present a first native view of the module content of the first module; The native-end bearing layer is triggered to load the React part of the second module and the lifecycle information of the native-end bearing layer is proxied to the React part through a proxy class. The React part is used to draw and display the module content of the second module in response to the lifecycle information. The proxy class is ReactFragmentDelegate.
2. The method according to claim 1, characterized in that The triggering of the native end bearer layer to load the React part of the second module includes: Determining the module content of the second module carried by the React part of the second module; Converting the module content of the second module into a second native view; The second native view is loaded in the native end bearing layer.
3. The method according to claim 1, characterized in that The first module is a native module, or the first module is a React Native module that has been loaded into a native module.
4. The method according to claim 3, characterized in that If the first module is a React Native module that has been loaded into a native module, there is a one-level or multi-level nesting relationship between the first module and the native module, and the number of levels of the nesting relationship is related to the number of modules to which the first module belongs in the native module.
5. A module loading device, characterized in that: include: a request loading determination unit, configured to determine a second module requested to be loaded by a first module in an Android application, wherein the second module is a React Native module; A native-end bearer layer creation unit, configured to determine a first bearer for presenting the first module in the Android application; Creating a native-end bearer layer for the second module based on the Fragment; introducing the native-end bearer layer into the first carrier to present a first native view of the module content of the first module; A module loading unit is used to trigger the native-end bearing layer to load the React part of the second module and to proxy the lifecycle information of the native-end bearing layer to the React part through a proxy class. The React part is used to draw and display the module content of the second module in response to the lifecycle information. The proxy class is ReactFragmentDelegate.
6. The device according to claim 5, characterized in that The module loading unit for triggering the native end bearer layer to load the React part of the second module includes: a module content determining unit, configured to determine the module content of the second module carried by the React part of the second module; a conversion unit, configured to convert the module content of the second module into a second native view; A loading unit is configured to load the second native view into the native end bearing layer.
7. The device according to claim 5, characterized in that The first module is a native module, or the first module is a React Native module that has been loaded into a native module.
8. The device according to claim 5, characterized in that If the first module is a React Native module that has been loaded into a native module, there is a one-level or multi-level nesting relationship between the first module and the native module, and the number of levels of the nesting relationship is related to the number of modules to which the first module belongs in the native module.
9. A computer device, characterized in that: include: A processor and a memory, wherein the processor and the memory are connected via a communication bus; wherein the processor is configured to call and execute a program stored in the memory; The memory is used to store a program, and the program is used to implement the module loading method according to any one of claims 1 to 4.
10. A computer-readable storage medium, characterized in that A computer program is stored thereon, and the computer program is loaded and executed by a processor to implement each step of the module loading method according to any one of claims 1 to 4.
11. A computer program product, characterized in that The computer program product comprises instructions, which, when executed on a computer device, cause the computer device to perform the method according to any one of claims 1 to 4 .