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

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

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

我当前的解决方案：

这有效。

这将导致两次调用 sendEventWithName：

1. sendEventWithName 与“_processResponseInJavaScriptMethod”
2. forwardEventWithName 将 EventWithName 发送到反应本机应用程序。

问题：

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

或者每个原生 > JS 调用都需要异步_bridge enqueueJSCall?

文件：MyNativeModule.m

// Use forwardEventWithName to forward events 
// processed by common cross-platform JS to the react native app
RCT_EXPORT_METHOD(forwardEventWithName:(NSString*)name
                  body:(NSString*)body) {
    [self sendEventWithName:name body:body];
}

// 1 - react native app calls sendQueryToBluetoothDevice
// 2 - device calls commandResponse when response received
RCT_EXPORT_METHOD(sendQueryToBluetoothDevice:(NSString*)command {
    [_device sendCommand:command];
}

// 1 - Receives XML response from external Bluetooth device
// 2 - Sends XML to internal JS method for processing
// 3 - Internal JS method uses forwardEventWithName 
//     to send event to react native app
- (void) commandResponse:(NSString *) xml {    
    [self sendEventWithName:@"_processResponseInJavaScriptMethod"
                       body:@{@"xml": configuration}];

}
  

文件：index.js（本机模块）

 // Parse xml in common JS code for both Android and iOS native modules
emitter.addListener("_processResponseInJavaScriptMethod", (e) => {
    const body = parseXml(e.xml);

    // ?? Is there a way to send event directly using JS to the react native app ??

    // Hack - Call native method forwardEventWithName to sendEventWithName to react native app.
    ///
    // This makes two _bridge enqueueJSCall's
    // 1 - One call to sendEventWithName "_myNativeModuleInternalMethod"
    // 2 - Second call to sendEventWithName "myNativeModuleEvent
    MyNativeModule.forwardEventWithName(
      'myNativeModuleEventResponseReceived', 
       JSON.stringify(body));
  }
})
  

我建议阅读一些有关 React Native 中的批处理桥的文章。

原生 -> JS

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

JS -> 原生

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

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