React Native Android：原生模块与JS数据交互的方法

"这篇文档主要讨论了在React Native开发中，如何通过Android原生模块向JavaScript传递数据的几种方法，特别提到了使用Callbacks的方式作为数据交互的一种手段。" 在React Native开发环境中，JavaScript与原生平台（如Android或iOS）之间的通信是至关重要的，特别是在涉及与操作系统深度集成或者调用特定硬件功能时。本篇文档主要聚焦于Android环境下，如何通过原生模块将数据传递回JavaScript。其中，详细介绍了使用Callbacks的方式。 首先，Callbacks是一种常见的设计模式，广泛应用于各种编程语言中，包括Java和JavaScript。在React Native的上下文中，原生模块可以接收Callbacks类型的参数，这些参数实际上是JavaScript中的函数。当原生代码执行完毕并需要返回结果时，它会通过预先提供的Callback回调到JavaScript层。 以下是一个具体的Android原生模块示例： ```java public class RNTestModule extends ReactContextBaseJavaModule { // ... @ReactMethod public void measureLayout( int tag, int ancestorTag, Callback errorCallback, Callback successCallback) { try { // 假设这里进行了布局测量操作 // ... // 测量完成后，将结果封装成Map WritableMap map = Arguments.createMap(); map.putDouble("relativeX", 1); map.putDouble("relativeY", 1); map.putDouble("width", 2); map.putDouble("height", 3); // 通过successCallback将测量结果传回JavaScript successCallback.invoke(map); } catch (IllegalViewOperationException e) { // 如果出现异常，通过errorCallback传递错误信息 errorCallback.invoke(e.getMessage()); } } } ``` 在这个例子中，`measureLayout`方法接受两个Callbacks参数，一个用于处理成功情况，另一个用于处理错误。当原生代码成功执行后，它会通过`successCallback`回调JavaScript函数，并将数据作为参数传递。如果在执行过程中发生异常，`errorCallback`会被调用，将错误信息传递给JavaScript。 在JavaScript端，我们可以这样使用这个原生模块： ```javascript RNTest.measureLayout( 100, 100, (errorMsg) => { console.log('Error:', errorMsg); }, (data) => { console.log('Success:', data.relativeX, data.relativeY, data.width, data.height); } ); ``` 这段JavaScript代码展示了如何定义与原生模块对应的回调函数，一个处理错误，另一个处理成功的情况。当原生模块返回数据时，JavaScript的回调函数会被调用，从而获取到测量布局的结果。 使用Callbacks是React Native中Android原生模块向JavaScript传递数据的常见方式之一。这种方式允许实时的数据交互，使得JavaScript能够灵活地响应原生环境的变化，同时也能处理可能出现的异常情况。在实际开发中，开发者还可以结合Promise、AsyncStorage等其他机制，根据需求构建更加复杂和健壮的数据通信方案。