[React Native] Ecrire un module natif dans Swift

introduction

Pour accéder à l'API native d'iOS, React Natve fournit une API appelée Native Module. Cette fois, je vais résumer comment implémenter un module natif avec Swift.

Créer un projet React Native

Si vous n'avez pas encore de projet, créez-en un.

npx react-native init myApp

Créer un fichier Swift avec XCode

Ouvrez le projet dans ʻios / myApp.xcodeproj` avec XCode.

Créez un dossier NativeModules. (Tout)

Créez un fichier .swift dans le dossier Native Modules.

ʻCreate Objective-C Bridging Header`

Quand vous créez un fichier .swift, XCode vous demandera si vous voulez créer un ʻObjective-C Bridging Header`.

Ce fichier, comme son nom l'indique, relie le fichier Swift et le fichier ʻObjective-C`. Ne modifiez pas le nom du fichier.

Ajoutez à l '«En-tête de pontage Objective-C» comme suit.

myApp-Bridging-Header.h

// myApp-Bridging-Header.h

#import"React/RCTBridgeModule.h"

Mettre en œuvre la méthode

Pour commencer, implémentons le module natif le plus simple. Modifiez la valeur du compteur.

Counter.swift

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

  private var count = 0

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

Autoriser la gestion des méthodes depuis React Native

Créez un fichier ʻObjective-C` pour que la méthode implémentée puisse être gérée depuis React Native.

Créez-le dans le même répertoire avec le même nom que le fichier Swift que vous avez créé précédemment.

Ajoutez ce qui suit au fichier créé.

Counter.m

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

À propos de RCT_EXTERN_METHOD

Les méthodes décrites dans RCT_EXTERN_METHOD peuvent être utilisées dans ReactNative.

Si la méthode n'a pas d'arguments, écrivez comme suit.

RCT_EXTERN_METHOD(methodName)

S'il y a un argument, écrivez comme suit.

RCT_EXTERN_METHOD(
  methodName: (paramType1)internalParamName1
)

Par exemple, si la méthode ʻincrement nécessite un argument, le fichier swift` ressemble à ceci:

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

Le "RCT_EXTERN_METHOD" correspondant est le suivant.

RCT_EXTERN_METHOD(
  increment: (Int)num
)

Appel de React Native

Vous pouvez importer NativeModules et l'appeler avec class name.method.

import { NativeModules } from 'react-native'

NativeModules.Counter.increment(1));

Gérer l'émetteur d'événements

Utilisez RCTEventEmitter lorsque vous souhaitez Sunscribe les événements qui se produisent du côté iOS natif.

Écrivez ce qui suit dans le fichier ʻObjective-C`.

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

@interface RCT_EXTERN_MODULE(Counter, RCTEventEmitter)

De plus, ajoutez-le au fichier de pont.

CounterApp-Bridging-Header.h

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

Implémentez les éléments suivants dans votre fichier Swift:

--sendEvent: Décrivez le nom de l'événement et son contenu --supportedEvents: Décrivez le nom de l'événement lors du collage d'un écouteur du côté React Native

@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"]
  }
}

Du côté ReactNative, l'écouteur d'événements écoute.

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

const CounterEvents = new NativeEventEmitter(NativeModules.Counter);

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

NativeModules.Counter.increment();

[Avertissement] Le module nécessite la configuration de la file d'attente principale

L'avertissement suivant peut apparaître.

Ceci est un avertissement pour définir si le module doit être traité dans le thread principal ou en arrière-plan. Vous pouvez désactiver l'avertissement en écrivant comme suit.

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

--Retourne true: traité par le thread principal --Retourne faux: traité en arrière-plan

Sommaire

Nous avons résumé comment écrire des modules natifs dans Swift.