CN110889058A - Method and terminal for loading real-Native capability - Google Patents
Method and terminal for loading real-Native capability Download PDFInfo
- Publication number
- CN110889058A CN110889058A CN201811036363.5A CN201811036363A CN110889058A CN 110889058 A CN110889058 A CN 110889058A CN 201811036363 A CN201811036363 A CN 201811036363A CN 110889058 A CN110889058 A CN 110889058A
- Authority
- CN
- China
- Prior art keywords
- native
- react
- currently running
- page
- injecting
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- Stored Programmes (AREA)
Abstract
The invention discloses a method and a terminal for loading the Native capability of a React-Native page, which can realize the loading of the Native capability of the React-Native page as required by reading the Native capability information of the React-Native page to be jumped, determining the Native capability of the React-Native page to be jumped according to the Native capability information and injecting the Native capability into the currently running React-Native project, can better decouple the association among the pages, optimize the problem of time consumption for the first starting of the pages and improve the performance.
Description
Technical Field
The invention relates to the technical field of application development, in particular to a method and a terminal for loading real-Native capability.
Background
The fact Native (RN) is a cross-platform mobile application development framework sourced by Facebook in 2015 4, and currently supports two major platforms, namely iOS and android. The RN develops mobile applications using Javascript language, JSX similar to HTML, and CSS, so a person familiar with Web front-end development needs little learning to enter the field of mobile application development.
In the source code implementation of the RN, the injection of native capabilities (including native modules and UI components) is uniformly completed when the RN initializes. The implementation has a disadvantage that as the project is continuously enlarged, the injected native capability is continuously increased, and the workload required to be injected is continuously increased during initialization, which may cause the performance bottleneck problems of too slow page loading and too long white screen time of the RN.
Disclosure of Invention
The technical problem to be solved by the invention is as follows: the loading method and the terminal for the React-Native capability are provided, and the problem that the first starting of a page is time-consuming is solved.
In order to solve the technical problems, the invention adopts the technical scheme that:
a loading method of real-Native ability comprises the following steps:
s1, reading the Native capability information of the read-Native page to be jumped;
s2, determining the Native capability of the read-Native page to be jumped according to the Native capability information;
and S3, injecting the Native ability into the currently running React-Native project.
In order to solve the technical problems, the invention adopts the technical scheme that:
a read-Native capability loading terminal comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the following steps when executing the computer program:
s1, reading the Native capability information of the read-Native page to be jumped;
s2, determining the Native capability of the read-Native page to be jumped according to the Native capability information;
and S3, injecting the Native ability into the currently running React-Native project.
The invention has the beneficial effects that: the Native ability of the React-Native page to be jumped is determined according to the Native ability information by reading the Native ability information of the React-Native page to be jumped, and the Native ability is injected into the currently running React-Native project, so that the Native ability of the React-Native page can be loaded as required, the association between the pages can be better decoupled, the problem of time consumption for the first starting of the page is optimized, and the performance is improved.
Drawings
FIG. 1 is a flowchart of a method for loading React-Native capabilities according to an embodiment of the present invention;
FIG. 2 is a schematic structural diagram of a read-Native capability loading terminal according to an embodiment of the present invention;
description of reference numerals:
1. a loading terminal of real-Native capability; 2. a memory; 3. a processor.
Detailed Description
In order to explain technical contents, achieved objects, and effects of the present invention in detail, the following description is made with reference to the accompanying drawings in combination with the embodiments.
The method comprises the steps of reading the Native capability information of a read-Native page to be jumped, determining the Native capability of the read-Native page to be jumped according to the Native capability information, and injecting the Native capability into a currently running read-Native project.
Referring to fig. 1, a method for loading real-Native capability includes the steps of:
s1, reading the Native capability information of the read-Native page to be jumped;
s2, determining the Native capability of the read-Native page to be jumped according to the Native capability information;
and S3, injecting the Native ability into the currently running React-Native project.
From the above description, the beneficial effects of the present invention are: the Native ability of the React-Native page to be jumped is determined according to the Native ability information by reading the Native ability information of the React-Native page to be jumped, and the Native ability is injected into the currently running React-Native project, so that the Native ability of the React-Native page can be loaded as required, the association between the pages can be better decoupled, the problem of time consumption for the first starting of the page is optimized, and the performance is improved.
Further, step S1 is preceded by:
and creating a first file providing the Native capability information of the page in the read-Native page.
According to the description, the Native capability information of the React-Native pages is preset, each React-Native page is provided with the corresponding file for providing the Native capability information, preparation is made for loading the subsequent Native capability as required, and convenience in obtaining the corresponding React-Native pages is improved.
Further, step S1 is specifically:
and reading a first file corresponding to the read-Native page to be jumped to obtain the Native capability information of the read-Native page to be jumped.
According to the description, the original ability of the read-Native page to be jumped can be loaded only when the page is jumped by reading the file of the original ability information corresponding to the read-Native page to be jumped, and the performance is improved.
Further, the native capabilities include native modules and UI components;
the step S3 includes:
injecting the Native module into a currently running React-Native project;
and injecting the UI component into the currently running React-Native project.
Further, the step of injecting the UI component into the currently running React-Native project comprises the step of injecting the UI component into the Native end and the Javascript end of the currently running React-Native project respectively;
injecting the UI component into the Native end of the currently running React-Native project comprises the following steps:
merging all UI components needing to be injected, and injecting the merged UI components to the original end of the currently running React-Native project;
injecting the UI component into a Javascript end of a currently running React-Native project comprises the following steps:
and merging the UI component into an existing Native component mapping table of the currently running React-Native project, and declaring that the UI component can be called by a Native terminal.
According to the description, the UI components are injected into the native end, so that the corresponding UI components can be found when the UI components are rendered, the UI components are injected into the Javascript end, the corresponding registration classes of the Javascript code can be found when the native UI components are called, the code can run normally, and the reliability of loading native capability as required is guaranteed through the injection of the UI components at the two ends.
Referring to fig. 2, a read-Native capability loading terminal 1 includes a memory 2, a processor 3 and a computer program stored in the memory 2 and executable on the processor 3, wherein the processor 3 implements the following steps when executing the computer program:
s1, reading the Native capability information of the read-Native page to be jumped;
s2, determining the Native capability of the read-Native page to be jumped according to the Native capability information;
and S3, injecting the Native ability into the currently running React-Native project.
From the above description, the beneficial effects of the present invention are: the Native ability of the React-Native page to be jumped is determined according to the Native ability information by reading the Native ability information of the React-Native page to be jumped, and the Native ability is injected into the currently running React-Native project, so that the Native ability of the React-Native page can be loaded as required, the association between the pages can be better decoupled, the problem of time consumption for the first starting of the page is optimized, and the performance is improved.
Further, step S1 is preceded by:
and creating a first file providing the Native capability information of the page in the read-Native page.
According to the description, the Native capability information of the React-Native pages is preset, each React-Native page is provided with the corresponding file for providing the Native capability information, preparation is made for loading the subsequent Native capability as required, and convenience in obtaining the corresponding React-Native pages is improved.
Further, step S1 is specifically:
and reading a first file corresponding to the read-Native page to be jumped to obtain the Native capability information of the read-Native page to be jumped.
According to the description, the original ability of the read-Native page to be jumped can be loaded only when the page is jumped by reading the file of the original ability information corresponding to the read-Native page to be jumped, and the performance is improved.
Further, the native capabilities include native modules and UI components;
the step S3 includes:
injecting the Native module into a currently running React-Native project;
and injecting the UI component into the currently running React-Native project.
Further, the step of injecting the UI component into the currently running React-Native project comprises the step of injecting the UI component into the Native end and the Javascript end of the currently running React-Native project respectively;
injecting the UI component into the Native end of the currently running React-Native project comprises the following steps:
merging all UI components needing to be injected, and injecting the merged UI components to the original end of the currently running React-Native project;
injecting the UI component into a Javascript end of a currently running React-Native project comprises the following steps:
and merging the UI component into an existing Native component mapping table of the currently running React-Native project, and declaring that the UI component can be called by a Native terminal.
According to the description, the UI components are injected into the native end, so that the corresponding UI components can be found when the UI components are rendered, the UI components are injected into the Javascript end, the corresponding registration classes of the Javascript code can be found when the native UI components are called, the code can run normally, and the reliability of loading native capability as required is guaranteed through the injection of the UI components at the two ends.
Example one
Referring to fig. 1, a method for loading real-Native capability includes the steps of:
s1, reading the Native capability information of the read-Native page to be jumped;
specifically, a first file for storing the Native capability information which is not provided by the system of the page is created under a source code directory of the read-Native page, then the first file corresponding to the read-Native page to be jumped is read to obtain the Native capability information of the read-Native page to be jumped,
wherein the first file is an sdk.json file;
s2, determining the Native capability of the read-Native page to be jumped according to the Native capability information;
s3, injecting the Native ability into the currently running React-Native project;
the native capabilities include native modules and UI components;
specifically, the method comprises the following steps:
injecting the Native module into a currently running React-Native project;
injecting the UI component into a currently running React-Native project;
the step of injecting the UI component into the currently running React-Native project comprises the step of injecting the UI component into the Native end and the Javascript end of the currently running React-Native project respectively;
injecting the UI component into the Native end of the currently running React-Native project comprises the following steps:
merging all UI components needing to be injected, and injecting the merged UI components to the original end of the currently running React-Native project;
injecting the UI component into a Javascript end of a currently running React-Native project comprises the following steps:
and merging the UI component into an existing Native component mapping table of the currently running React-Native project, and declaring that the UI component can be called by a Native terminal.
Example two
The method described in the first embodiment is applied to a specific example, and this embodiment is implemented in an Android system, and of course, may also be implemented in an IOS system:
creating an sdk json file for storing non-system provided Native capability information under a source directory of a read-Native page:
s1, reading the Native capability information of the read-Native page to be jumped;
s2, determining the Native capability of the read-Native page to be jumped according to the Native capability information;
wherein the native capabilities include native modules and UI components;
specifically, an sdk.json file corresponding to the read-Native (hereinafter referred to as RN) page to be jumped is read, a Native capability management package ReactPackage corresponding to the read-Native page to be jumped is obtained, and the Native capability of the read-Native page to be jumped is determined;
and S3, injecting the Native ability into the currently running React-Native project.
Specifically, the method comprises the following steps:
and injecting the Native module into a currently running React-Native project:
the method comprises the steps that the processPasackages method of an RN example management type ReactInstanceManager is obtained by utilizing the native reflection capability of Android, the processPasackages method can generate the registration type of a native module, but the method belongs to a private method, and an external type cannot be obtained under the normal condition;
the native reflectivity of the Android is a powerful technical characteristic, and the behavior of the program can be modified when the program runs, so that the application program breaks through the limits of some original code bases and achieves the purpose which cannot be achieved by some conventional means;
calling a catalysis instance class in an RN instance management class ReactInstanceManager, and the extensedNulativeModules method can inject the registration class of the native module into a running RN item native module registry, so as to inject the native module provided by the RN page to be jumped into the currently running RN item, wherein the specific code implementation is as follows:
injecting the UI component into a currently running React-Native project, wherein the UI component is respectively injected into a Native end and a Javascript end of the currently running React-Native project;
the native terminal in the embodiment is an Android terminal;
(1) injecting the UI component into the Native end of the currently running React-Native project comprises the following steps:
merging all UI components needing to be injected, and injecting the merged UI components to the original end of the currently running React-Native project;
specifically, a UIManagerModule of a native UI component management type of an Android terminal is obtained, all native UI components needing to be additionally injected are merged together, an updateConstants method of the UIManagerModule is called, the native UI components are injected at the Android terminal, the UI components of the RN page can be found when the UI components are rendered on the RN page, and specific codes are realized as follows:
(2) injecting the UI component into a Javascript end of a currently running React-Native project comprises the following steps:
merging the UI component into an existing Native component mapping table of a currently running real-Native project, and declaring that the UI component can be called by a Native terminal;
specifically, calling the regViewManager method provided by the addionpackagejsmodule class registered at the Javascript end to realize Javascript end injection, in the addionpackagejsmodule class at the Javascript end, the regViewManager method merges the incoming native UI component into the existing native component mapping table of the RN item, and the addionpackagejsmodule class needs to use the register callablemodule method of BatchedBridge to declare that the UI component can be directly called by the Android native, so that the native UI component is injected into the original component mapping table at the Javascript end at the Android end, and the Javascript code is guaranteed to find the corresponding registration class when calling the native UI component, so that the code runs normally, and the specific code is realized as follows:
EXAMPLE III
Applying the method described in the first embodiment to a specific scenario, in a friend circle function developed by an RN page, jumping from a friend circle list page to a publishing friend circle page:
s1, reading the React-Native page to be jumped, namely, issuing the Native ability information of the friend circle page;
s2, determining the native ability of the publishing friend circle page according to the native ability information;
specifically, an sdk.json file corresponding to a published friend circle page is read, and native capability information of the published friend circle page is obtained, wherein the native capability information comprises native capabilities of a native module, such as a geographic position acquisition module, a native module, a system camera opening module, a native UI component, gallery browsing and the like;
and S3, injecting the Native ability into the currently running React-Native project.
Specifically, the method comprises the following steps:
injecting Native modules such as a Native module acquisition geographical position, a Native module opening system camera and the like into a currently running real-Native project;
injecting UI components such as a Native UI component, a gallery browse and the like into a currently running real-Native project;
the step of injecting the UI component into the currently running React-Native project comprises the step of injecting the UI component into the Native end and the Javascript end of the currently running React-Native project respectively;
injecting the UI component into the Native end of the currently running React-Native project comprises the following steps:
merging all UI components needing to be injected, and injecting the merged UI components to the original end of the currently running React-Native project;
injecting the UI component into a Javascript end of a currently running React-Native project comprises the following steps:
and merging the UI component into an existing Native component mapping table of the currently running React-Native project, and declaring that the UI component can be called by a Native terminal.
Before jumping to the page of the publishing friend circle, the native capability required by the page of the publishing friend circle is injected, so that the function of the page of the publishing friend circle can be normally used, and when the application is opened to enter the page of the friend circle list, the slow loading caused by the injection of the native capability of the page of the publishing friend circle which can not be used temporarily can be avoided.
Example four
Referring to fig. 2, a read-Native capability loading terminal 1 includes a memory 2, a processor 3, and a computer program stored in the memory 2 and executable on the processor 3, wherein the processor 3 implements the steps of the first embodiment when executing the computer program.
In summary, according to the loading method and the terminal for the React-Native capability provided by the invention, the Native capability of the React-Native page to be jumped is determined according to the Native capability information by reading the Native capability information of the React-Native page to be jumped, and the Native capability is injected into the currently running React-Native project, so that the Native capability of the React-Native page can be loaded as required, the association between the pages can be better decoupled, the problem that the page is time-consuming to start for the first time is optimized, the performance is improved, Native UI components are respectively injected into the Native end and the Javascript end, the corresponding class can be found when the page is rendered or the code is called, and the function can run normally.
The above description is only an embodiment of the present invention, and not intended to limit the scope of the present invention, and all equivalent changes made by using the contents of the present specification and the drawings, or applied directly or indirectly to the related technical fields, are included in the scope of the present invention.
Claims (10)
1. A loading method of real-Native ability is characterized by comprising the following steps:
s1, reading the Native capability information of the read-Native page to be jumped;
s2, determining the Native capability of the read-Native page to be jumped according to the Native capability information;
and S3, injecting the Native ability into the currently running React-Native project.
2. The method for loading real-Native competence according to claim 1, further comprising before the step S1:
and creating a first file providing the Native capability information of the page in the read-Native page.
3. The method for loading fact-Native competence according to claim 2, wherein the step S1 is specifically as follows:
and reading a first file corresponding to the read-Native page to be jumped to obtain the Native capability information of the read-Native page to be jumped.
4. The method for loading React-Native capabilities according to claim 1, wherein the Native capabilities comprise Native modules and UI components;
the step S3 includes:
injecting the Native module into a currently running React-Native project;
and injecting the UI component into the currently running React-Native project.
5. The method for loading React-Native capabilities according to claim 4, wherein injecting the UI component into the currently running React-Native project comprises injecting the UI component into a Native end and a Javascript end of the currently running React-Native project respectively;
injecting the UI component into the Native end of the currently running React-Native project comprises the following steps:
merging all UI components needing to be injected, and injecting the merged UI components to the original end of the currently running React-Native project;
injecting the UI component into a Javascript end of a currently running React-Native project comprises the following steps:
and merging the UI component into an existing Native component mapping table of the currently running React-Native project, and declaring that the UI component can be called by a Native terminal.
6. A read-Native capability loading terminal comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the following steps when executing the computer program:
s1, reading the Native capability information of the read-Native page to be jumped;
s2, determining the Native capability of the read-Native page to be jumped according to the Native capability information;
and S3, injecting the Native ability into the currently running React-Native project.
7. The loading terminal of reach-Native capabilities according to claim 6, further comprising before the step S1:
and creating a first file providing the Native capability information of the page in the read-Native page.
8. The load terminal of reach-Native capabilities according to claim 7, wherein the step S1 is specifically as follows:
and reading a first file corresponding to the read-Native page to be jumped to obtain the Native capability information of the read-Native page to be jumped.
9. The load terminal of reach-Native capabilities of claim 6, wherein the Native capabilities include Native modules and UI components;
the step S3 includes:
injecting the Native module into a currently running React-Native project;
and injecting the UI component into the currently running React-Native project.
10. The load terminal of reach-Native capabilities according to claim 9, wherein injecting the UI component into the currently running reach-Native project comprises injecting the UI component into a Native end and a Javascript end of the currently running reach-Native project, respectively;
injecting the UI component into the Native end of the currently running React-Native project comprises the following steps:
merging all UI components needing to be injected, and injecting the merged UI components to the original end of the currently running React-Native project;
injecting the UI component into a Javascript end of a currently running React-Native project comprises the following steps:
and merging the UI component into an existing Native component mapping table of the currently running React-Native project, and declaring that the UI component can be called by a Native terminal.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811036363.5A CN110889058A (en) | 2018-09-06 | 2018-09-06 | Method and terminal for loading real-Native capability |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811036363.5A CN110889058A (en) | 2018-09-06 | 2018-09-06 | Method and terminal for loading real-Native capability |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110889058A true CN110889058A (en) | 2020-03-17 |
Family
ID=69744299
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811036363.5A Pending CN110889058A (en) | 2018-09-06 | 2018-09-06 | Method and terminal for loading real-Native capability |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110889058A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111459467A (en) * | 2020-04-03 | 2020-07-28 | 大汉软件股份有限公司 | Method for realizing mobile government affair multi-terminal hybrid development mode |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106445583A (en) * | 2016-08-31 | 2017-02-22 | 广州品唯软件有限公司 | Page display method, equipment and system |
| CN106569856A (en) * | 2016-11-02 | 2017-04-19 | 腾讯音乐娱乐（深圳）有限公司 | Method and device of loading application view resource file |
| WO2017151546A1 (en) * | 2016-03-01 | 2017-09-08 | 650 Industries, Inc. | Method and apparatus for loading multiple differing versions of a native library into a native environment |
| CN108021614A (en) * | 2017-08-18 | 2018-05-11 | 口碑(上海)信息技术有限公司 | A kind of method and system for page dynamic load |
| CN108132809A (en) * | 2017-11-29 | 2018-06-08 | 五八有限公司 | Method, apparatus, terminal and the storage medium of loading |
-
2018
- 2018-09-06 CN CN201811036363.5A patent/CN110889058A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2017151546A1 (en) * | 2016-03-01 | 2017-09-08 | 650 Industries, Inc. | Method and apparatus for loading multiple differing versions of a native library into a native environment |
| CN106445583A (en) * | 2016-08-31 | 2017-02-22 | 广州品唯软件有限公司 | Page display method, equipment and system |
| CN106569856A (en) * | 2016-11-02 | 2017-04-19 | 腾讯音乐娱乐（深圳）有限公司 | Method and device of loading application view resource file |
| CN108021614A (en) * | 2017-08-18 | 2018-05-11 | 口碑(上海)信息技术有限公司 | A kind of method and system for page dynamic load |
| CN108132809A (en) * | 2017-11-29 | 2018-06-08 | 五八有限公司 | Method, apparatus, terminal and the storage medium of loading |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111459467A (en) * | 2020-04-03 | 2020-07-28 | 大汉软件股份有限公司 | Method for realizing mobile government affair multi-terminal hybrid development mode |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107861713B (en) | Data calling method and device and computer readable storage medium | |
| KR102179149B1 (en) | Page component dynamic layout | |
| US9928088B2 (en) | Method, apparatus, server and system for implementing web application | |
| CN109284472B (en) | Front-end webpage loading method and storage medium based on webpack | |
| WO2019072201A1 (en) | Webpage content extraction method and terminal device | |
| CN106648685B (en) | Intelligent terminal system application processing method and device and intelligent terminal | |
| CN108572965A (en) | A kind of resource loading method and device | |
| WO2016177341A1 (en) | Interface calling method and device, and terminal | |
| CN103970563A (en) | Dynamic Android class loading method | |
| CN108776592B (en) | Page construction method, device, equipment and storage medium | |
| WO2015074526A1 (en) | Method and apparatus for injecting java by tecode into target process | |
| CN107479868B (en) | Interface loading method, device and equipment | |
| CN112559026B (en) | API (application program interface) -based native capability development method, device and storage medium | |
| CN108427636A (en) | Test method, system and the electronic equipment of application | |
| CN102693238B (en) | Widget application process, system and multimedia terminal | |
| CN108170430B (en) | Interface display method and system | |
| US10789751B2 (en) | Method and apparatus for implementing animation in client application and animation script framework | |
| CN110889058A (en) | Method and terminal for loading real-Native capability | |
| CN107807831A (en) | Business in application program performs method, apparatus, terminal and storage medium | |
| CN109299331B (en) | Method and device for displaying hypertext markup language HTML5 page by Air | |
| CN109446454A (en) | A kind of high performance PHPWeb system framework of lightweight and working method | |
| CN116450232A (en) | Application preprocessing method, device, equipment and storage medium | |
| CN108021567B (en) | Method and device for self-adaptively customizing fonts of browser | |
| CN109558375B (en) | Optimized file storage method, storage medium, equipment and system | |
| CN112559021A (en) | Mobile terminal small application development management system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |