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

Question

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

对于跨平台桥接模块，我想避免在ObjectiveC和Java中重复代码。如果可能，我想用JavaScript编写跨平台桥接模块代码，并在Android和iOS中重用。

我当前的解决方案：

这工作。

这将导致两次调用sendEventWithName：

1. 使用“processResponseInJavaScriptMethod”发送带有名称的事件

问题：

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

或者每个本地人

文件：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}];

}

文件：索引。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));
  }
})

Answer 1

不确定你所说的内部桥接模块Java脚本方法是什么意思，但是JS代码可以通过方法将数据传递给本机，本机可以通过回调或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/native-modules-android.html

Answer 2

我建议在React Native中读一些关于批处理桥的内容。

本地人-

基本上，您可以使用JS端的静态方法定义一个模块，然后将其注册到批处理桥（registerCallableModule），这使您能够通过RCTBridge（）从本机端直接调用此方法。enqueueJSCall，其中您将提供分别对应于您的模块和函数的moduleDotMethod；您还将传递一个唯一（或增量）标识符，稍后用于将响应映射到每个请求。

JS公司-

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

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