Detaillierte Erklärung der Interaktion zwischen React Native und IOS

#importieren <Foundation/Foundation.h>
#importieren <React/RCTBridgeModule.h>

@interface nativeModule : NSObject <RCTBridgeModule>

@Ende

#importieren <Foundation/Foundation.h>
#importiere "nativeModule.h"

@Schnittstelle nativeModule ()

@Ende

@implementierung nativesModul

@Ende 

//Den obigen Code weglassen @implementation nativeModule

// Dieser Code wird benötigt, um das Modul zu exportieren, damit auf das Modul nativeModule in RN zugegriffen werden kann
RCT_EXPORT_MODULE();

// Zeichenfolge empfangen RCT_EXPORT_METHOD(addHelloWord:(NSString *)name location:(NSString *)location)
{
  NSLog(@"%@,%@", Name, Ort);
}
@Ende

importiere { Button, NativeModules } von 'react-native'
const { nativeModul } = NativeModule

<Button title={'Übergeben Sie 2 Parameter an native'} onPress={() => {
    nativeModule.addHelloWord('Ihr Name', 'Standort: Zhejiang')
}}/>

// Akzeptiert nur einen Parameter – ein Array von Parametern, die an die JavaScript-Rückruffunktion übergeben werden sollen.
RCT_EXPORT_METHOD(checkIsRoot:(RCTResponseSenderBlock)Rückruf) {
  NSArray *array = @[@"Zeichenfolge", @"Zahl"];
  Rückruf (Array);
}

<Button title={'js übergibt einen Rückruf an native und empfängt ein Array im Rückruf'} onPress={() => {
    nativeModule.checkIsRoot((str: string, num: string) => {
      console.log(str, num)
    })
}}/>

@Schnittstelle nativeModule ()

@property (nichtatomar) RCTPromiseResolveBlock normalResolve;
@property (nichtatomar) RCTPromiseRejectBlock normalReject;
@property (nichtatomar) NSInteger num;

@Ende


// Dies ist ein Timer - (void)startTime: (NSArray*) data{
  NSTimer *Timer = [NSTimer scheduledTimerWithTimeInterval:2 Wiederholungen:JA Block:^(NSTimer * _Nonnull Timer) {
    
    NSArray *Ereignisse =@[@"Versprechen ",@"Test ",@"Array"];
    wenn (Ereignisse) {
      self.normalResolve(Ereignisse);
      [Timer ungültig machen];
    } anders {
      [Timer ungültig machen];
      NSError *error=[NSError errorWithDomain:@"Ich rufe die Fehlermeldung zurück..." code:101 userInfo:nil];
      self.normalReject(@"no_events", @"Es gab keine Ereignisse", Fehler);
    }
  }];
  
  [[NSRunLoop mainRunLoop] addTimer:Timer fürModus:NSDefaultRunLoopMode];
}

// Rückrufparameter an RN, Rückruffehlerinformationen RCT_EXPORT_METHOD(getHBDeviceUniqueID: (RCTPromiseResolveBlock)resolve
                  Ablehner:(RCTPromiseRejectBlock)Ablehnen) {
  
  // Auszuführende Aufgabe self.normalResolve = resolve;
  self.normalReject = ablehnen;
  
  [selbst performSelectorOnMainThread:@selector(startTime:) mitObjekt: [NSArray arrayWithObjects: @"1", @"2", nil] wartebisFertig:JA];
}

<Button title={'native übergibt ein Versprechen an JS'} onPress={() => {
    nativeModule.getHBDeviceUniqueID().then((arr: string[]) => {
      console.log('auflösen', arr)
    }).catch((err: Zeichenfolge) => {
      console.error(fehler)
    })
}}/>

// Dies ist ein Timer 2
-(void)startTime2: (NSArray*) Daten{
  NSLog(@"Daten%@",Daten);
  
  NSTimer *Timer = [NSTimer scheduledTimerWithTimeInterval:1 Wiederholungen:JA Block:^(NSTimer * _Nonnull Timer) {
    
    NSLog(@"%d", (int)self.num);
    
    selbst.num = selbst.num + 1;
    
    NSLog(@"%d", (int)self.num);
    
    wenn (selbst.zahl > 4) {
      [Timer ungültig machen];
      NSLog(@"Ende");
      selbst.normalResolve(Daten);
    }
    
  }];
  
  [[NSRunLoop mainRunLoop] addTimer:Timer fürModus:NSDefaultRunLoopMode];
}

// RCT_REMAP_METHOD ist dasselbe wie RCT_EXPORT_METHOD, aber diese Methode wird synchron von JS im JS-Thread aufgerufen und kann ein Ergebnis zurückgeben.
// Bei der Synchronisierung können Leistungsprobleme auftreten. Es wird empfohlen, RCT_REMAP_METHOD(findEvents,
                 findEventsWithResolver:(RCTPromiseResolveBlock)auflösen
                 Ablehner:(RCTPromiseRejectBlock)Ablehnen)
{
  self.normalResolve = auflösen;
  self.normalReject = ablehnen;
  
  
  selbst.num = 0;
  
  [selbst performSelectorOnMainThread:@selector(startTime2:) mitObject: [NSArray arrayWithObjects: @"1", @"2", nil] wartebisFertig:JA];
}

<Button title={'native übergibt ein Versprechen an JS2'} onPress={() => {
    nativeModule.findEvents().then((arr: string[]) => {
      console.log('auflösen', arr)
    }).catch((err: Zeichenfolge) => {
      console.error(fehler)
    })
}}/>

NSArray *imageList = @[@"http://foo.com/bar1.png",
                @"http://foo.com/bar2.png"];

NSDictionary *props = @{@"images" : Bilderliste};


RCTRootView *rootView = [[RCTRootView-Zuweisung] initWithBridge:bridge moduleName:@"learn" initialProperties:props];
// Diese Codezeile existiert bereits, der Unterschied ist initialProperties:props

// APP neu schreiben, Bilder sind die von iOS bereitgestellten Daten, hier übergeben wir die Daten durch Kontextexport Standardklasse App erweitert React.Component<{ images: string[] }> {

  rendern() {
    gibt <NativeProps.Provider-Wert={this.props.images}> zurück
      <AppContainer/>
    </NativeProps.Provider>
  }
}

// Einfach in Hooks verwenden const images = useContext(NativeProps);

<Text>Dies sind die ursprünglichen Daten von der nativen Seite {JSON.stringify(images)}</Text>

// Zur Überwachung verfügbare Ereignisnamen - (NSArray<NSString *> *)supportedEvents
{
  Rückkehr @[@"EventReminder"];
}


RCT_EXPORT_METHOD(postNotificationEvent:(NSString *)Name)
{
  NSLog(@"Kalenderereigniserinnerung empfangen");
    [self sendEventWithName:@"EventReminder" body:@{@"name": name}];;
}

- (void)calendarEventReminderReceived:(NSNotification *)Benachrichtigung
{
  // Dies ist ein Beispiel von der offiziellen Website NSLog(@"calendarEventReminderReceived");
  NSString *eventName = Benachrichtigung.Benutzerinfo[@"Name"];
  [self sendEventWithName:@"EventReminder" body:@{@"name": eventName}];
}

RCT_EXPORT_METHOD(Senden){
  NSDictionary *dict = @{@"name" : @"veuimyzi"};
  
  NSNotification *Benachrichtigung = [[NSNotification alloc] initWithName:@"EventReminder" Objekt:nil Benutzerinfo:dict];
  
  [selbst KalenderEventReminderReceived:Benachrichtigung];
}

const ManagerEmitter = neuer NativeEventEmitter(nativeModule)

const [msg, setMsg] = useState([])

// In Hooks verwenden, ähnlich dem Lebenszyklus von componentDidMount useEffect(() => {
    const Abonnement = ManagerEmitter.addListener(
      'EventErinnerung',
      (Erinnerung) => {
        setMsg(vorherigerStatus => {
          Rückgabewert für vorherigen Status.concat(Erinnerung.Name)
        })
        console.log('Dies ist die überwachte EventReminder-Ereignisantwort', reminder.name)
      }
    )

    zurückgeben () => {
      Abonnement.entfernen()
    }
}, [])


<Button title={'js hört auf Ereignisse, lasst native Benachrichtigungen an js senden'} onPress={() => {
    nativeModule.postNotificationEvent('test')
}}/>

<Button title={'js hört auf Ereignisse, lasst native Benachrichtigungen an js senden'} onPress={() => {
    nativeModule.Senden()
}}/>

{
    msg.map((Element, Index) => {
      gibt <Textschlüssel={Element + Index}>Element:{Element}</Text> zurück
    })
}

@implementierung nativesModul
{
  bool hatListeners;
  // eine lokale Variable }

-(void)startObserving {
  hatListeners = JA;
}

-(void)stopObserving {
  hasListeners = NEIN;
}
// Beim Senden von Listenern Urteilsvermögen hinzufügen. Nur senden, wenn Listener vorhanden sind, wodurch die Aufrufe des Bridge-Codes effektiv reduziert werden, if (hasListeners) { 
    [self sendEventWithName:@"EventReminder" body:@{@"name": name}];;
}