react-native
Native Module

Erstellen Sie Ihr natives Modul (IOS)

Einführung

von http://facebook.github.io/react-native/docs/native-modules-ios.html

Manchmal benötigt eine App Zugriff auf die Plattform-API, und React Native verfügt noch nicht über ein entsprechendes Modul. Möglicherweise möchten Sie vorhandenen Objective-C-, Swift- oder C ++ - Code wiederverwenden, ohne ihn in JavaScript erneut implementieren zu müssen, oder Hochleistungs-Multithread-Code schreiben, z. B. für die Bildverarbeitung, eine Datenbank oder eine Reihe erweiterter Erweiterungen.

Ein RCTBridgeModule Modul ist einfach eine Objective-C-Klasse, die das RCTBridgeModule Protokoll implementiert.

Beispiel

Erstellen Sie in Ihrem Xcode-Projekt eine neue Datei und wählen Sie Cocoa Touch Class aus. Wählen Sie im Erstellungsassistenten einen Namen für Ihre Klasse aus ( z. B. NativeModule ), machen Sie eine Unterklasse aus : NSObject und wählen Sie Objective-C für die Sprache.

Dadurch werden zwei Dateien NativeModuleEx.h und NativeModuleEx.m

Sie müssen importieren RCTBridgeModule.h auf Ihre NativeModuleEx.h Datei wie folgt:

#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"

@interface NativeModuleEx : NSObject <RCTBridgeModule>

@end

NativeModuleEx.m Sie in Ihrer NativeModuleEx.m den folgenden Code hinzu:

#import "NativeModuleEx.h"

@implementation NativeModuleEx

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(testModule:(NSString *)string )
{
  NSLog(@"The string '%@' comes from JavaScript! ", string);
}

@end

RCT_EXPORT_MODULE() macht Ihr Modul in JavaScript zugänglich. Sie können ein optionales Argument angeben, um seinen Namen anzugeben. Wenn kein Name angegeben wird, stimmt er mit dem Klassennamen von Objective-C überein.

RCT_EXPORT_METHOD() Ihre Methode für JavaScript RCT_EXPORT_METHOD() Nur die Methoden, die Sie mit diesem Makro exportieren, sind in JavaScript RCT_EXPORT_METHOD() .

Schließlich können Sie in Ihrem JavaScript Ihre Methode wie folgt aufrufen:

import { NativeModules } from 'react-native';

var NativeModuleEx = NativeModules.NativeModuleEx;

NativeModuleEx.testModule('Some String !');