[Native reagieren] Schreiben Sie ein natives Modul in Swift

Einführung

Um auf die native API von iOS zuzugreifen, bietet ReactNatve eine API namens "Native Module". Dieses Mal werde ich zusammenfassen, wie ein natives Modul mit "Swift" implementiert wird.

Erstellen eines React Native-Projekts

Wenn Sie noch kein Projekt haben, erstellen Sie eines.

npx react-native init myApp

Erstellen Sie eine Swift-Datei mit XCode

Öffnen Sie das Projekt in ios / myApp.xcodeproj mit XCode.

Erstellen Sie einen NativeModules-Ordner. (Irgendein)

Erstellen Sie eine .swift-Datei im Ordner "Native Modules".

Erstellen Sie einen "Objective-C Bridging Header"

Wenn Sie eine .swift-Datei erstellen, werden Sie von XCode gefragt, ob Sie einen Objective-C-Bridging-Header erstellen möchten.

Diese Datei verbindet, wie der Name schon sagt, die Swift-Datei mit der Objective-C-Datei. Ändern Sie nicht den Dateinamen.

Fügen Sie "Objective-C Bridging Header" wie folgt hinzu.

myApp-Bridging-Header.h

// myApp-Bridging-Header.h

#import"React/RCTBridgeModule.h"

Implementieren Sie die Methode

Lassen Sie uns zunächst das einfachste native Modul implementieren. Ändern Sie den Wert des Zählers.

Counter.swift

import Foundation@objc(Counter)
class Counter: NSObject {

  private var count = 0

  @objc
  func increment() {
    count += 1
    print("count is \(count)")
  }
}

Ermöglichen, dass Methoden von React Native aus behandelt werden

Erstellen Sie eine Objective-C-Datei, damit die implementierte Methode von React Native aus verarbeitet werden kann.

Erstellen Sie es im selben Verzeichnis mit demselben Namen wie die zuvor erstellte Swift-Datei.

Fügen Sie der erstellten Datei Folgendes hinzu.

Counter.m

@interface RCT_EXTERN_MODULE(Counter, NSObject)
  RCT_EXTERN_METHOD(increment)
@end

Informationen zu RCT_EXTERN_METHOD

Die in RCT_EXTERN_METHOD beschriebenen Methoden können in ReactNative verwendet werden.

Wenn die Methode keine Argumente enthält, schreiben Sie wie folgt.

RCT_EXTERN_METHOD(methodName)

Wenn es ein Argument gibt, schreiben Sie wie folgt.

RCT_EXTERN_METHOD(
  methodName: (paramType1)internalParamName1
)

Wenn für die "Inkrement" -Methode beispielsweise ein Argument erforderlich ist, sieht die "schnelle" Datei folgendermaßen aus:

@objc
func increment(_ num: Int) {
  ...
}

Das entsprechende "RCT_EXTERN_METHOD" lautet wie folgt.

RCT_EXTERN_METHOD(
  increment: (Int)num
)

Anruf von React Native

Sie können "NativeModules" importieren und mit "class name.method" aufrufen.

import { NativeModules } from 'react-native'

NativeModules.Counter.increment(1));

Event Emitter behandeln

Verwenden Sie "RCTEventEmitter", wenn Sie Sunscribe-Ereignisse auf der nativen iOS-Seite anzeigen möchten.

Schreiben Sie Folgendes in die Datei "Objective-C".

#import "React/RCTBridgeModule.h"
#import "React/RCTEventEmitter.h"

@interface RCT_EXTERN_MODULE(Counter, RCTEventEmitter)

Fügen Sie es außerdem der Bridge-Datei hinzu.

CounterApp-Bridging-Header.h

#import "React/RCTBridgeModule.h"
#import "React/RCTEventEmitter.h"

Implementieren Sie Folgendes in Ihre Swift-Datei:

--sendEvent: Beschreiben Sie den Namen des Ereignisses und seinen Inhalt --supportedEvents: Beschreiben Sie den Ereignisnamen, wenn Sie einen Listener auf der Seite React Native einfügen

@objc(Counter)
class Counter: RCTEventEmitter {
  @objc
  func increment() {
    count += 1
    print("count is \(count)")
    sendEvent(withName: "onIncrement", body: ["count": count])
  }
  
  override func supportedEvents() -> [String]! {
    return ["onIncrement"]
  }
}

Auf der ReactNative-Seite hört der Ereignis-Listener zu.

import {
  NativeModules,
  NativeEventEmitter
} from 'react-native'

const CounterEvents = new NativeEventEmitter(NativeModules.Counter);

CounterEvents.addListener(
  "onIncrement",
  (res) => console.log(res)
);

NativeModules.Counter.increment();

[Warnung] Das Modul erfordert die Einrichtung der Hauptwarteschlange

Die folgende Warnung wird möglicherweise angezeigt.

Dies ist eine Warnung, dass Sie festlegen sollten, ob das Modul im Hauptthread oder im Hintergrund verarbeitet werden soll. Sie können die Warnung deaktivieren, indem Sie wie folgt schreiben.

@objc
static func requiresMainQueueSetup() -> Bool {
  return true
}

• Gibt true zurück: Wird vom Hauptthread verarbeitet
• Gibt "false" zurück: Wird im Hintergrund verarbeitet

Zusammenfassung

Wir haben zusammengefasst, wie native Module in Swift geschrieben werden.