Wie schreibe ich ein natives "natives Modul" (Bridge), das gängigen JavaScript-Code wiederverwendet?

Question

Wie kann ein natives Modul zu einer internen JavaScript-Methode zurückrufen, dann die interne Methode verarbeiten, zum Beispiel Daten in JSON analysieren und dann ein Ereignis auslösen, das die native App empfängt?

Für plattformübergreifende Brückenmodule möchte ich vermeiden, Code in beide Ziel C und Java zu duplizieren. Wenn es möglich ist, möchte ich plattformübergreifenden Brückenmodul-Code in JavaScript schreiben und für Android und iOS wiederverwenden.

Meine aktuelle Lösung:

Dies funktioniert.

1. sendEventWithName mit dem "_processResponseInJavaScriptMethod"
2. forwardEventWithName sendEventWithName auf die native App reagieren:

   Dies wird in zwei Anrufe zu sendEventWithName führen.

Frage:

Gibt es ein Konzept für die native Code-Daten zu verarbeiten synchron einen JS-Call, dann Ergebnisse senden sofort mit sendEventWithName?

Oder benötigt jeder native> JS-Aufruf eine asynchrone _bridge enqueueJSCall?

Datei: 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}]; 

} 

Datei: index.js (native Modul)

 
// 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

nicht sicher, was Sie von Internal bridge module Java Script method bedeuten, aber JS-Code können die Daten übergeben zu nativen via Methoden, und native kann Daten zu JS über Callbacks oder Versprechen zurückgeben. Nativer Code kann auch Ereignisse an JS senden.

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

Siehe die native Modul Dokumentation für weitere Details: - https://facebook.github.io/react-native/docs/native-modules-ios.html - https://facebook.github.io/react-native/docs/native-modules-android.html

Answer 2

Ich würde empfehlen, etwas zu lesen auf der Batched Brücke zu tun in der india React.

Native -> JS

Wesentlichen, was Sie tun können, ist ein Modul mit statischen Methoden auf der Seite JS definieren, die Sie dann mit dem BatchedBridge (registerCallableModule) registrieren - dies dann Sie diese direkt anrufen können Methode von der nativen Seite über RCTBridge().enqueueJSCall, wo Sie die moduleDotMethod, die Ihrem Modul bzw. Funktion entspricht; Sie würden auch eine eindeutige (oder inkrementelle) Kennung übergeben, die Sie später verwenden würden, um die Antwort auf jede Anforderung zuzuordnen.

JS -> Native

Als nächstes würden Sie eine native Module erstellen, die auf der JS-Seite aufgerufen werden würden Daten zurück an nativen zu schicken, die Antwortdaten und Identifikator übergeben, die Sie dann auf dem nativen behandeln würden Seite.

Ich habe an Projekten gearbeitet, bei denen der gesamte Service-Layer auf der JS-Seite steht und diesen Ansatz erfolgreich verwendet haben.