如何编写重用常见 JavaScript 代码的 React Native“本机模块”（桥）？

Question

原生模块如何回调到 JavaScript 内部桥接方法，然后在内部方法中进行处理，例如将数据解析为 JSON，然后引发 React Native 应用程序接收到的事件？

对于跨平台的桥模块，我想避免在重复的代码都目标C和Java。如果可能，我想用 JavaScript 编写跨平台桥接模块代码，并在 Android 和 iOS 上重复使用。

我目前的解决方案：

这有效。

这将导致对 sendEventWithName 的两次调用：

1. 带有“_processResponseInJavaScriptMethod”的 sendEventWithName
2. forwardEventWithName 到 sendEventWithName 到本机应用程序。

题：

本机代码是否有一种方法可以使用 JS 调用同步处理数据，然后使用 sendEventWithName 立即发送结果？

还是每个 native > JS 调用都需要 async _bridge enqueueJSCall？

文件：MyNativeModule.m

// 使用 forwardEventWithName 来转发事件 
// 由常见的跨平台JS处理到react native app
RCT_EXPORT_METHOD(forwardEventWithName:(NSString*)name
                  正文：（NSString*）正文）{
    [self sendEventWithName:name body:body];
}

// 1 - 响应本机应用程序调用 sendQueryToBluetoothDevice
// 2 - 设备在收到响应时调用 commandResponse
RCT_EXPORT_METHOD(sendQueryToBluetoothDevice:(NSString*)command {
    [_device sendCommand:command];
}

// 1 - 从外部蓝牙设备接收 XML 响应
// 2 - 将 XML 发送到内部 JS 方法进行处理
// 3 - 内部 JS 方法使用 forwardEventWithName 
// 发送事件以响应本机应用程序
- (void) commandResponse:(NSString *) xml {    
    [self sendEventWithName:@"_processResponseInJavaScriptMethod"
                       正文：@{@"xml": 配置}];

}

文件：index.js（原生模块）

 // 在通用 JS 代码中为 Android 和 iOS 原生模块解析 xml
发射器.addListener("_processResponseInJavaScriptMethod", (e) => {
    const body = parseXml(e.xml);

    // ?? 有没有办法直接使用 JS 将事件发送到 React Native 应用程序？

    // Hack - 调用本机方法 forwardEventWithName 到 sendEventWithName 以响应本机应用程序。
    ///
    // 这使得两个 _bridge enqueueJSCall 的
    // 1 - 一次调用 sendEventWithName "_myNativeModuleInternalMethod"
    // 2 - 第二次调用 sendEventWithName "myNativeModuleEvent
    MyNativeModule.forwardEventWithName(
      'myNativeModuleEventResponseReceived', 
       JSON.stringify(body));
  }
})

Answer 1

我建议阅读 React Native 中的批处理桥。

原生 -> JS

本质上，您可以做的是在 JS 端定义一个带有静态方法的模块，然后您将使用BatchedBridge( registerCallableModule)注册该模块- 这样您就可以通过 直接从本机端调用此方法RCTBridge().enqueueJSCall，您将在其中提供moduleDotMethod对应于您的分别是模块和功能；您还将传递一个唯一（或增量）标识符，稍后您将使用该标识符将响应映射到每个请求。

JS -> 原生

接下来，您将创建一个 Native 模块，该模块将在 JS 端调用以将数据发送回本机，传递响应数据和标识符，然后您将在本机端处理这些数据和标识符。

我从事过整个服务层都在 JS 端的项目，并且成功地使用了这种方法。

Answer 2

不确定你的意思Internal bridge module Java Script method，但是JS代码可以通过方法将数据传递给native，native可以通过回调或promise将数据返回给JS。本机代码也可以向 JS 发送事件。

JS       --->     Native   // Method calls
Native   --->     JS       // Callbacks, Promises, Events

有关更多详细信息，请参阅本机模块文档： - https://facebook.github.io/react-native/docs/native-modules-ios.html - https://facebook.github.io/react-native/docs/本机模块-android.html