一种在ReactNative组件之间传递native对象的方法和装置与流程

本发明涉及React Native技术领域，尤其涉及一种在React Native组件之间传递native对象的方法和装置。

背景技术：

React Native是一种允许开发者使用前端语言搭建原生App的技术，其原理是对原生UI组件进行封装，达到使用javascript调配原生UI组件构建界面的目的。搭建的原生App同时具有web App的灵活性，并且具有良好交互体验的优点。

在利用React Native进行实际开发中，经常需要在React Native的组件/API之间通过javascript传递数据，即其中一个React Native的组件/API发送数据至javascript，javascript经过业务处理后将数据发送至另一个React Native组件/API来使用。数据的通用类型为整型、浮点型、字符串、数组、字典等，上述类型的数据可以直接在javascript和React Native组件/API之间传递。但是，ReactNative框架无法将某些特殊的native对象如image对象、自定义的model等转换成javascript可识别的对象，只能将native对象的内存地址当作16进制数或字符串来处理；另一个问题是在对象交给javascript后，native对象的生命周期如何管理。因此，需要一种在React Native组件之间传递native对象的方法和装置，以解决现有技术中存在的上述技术问题。

技术实现要素：

本发明提供一种在React Native组件之间传递native对象的方法和装置，通过javascript传递任一类型的native对象。

本发明采用的技术方案是：一种在React Native组件之间传递native对象的方法，包括：内存数据管理模块将第一React Native组件的待装箱的native对象封装为通用类型的装箱对象；第一React Native组件发送所述装箱对象至javascript业务逻辑模块；第二React Native组件接收所述javascript业务逻辑模块转发的所述装箱对象；所述内存数据管理模块对所述装箱对象进行拆箱操作后得到所述native对象。

优选地，所述内存数据管理模块将第一React Native组件的待装箱的native对象封装为通用类型的装箱对象之后，所述方法，还包括：保存所述待装箱的native对象的强引用。

优选地，所述保存所述待装箱的native对象的强引用之后，所述方法，还包括：所述javascript业务逻辑模块发送释放指令至内存数据管理组件；所述内存数据管理组件基于所述释放指令调用所述内存数据管理模块的移除引用接口移除所述待装箱的native对象的强引用。

优选地，所述内存数据管理模块将第一React Native组件的待装箱的native对象封装为通用类型的装箱对象之前，所述方法，还包括：所述第一React Native组件调用所述内存数据管理模块的装箱方法；相应地，所述内存数据管理模块对所述装箱对象进行拆箱操作后得到所述native对象之前，所述方法，还包括：所述第二React Native组件调用所述内存数据管理模块的拆箱方法。

本发明还提供了一种在React Native组件之间传递native对象的装置，包括：内存数据管理模块，用于将第一React Native组件的待装箱的native对象封装为通用类型的装箱对象；第一React Native组件，用于发送所述装箱对象至javascript业务逻辑模块；第二React Native组件，用于接收所述javascript业务逻辑模块转发的所述装箱对象；所述内存数据管理模块，还用于对所述装箱对象进行拆箱操作后得到所述native对象。

优选地，所述数据管理保存模块，还用于：保存所述待装箱的native对象的强引用。

优选地，所述装置，还包括，内存数据管理组件，用于：所述javascript业务逻辑模块发送释放指令至所述内存数据管理组件的条件下，所述内存数据管理组件基于所述释放指令调用所述内存数据管理模块的移除引用接口移除所述待装箱的native对象的强引用。

优选地，所述第一React Native组件，还用于：在所述内存数据管理模块将第一React Native组件的待装箱的native对象封装为通用类型的装箱对象之前，调用所述内存数据管理模块的装箱方法；相应地，所述第二React Native组件，还用于：在所述内存数据管理模块对所述装箱对象进行拆箱操作后得到所述native对象之前，所述第二React Native组件调用所述内存数据管理模块的拆箱方法。

采用上述技术方案，本发明至少具有下列效果：

采用本发明的在React Native组件之间传递native对象的方法，通过javascript传递任一类型的native对象。

附图说明

图1为本发明第一实施例在React Native组件之间传递native对象的方法的流程图；

图2为本发明第二实施例在React Native组件之间传递native对象的方法的流程图；

图3为本发明第四实施例在React Native组件之间传递native对象的装置中内存数据管理模块的方框图。

具体实施方式

为更进一步阐述本发明为达成预定目的所采取的技术手段及功效，以下结合附图及较佳实施例，对本发明进行详细说明如后。

本发明提供的在React Native组件之间传递native对象的方法，可以通过javascript传递任一类型的native对象。下面将详细地描述本发明的在ReactNative组件之间传递native对象的方法及其各个步骤。

其中，React Native为facebook推出的一项使用javascript和react构建原生app的技术。需要说明的是，本发明所涉及的native对象，均是现有技术中javascript无法使用的native对象。在React Native中，这些native对象由某一个React Native组件或React Native接口产生，经由javascript传递给另外的ReactNative组件或者React Native接口进行使用，Javascript本身不使用这些ReactNative对象。

第一实施例

如图1和图2所示，本实施例公开的在React Native组件之间传递native对象的方法，包括：步骤S2：内存数据管理模块将第一React Native组件(如图2中的React Native组件A)的待装箱的native对象封装为通用类型的装箱对象；步骤S4：第一React Native组件发送装箱对象至javascript业务逻辑模块；步骤S5：第二React Native组件(如图2中的react native组件B)接收javascript业务逻辑模块转发的装箱对象；步骤S6：内存数据管理模块对装箱对象进行拆箱操作后得到native对象。

本实施例通过在native端封装内存数据管理模块来实现待装箱的native对象的封装和拆箱操作，实现javascript业务逻辑模块不能识别的native对象的传递。

Javascript业务逻辑模块，由前端开发者使用javascript进行业务开发的逻辑，它依赖于React Native组件，使用React Native组件和接口完成界面的搭建和调用native的功能。Javascript业务逻辑模块通过内存数据管理模块在封装的装箱对象中添加标识位来判断得到的装箱对象是装箱的数据还是通用类型的数据。

第二实施例

如图2所示，在第一实施例的基础上，步骤S2：内存数据管理模块将第一React Native组件(如图2中的React Native组件A)的待装箱的native对象封装为通用类型的装箱对象之后，本实施例的在React Native组件之间传递native对象的方法，还包括：步骤S3：保存待装箱的native对象的强引用。本实施例的目的为，在装箱时，内存数据管理模块保留待装箱的native对象的强引用，防止native对象被释放。

进一步地，步骤S3：保存待装箱的native对象的强引用之后，本实施例的在React Native组件之间传递native对象的方法，还包括：步骤S8：javascript业务逻辑模块发送释放指令至内存数据管理组件；内存数据管理组件基于释放指令调用内存数据管理模块的移除引用接口移除待装箱的native对象的强引用。本实施例封装内存数据管理组件，实现javascript通过该内存数据管理组件直接操作装箱后的native对象的强引用，保证native对象的完整生命周期，防止内存数据管理模块对native对象一直不释放。

第三实施例

如图2所示，在第一实施例和第二实施例的基础上，步骤S2：内存数据管理模块将第一React Native组件(如图2中的React Native组件A)的待装箱的native对象封装为通用类型的装箱对象之前，本实施例的在React Native组件之间传递native对象的方法，还包括：第一React Native组件调用内存数据管理模块的装箱方法；相应地，步骤S6：内存数据管理模块对装箱对象进行拆箱操作后得到native对象之前，本实施例的在React Native组件之间传递native对象的方法，还包括：第二React Native组件(如图2中的React Native组件B)调用内存数据管理模块的拆箱方法。

本实施例在native端建立内存数据管理模块，用于管理需要交由javascript传递的native对象，第一React Native组件在需要将native对象传递至javascript之前，调用内存数据管理模块的装箱方法，将该native对象封装为通用类型的装箱对象。当第二React Native组件接收到该装箱对象时，调用内存数据管理模块的拆箱方法，获得原来的待装箱的native对象。

第四实施例

如图2所示，本实施例提供了一种在React Native组件之间传递native对象的装置，包括：内存数据管理模块，用于将第一React Native组件的待装箱的native对象封装为通用类型的装箱对象；第一React Native组件(如图2中的ReactNative组件A)，用于发送装箱对象至javascript业务逻辑模块；第二React Native组件(如图2中的React Native组件B)，用于接收javascript业务逻辑模块转发的装箱对象；内存数据管理模块，还用于对装箱对象进行拆箱操作后得到native对象。

如图3所示，内存数据管理模块为native端提供对native对象进行装箱和拆箱的native接口，装箱接口将native的特殊类型的native对象转换为javascript可以接收的通用类型，拆箱接口则执行相反的操作，将装箱后的数据还原为待装箱的native对象。

第五实施例

如图2所示，在React Native组件之间传递native对象的装置中，内存数据管理保存模块，还用于：保存待装箱的native对象的强引用。

进一步地，本实施例的在React Native组件之间传递native对象的装置，还包括，内存数据管理组件，用于：javascript业务逻辑模块发送释放指令至内存数据管理组件的条件下，内存数据管理组件基于释放指令调用内存数据管理模块的移除引用接口(参见图3的RN接口中的移除引用接口)移除待装箱的native对象的强引用。

内存数据管理模块维护一个数据结构，例如一个堆栈，用于保存执行了装箱操作的native对象的强引用，防止native对象被释放，并提供解除强引用对象的移除引用接口，该移除引用接口接收待装箱的native对象或者装箱后的装箱对象，在所维护的数据结构中将指定的待装箱的native对象移除。

React Native内存数据管理组件是javascript直接操作内存数据管理模块的通道。该组件至少提供一个移除待装箱的native对象的强引用的移除接口，此移除接口对应内存数据管理模块的移除引用接口进行封装，以便javascript在使用native对象完成后，通知内存数据管理模块释放native对象，防止其释放不掉，保证待装箱的native对象的完整生命周期。另外可按需在该组件中添加其他接口，以使javascript对内存数据管理模块的操作更加灵活。

如图3所示，在内存数据管理模块中，首先封装数据存储层，再封装一层数据管理层，至少提供添加接口和删除的接口(可根据需求自由添加替换和查找等其他接口)，为上层提供统一的服务。然后在数据管理层基础上，封装一个接口层，该接口层包括native接口和React Native接口(如图中的RN接口)，分别封装native调用接口和React Native调用接口。Native接口为React Native组件提供装箱方法和拆箱方法，React Native接口为javascript提供移除待装箱的native对象的强引用。

第六实施例

如图2所示，第一React Native组件(如图2中的React Native组件A)，还用于：在内存数据管理模块将第一React Native组件的待装箱的native对象封装为通用类型的装箱对象之前，调用所述内存数据管理模块的装箱方法；相应地，第二React Native组件(如图2中的React Native组件B)，还用于：在内存数据管理模块对装箱对象进行拆箱操作后得到native对象之前，第二React Native组件调用内存数据管理模块的拆箱方法。

第一React Native组件和第二React Native组件均是定制封装的React Native组件，这些React Native组件依赖于内存数据管理模块，在需要将native端的特殊对象传递给javascript时，需要调用内存数据管理模块的装箱方法，并将装箱后的装箱对象传递至javascript，在收到装箱后的装箱对象时，需要调用内存数据管理模块的拆箱方法获得原来的待装箱的native对象。

举例说明

内存数据管理模块的装箱接口接收一个id(任意)类型的native对象，用于指定待装箱的native对象，返回一个字典类型数据，装箱操作将待装箱的id类型的native对象转换为一个字典类型的装箱对象，返回来的字典类型的装箱对象包括至少一个key：“address”，用于记录id类型的native对象的内存地址。

在内存数据管理模块的拆箱接口接收一个字典类型的装箱对象后，进行拆箱操作后返回原来的id类型的native对象。拆箱操作解析字典类型的装箱对象，将“address”指向的内存地址，转换为id类型的native对象。

在内存数据管理模块中，添加一个字典类型的数据结构，称为装箱对象生命周期管理字典，在内存数据管理模块初始化时初始化该数据结构。在每次执行装箱操作时，使用装箱对象中的key：“address”对应的值作为key，以装箱操作的id类型的native对象作为值，向装箱对象生命周期管理字典中插入一条数据。另外，移除引用接口接收一个id类型的native对象后，返回第二React Native组件的值为空。移除引用接口先判断接收的native对象是否为字典类型，如果是字典类型，则认为是装箱后的装箱对象，读取“address”字段的值，并在装箱对象生命周期管理字典中移除以此值为key的数据；如果接收的native对象不是字典类型，则认为是装箱之前的待装箱的native对象，将该待装箱的native对象所指向的对象内存地址转为字符串，并在装箱对象生命周期管理字典中移除以此字符串为key的数据。

通过具体实施方式的说明，应当可对本发明为达成预定目的所采取的技术手段及功效得以更加深入且具体的了解，然而所附图示仅是提供参考与说明之用，并非用来对本发明加以限制。