CN106843850A - A kind of method and apparatus that native objects are transmitted between React Native components - Google Patents
A kind of method and apparatus that native objects are transmitted between React Native components Download PDFInfo
- Publication number
- CN106843850A CN106843850A CN201611234768.0A CN201611234768A CN106843850A CN 106843850 A CN106843850 A CN 106843850A CN 201611234768 A CN201611234768 A CN 201611234768A CN 106843850 A CN106843850 A CN 106843850A
- Authority
- CN
- China
- Prior art keywords
- native
- data management
- main
- memory data
- react
- 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.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/448—Execution paradigms, e.g. implementations of programming paradigms
- G06F9/4488—Object-oriented
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Devices For Executing Special Programs (AREA)
- Stored Programmes (AREA)
Abstract
The present invention proposes a kind of method and apparatus that native objects are transmitted between React Native components.This transmits the method for native objects between React Native components, including：The native object encapsulations to be cased of the first React Native components are the vanning object of universal class by main-memory data management module；First React Native components send the vanning object to javascript business logic modules；2nd React Native components receive the vanning object of the javascript business logic modules forwarding；The main-memory data management module to the vanning object devan after operating and obtains the native objects, and any type of native objects are transmitted by javascript.
Description
Technical field
Transmitted between React Native components the present invention relates to React Native technical fields, more particularly to one kind
The method and apparatus of native objects.
Background technology
React Native are a kind of technologies for allowing developer that primary App is built using preceding end instruction, and its principle is right
Primary UI components are packaged, and reach the purpose that primary UI component constructions interface is allocated using javascript.That builds is primary
App has the flexibility of web App simultaneously, and has the advantages that good interactive experience.
In actual development is carried out using React Native, it is often necessary between the component/API of React Native
Data are transmitted by javascript, i.e., the component/API of one of React Native sends data to javascript,
Javascript is used by sending data to another React Native components/API after Business Processing.Data it is logical
Be integer, floating type, character string, array, dictionary etc. with type, the data of the above-mentioned type can directly in javascript and
Transmitted between React Native components/API.But, ReactNative frameworks cannot be by some special native objects such as
Image objects, customized model etc. are converted into the recognizable objects of javascript, can only be by the internal memory of native objects
Address is processed as 16 system numbers or character string；Another problem is the native objects after object gives javascript
Life cycle how to manage.Accordingly, it would be desirable to it is a kind of between React Native components transmit native objects method and
Device, to solve above-mentioned technical problem present in prior art.
The content of the invention
The present invention provides a kind of method and apparatus that native objects are transmitted between React Native components, passes through
Javascript transmits any type of native objects.
The technical solution adopted by the present invention is：A kind of side that native objects are transmitted between React Native components
Method, including：The native object encapsulations to be cased of the first React Native components are general by main-memory data management module
The vanning object of type；First React Native components send the vanning object to javascript business logic modules；
2nd React Native components receive the vanning object of the javascript business logic modules forwarding；The internal memory
Data management module to the vanning object devan after operating and obtains the native objects.
Preferably, the main-memory data management module is by the native objects to be cased of a React Native components
It is encapsulated as after the vanning object of universal class, methods described also includes：The strong of the native objects to be cased is preserved to draw
With.
Preferably, after the strongly reference of native objects to be cased described in the preservation, methods described also includes：Institute
The transmission of javascript business logic modules is stated to release order to main-memory data management component；The main-memory data management component base
The removal of the main-memory data management module is called to quote to be cased described in interface removal native pairs in described releasing order
The strongly reference of elephant.
Preferably, the main-memory data management module is by the native objects to be cased of a React Native components
Before being encapsulated as the vanning object of universal class, methods described also includes：Described in the first React Native component calls
The packing method of main-memory data management module；Correspondingly, the main-memory data management module is devaned to the vanning object
Before the native objects are obtained after operation, methods described also includes：Described in the 2nd React Native component calls
The unpacking method of main-memory data management module.
Present invention also offers a kind of device that native objects are transmitted between React Native components, including：It is interior
Deposit data management module, for being universal class by the native object encapsulations to be cased of a React Native components
Vanning object；First React Native components, for sending the vanning object to javascript business logic modules；The
Two React Native components, the vanning object for receiving the javascript business logic modules forwarding；It is described
Main-memory data management module, the native objects are obtained after the operation that is additionally operable to the vanning object devan.
Preferably, the data management preserving module, is additionally operable to：The strong of the native objects to be cased is preserved to draw
With.
Preferably, described device, also includes, main-memory data management component, is used for：The javascript service logics mould
Block sends and releases order to the main-memory data management component, and the main-memory data management component is based on the release
The strongly reference that interface removes the native objects to be cased is quoted in the removal of main-memory data management module described in instruction calls.
Preferably, the React Native components, are additionally operable to：In the main-memory data management module by first
Before the native object encapsulations to be cased of React Native components are for the vanning object of universal class, the internal memory is called
The packing method of data management module；Correspondingly, the 2nd React Native components, are additionally operable to：In the internal storage data
Management module to the vanning object devan before obtaining the native objects after operating, the 2nd React
The unpacking method of main-memory data management module described in Native component calls.
Using above-mentioned technical proposal, the present invention at least has following effect：
Using the method that native objects are transmitted between React Native components of the invention, by javascript
Transmit any type of native objects.
Brief description of the drawings
Fig. 1 is the flow of the method that first embodiment of the invention transmits native objects between React Native components
Figure；
Fig. 2 is the flow of the method that second embodiment of the invention transmits native objects between React Native components
Figure；
Fig. 3 is that fourth embodiment of the invention transmits internal memory in the device of native objects between React Native components
The block diagram of data management module.
Specific embodiment
Further to illustrate the present invention to reach technological means and effect that predetermined purpose is taken, below in conjunction with accompanying drawing
And preferred embodiment, the present invention is described in detail as after.
The method that native objects are transmitted between React Native components that the present invention is provided, can pass through
Javascript transmits any type of native objects.Will be described in detail below of the invention in ReactNative components
Between transmit native objects method and its each step.
Wherein, React Native are that the use javascript and react that facebook is released builds primary app
Technology.It should be noted that native objects involved in the present invention, are that javascript cannot be used in the prior art
Native objects.In React Native, these native objects are by some React Native component or React
Native interfaces are produced, and other ReactNative components or React Native interfaces is passed to via javascript
Used, Javascript does not use these ReactNative objects in itself.
First embodiment
As depicted in figs. 1 and 2, the disclosed side that native objects are transmitted between React Native components of the present embodiment
Method, including：Step S2：Main-memory data management module is by a React Native components (the React Native groups in such as Fig. 2
Part A) native object encapsulations to be cased for universal class vanning object；Step S4：First React Native components
Send vanning object to javascript business logic modules；Step S5：2nd React Native components are (in Fig. 2
React native component B) receive the vanning object that javascript business logic modules are forwarded；Step S6：Internal storage data pipe
Reason module to vanning object devan after operating and obtains native objects.
The present embodiment realizes native objects to be cased by filling main-memory data management module in native end seals
Encapsulate and devan operation, realizes the transmission of the native objects that javascript business logic modules can not be recognized.
Javascript business logic modules, the logic of business development is carried out by front end developer using javascript,
It depends on React Native components, and building and calling native for interface is completed using React Native components and interface
Function.Javascript business logic modules add flag by main-memory data management module in the vanning object of encapsulation
To judge the data or the data of universal class of the vanning pair as if vanning for obtaining.
Second embodiment
As shown in Fig. 2 on the basis of first embodiment, step S2：Main-memory data management module is by a React
The native object encapsulations to be cased of Native components (the React Native component A in such as Fig. 2) are the dress of universal class
After case object, the method that native objects are transmitted between React Native components of the present embodiment also includes：Step
S3：Preserve the strongly reference of native objects to be cased.The purpose of the present embodiment is, in vanning, main-memory data management module
Retain the strongly reference of native objects to be cased, prevent native objects to be released.
Further, step S3：After preserving the strongly reference of native objects to be cased, the present embodiment in React
The method that native objects are transmitted between Native components, also includes：Step S8：Javascript business logic modules send and release
Put instruction to main-memory data management component；Main-memory data management component is based on releasing order calling the shifting of main-memory data management module
The strongly reference of native objects to be cased is removed except reference interface.The present embodiment encapsulates main-memory data management component, realizes
The strongly reference of native objects of the javascript after the main-memory data management component directly operates vanning, it is ensured that native
The complete lifecycle of object, prevents main-memory data management module from not discharged always to native objects.
3rd embodiment
As shown in Fig. 2 on the basis of first embodiment and second embodiment, step S2：Main-memory data management module will
The native object encapsulations to be cased of the first React Native components (the React Native component A in such as Fig. 2) are logical
Before the vanning object of type, the method that native objects are transmitted between React Native components of the present embodiment, also
Including：The packing method of the first React Native component call main-memory data management modules；Correspondingly, step S6：Interior poke
Before vanning object devan according to management module obtain native objects after operation, the present embodiment in React Native
The method that native objects are transmitted between component, also includes：The 2nd React Native components (React in such as Fig. 2
Native component B) call the unpacking method of main-memory data management module.
The present embodiment sets up main-memory data management module at native ends, needs to transfer to javascript to transmit for managing
Native objects, a React Native components called before needing for native objects to be transferred to javascript
The packing method of main-memory data management module, is the vanning object of universal class by the native object encapsulations.As the 2nd React
When Native components receive the vanning object, the unpacking method of main-memory data management module is called, obtain and original wait to case
Native objects.
Fourth embodiment
As shown in Fig. 2 present embodiments providing a kind of dress that native objects are transmitted between React Native components
Put, including：Main-memory data management module, for being by the native object encapsulations to be cased of a React Native components
The vanning object of universal class；First React Native components (the ReactNative component A in such as Fig. 2), fill for sending
Case object is to javascript business logic modules；2nd React Native components (the React Native components in such as Fig. 2
B), for receiving the vanning object that javascript business logic modules are forwarded；Main-memory data management module, is additionally operable to vanning
Object devan after operating and obtains native objects.
As shown in figure 3, main-memory data management module provides what native objects were cased and devaned for native ends
Native interfaces, box load interface by the native objects of the specific type of native be converted to that javascript can receive it is logical
With type, interface of devaning then performs opposite operation, is native objects to be cased by the data convert after vanning.
5th embodiment
As shown in Fig. 2 between React Native components in the device of transmission native objects, main-memory data management is protected
Storing module, is additionally operable to：Preserve the strongly reference of native objects to be cased.
Further, the device that native objects are transmitted between React Native components of the present embodiment, also includes,
Main-memory data management component, is used for：Javascript business logic modules send and release order to main-memory data management component
Under the conditions of, main-memory data management component is based on releasing order and calls the removal of main-memory data management module to quote interface (referring to Fig. 3
RN interfaces in removal quote interface) remove the strongly reference of native objects to be cased.
Main-memory data management module safeguards a data structure, and such as one storehouse performs incasement operation for preserving
Native objects strongly reference, prevent native objects to be released, and provide release strongly reference object removal quote interface,
The removal quotes interface wait the vanning object after the native objects or vanning cased, in the data structure safeguarded
Specified native objects to be cased are removed.
React Native main-memory data management components are that javascript directly operates the logical of main-memory data management module
Road.The component provides at a removal interface for the strongly reference for removing native objects to be cased, and this removes interface correspondence
The removal of main-memory data management module is quoted interface and is packaged, so that javascript is after the completion of using native objects,
Notify main-memory data management module release native objects, prevent its release from not falling, it is ensured that native objects to be cased it is complete
Whole life cycle.Other interfaces can in the assembly be added on demand in addition, so that javascript is to internal storage data management module
Operation it is more flexible.
As shown in figure 3, in main-memory data management module, encapsulation of data accumulation layer first, then encapsulate layer data management
Layer, provides at addition interface and the interface other interfaces such as (can freely add replacement according to demand and) searching deleted, for upper
Layer provides unified service.Then on the basis of data management layer, an interface layer is encapsulated, the interface layer includes native interfaces
With React Native interfaces (the RN interfaces such as in figure), encapsulate native calling interfaces respectively and React Native are called and connect
Mouthful.Native interfaces provide packing method and unpacking method for React Native components, and React Native interfaces are
Javascript provides the strongly reference for removing native objects to be cased.
Sixth embodiment
As shown in Fig. 2 a React Native components (the React Native component A in such as Fig. 2), are additionally operable to：
The native object encapsulations to be cased of the first React Native components are the dress of universal class by main-memory data management module
Before case object, the packing method of the main-memory data management module is called；Correspondingly, the 2nd React Native components are (such as
React Native component B in Fig. 2), it is additionally operable to：After main-memory data management module to vanning object devan and operates
To before native objects, the unpacking method of the 2nd React Native component call main-memory data management modules.
First React Native components and the 2nd React Native components are the React Native of custom encapsulation
Component, these React Native components depend on main-memory data management module, are needing to pass the special object at native ends
, it is necessary to call the packing method of main-memory data management module when passing javascript, and the vanning object after vanning is transmitted
To javascript, in the vanning object after receiving vanning, it is necessary to call the unpacking method of main-memory data management module to obtain
The native objects of originally to be cased.
Illustrate
The box load interface of main-memory data management module receives a native object for id (any) type, is treated for specifying
The native objects of vanning, return to a dictionary type data, and incasement operation turns the native objects of id types to be cased
A vanning object for dictionary type is changed to, the vanning object for returning to the dictionary type for coming includes at least one key：
" address ", the memory address of the native objects for recording id types.
After the vanning object of one dictionary type of interface of devaning of main-memory data management module, operation of devaning is carried out
The native objects of original id types are returned afterwards.Operation of devaning parses the vanning object of dictionary type, and " address " is pointed to
Memory address, be converted to the native objects of id types.
In main-memory data management module, a data structure for dictionary type, Object Life Cycle of referred to as casing are added
Management dictionary, the data structure is initialized in main-memory data management module initialization.When incasement operation is performed every time, use
Key in vanning object：" address " corresponding value as key, using the native objects of the id types of incasement operation as
Value, a data is inserted in managing dictionary to vanning Object Life Cycle.In addition, remove quoting one id type of interface
After native objects, it is sky to return to the value of the 2nd React Native components.Remove and quote the native that interface first judges to receive
Whether object is dictionary type, if dictionary type, then it is assumed that is the vanning object after vanning, reads " address " field
Value, and remove data with this value as key in vanning Object Life Cycle management dictionary；If the native objects for receiving
It is not dictionary type, then it is assumed that be the native objects to be cased before vanning, the native objects to be cased is signified
To object memory address switch to character string, and removed with this character string as key in vanning Object Life Cycle management dictionary
Data.
By the explanation of specific embodiment, should to the present invention for reach technological means that predetermined purpose is taken and
Effect is able to more go deep into and specific understanding, but appended diagram is only to provide reference and purposes of discussion, not for originally
Invention is any limitation as.
Claims (8)
1. it is a kind of between React Native components transmit native objects method, it is characterised in that including：
The native object encapsulations to be cased of the first React Native components are universal class by main-memory data management module
Vanning object；
First React Native components send the vanning object to javascript business logic modules；
2nd React Native components receive the vanning object of the javascript business logic modules forwarding；
The main-memory data management module to the vanning object devan after operating and obtains the native objects.
2. method according to claim 1, it is characterised in that the main-memory data management module is by a React
After the native object encapsulations to be cased of Native components are for the vanning object of universal class, methods described also includes：
Preserve the strongly reference of the native objects to be cased.
3. method according to claim 2, it is characterised in that the strong of native objects to be cased described in the preservation is drawn
After, methods described also includes：
The javascript business logic modules send and release order to main-memory data management component；
The main-memory data management component is based on described releasing order and calls the removal reference of the main-memory data management module to connect
Mouth removes the strongly reference of the native objects to be cased.
4. according to the method in any one of claims 1 to 3, it is characterised in that the main-memory data management module is by
Before the native object encapsulations to be cased of one React Native components are for the vanning object of universal class, methods described,
Also include：
The packing method of main-memory data management module described in the first React Native component calls；
Correspondingly, the main-memory data management module obtains the native objects after to the vanning object devan and operating
Before, methods described, also includes：
The unpacking method of main-memory data management module described in the 2nd React Native component calls.
5. it is a kind of between React Native components transmit native objects device, it is characterised in that including：
Main-memory data management module, for being general by the native object encapsulations to be cased of a React Native components
The vanning object of type；
First React Native components, for sending the vanning object to javascript business logic modules；
2nd React Native components, the vanning for receiving the javascript business logic modules forwarding is right
As；
The main-memory data management module, described native pairs is obtained after the operation that is additionally operable to the vanning object devan
As.
6. device according to claim 5, it is characterised in that the main-memory data management module, is additionally operable to：
Preserve the strongly reference of the native objects to be cased.
7. device according to claim 6, it is characterised in that described device, also includes, main-memory data management component, uses
In：
The javascript business logic modules send and release order to the main-memory data management component, described
Main-memory data management component is based on described releasing order and calls the removal of the main-memory data management module to quote interface removal institute
State the strongly reference of native objects to be cased.
8. the device according to claim 6 or 7, it is characterised in that the React Native components, is additionally operable to：
By the native object encapsulations to be cased of a React Native components it is logical in the main-memory data management module
Before with the vanning object of type, the packing method of the main-memory data management module is called；
Correspondingly, the 2nd React Native components, are additionally operable to：
Before the native objects are obtained after the main-memory data management module to the vanning object devan and operates,
The unpacking method of main-memory data management module described in the 2nd React Native component calls.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611234768.0A CN106843850B (en) | 2016-12-28 | 2016-12-28 | Method and device for transferring Native objects between read Native components |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611234768.0A CN106843850B (en) | 2016-12-28 | 2016-12-28 | Method and device for transferring Native objects between read Native components |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106843850A true CN106843850A (en) | 2017-06-13 |
| CN106843850B CN106843850B (en) | 2020-05-15 |
Family
ID=59114343
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201611234768.0A Active CN106843850B (en) | 2016-12-28 | 2016-12-28 | Method and device for transferring Native objects between read Native components |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106843850B (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107908398A (en) * | 2017-11-08 | 2018-04-13 | 四川长虹电器股份有限公司 | Method based on React technique constructions web applications |
| CN108804197A (en) * | 2018-06-19 | 2018-11-13 | 北京五八信息技术有限公司 | A kind of dynamic assembly implementation method, device, equipment and storage medium |
| CN108958943A (en) * | 2018-07-25 | 2018-12-07 | 北京小米移动软件有限公司 | Memory release method and device |
| CN109032583A (en) * | 2018-07-25 | 2018-12-18 | 北京小米移动软件有限公司 | Data interactive method and device |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105468369A (en) * | 2015-11-19 | 2016-04-06 | 深圳联友科技有限公司 | Method and system for calling native function by JavaScript on mobile platform |
| CN105589693A (en) * | 2015-12-18 | 2016-05-18 | 国云科技股份有限公司 | React-native-based method for rapidly realizing data acquisition of mobile terminals |
-
2016
- 2016-12-28 CN CN201611234768.0A patent/CN106843850B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105468369A (en) * | 2015-11-19 | 2016-04-06 | 深圳联友科技有限公司 | Method and system for calling native function by JavaScript on mobile platform |
| CN105589693A (en) * | 2015-12-18 | 2016-05-18 | 国云科技股份有限公司 | React-native-based method for rapidly realizing data acquisition of mobile terminals |
Non-Patent Citations (2)
| Title |
|---|
| ALON ZHANG: "React Native 的组件通信方式", 《HTTPS://JINLONG.GITHUB.IO/2016/12/16/REACT-NATIVE-COMPONENT-COMMUNICATION/》 * |
| 朱_源浩: "8) React Native 与原生之间的通信(iOS)", 《HTTPS://WWW.JIANSHU.COM/P/9D7DBF17DAA5》 * |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107908398A (en) * | 2017-11-08 | 2018-04-13 | 四川长虹电器股份有限公司 | Method based on React technique constructions web applications |
| CN108804197A (en) * | 2018-06-19 | 2018-11-13 | 北京五八信息技术有限公司 | A kind of dynamic assembly implementation method, device, equipment and storage medium |
| CN108804197B (en) * | 2018-06-19 | 2022-04-05 | 北京五八信息技术有限公司 | Dynamic componentization implementation method, device, equipment and storage medium |
| CN108958943A (en) * | 2018-07-25 | 2018-12-07 | 北京小米移动软件有限公司 | Memory release method and device |
| CN109032583A (en) * | 2018-07-25 | 2018-12-18 | 北京小米移动软件有限公司 | Data interactive method and device |
| CN108958943B (en) * | 2018-07-25 | 2021-02-09 | 北京小米移动软件有限公司 | Memory release method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106843850B (en) | 2020-05-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106843850A (en) | A kind of method and apparatus that native objects are transmitted between React Native components | |
| CN103425491B (en) | A kind of game engine | |
| CN106612306A (en) | Data sharing method and device of virtual machine | |
| CN105917465B (en) | Scalable encapsulation architecture and the relevant technologies and configuration | |
| CN104572091B (en) | Application software implementation method, device and computer equipment | |
| CN106462524A (en) | Interconnect systems and methods using hybrid memory cube links | |
| CN103247612B (en) | A kind of enhancement mode FLASH chip and a kind of chip packaging method | |
| CN103236428B (en) | A kind of enhancement mode Flash chip and method for packing thereof containing RPMC | |
| CN108471401A (en) | A kind of encapsulation of CAN signal, analysis method and device | |
| CN107122252A (en) | A kind of interactive method between systems and device | |
| CN103853621A (en) | Inter-process interactive method and relevant terminal equipment | |
| CN104317578A (en) | Engine Lua script application and engine and Lua script mutual calling-based method and device | |
| CN101042424B (en) | Method and apparatus for detecting application-specific integrated circuits | |
| CN105591839A (en) | Device, method and system of testing network exchange chip | |
| CN107222363A (en) | One kind storage protocol conformance test method and system | |
| CN103219333B (en) | Enhancement mode Flash chip, method for packing and instruction executing method | |
| CN103746945A (en) | Data transmission device and method | |
| CN103558995B (en) | A kind of storage control chip and disk message transmitting method | |
| CN106815128A (en) | Log-output method and device, electronic equipment | |
| CN104979232A (en) | Method for storing wafer transfer box and system for realizing storage of wafer transfer box | |
| CN109101311A (en) | A kind of method and electronic equipment that display view is compatible | |
| CN104821982A (en) | Data recovery method | |
| CN105393176B (en) | Programmable controller and arithmetic processing system | |
| CN106657097B (en) | A kind of data transmission method for uplink and device | |
| CN103246553B (en) | A kind of enhancement mode Flash chip and a kind of chip packaging method |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |