Skriva en äldre nativ modul i Swift
Skapa en Objective-C-bryggfil och en Swift-klass som följer RCTBridgeModule, exponera en metod med RCT_EXPORT_METHOD och anropa den från React Native JS.
Skriva en äldre nativ modul i Swift är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.
Översikt över native-moduler för iOS
I iOS exponerar äldre native-moduler Swift- eller Objective-C-kod för JavaScript via en Objective-C-brygga. Även när du skriver implementationen i Swift kräver React Native en Objective-C-bryggfil för att registrera modulen, eftersom RN-bryggan är byggd i Objective-C. Du skriver en tunn .m-bryggfil bredvid din Swift-klass.
Skapa Swift-modulklassen
Skapa en Swift-klass som följer NSObject och är försedd med attributet @objc så att Objective-C kan se den. Klassen implementerar protokollet RCTBridgeModule. Swift-moduler behöver också @objcMembers på klassen, så att alla metoder är synliga för bryggan utan individuella @objc-annoteringar på varje metod.
// CalendarModule.swift
import Foundation
@objc(CalendarModule)
class CalendarModule: NSObject {
@objc
func createCalendarEvent(
_ name: String,
location: String
) {
print('Creating event: \(name) at \(location)')
}
}Objective-C-bryggfilen
Bryggfilen är en vanlig .m-fil som inte innehåller någon implementation — den deklarerar endast modulen och dess metoder med hjälp av makron. RCT_EXTERN_MODULE registrerar klassnamnet och RCT_EXTERN_METHOD deklarerar varje exporterad metod med parameternamn som exakt matchar Swift-signaturerna.
// CalendarModuleBridge.m
#import <React/RCTBridgeModule.h>
@interface RCT_EXTERN_MODULE(CalendarModule, NSObject)
RCT_EXTERN_METHOD(
createCalendarEvent:(NSString *)name
location:(NSString *)location
)
@endExponera modulnamnet
React Native identifierar modulen med namnet i RCT_EXTERN_MODULE. På JavaScript-sidan blir detta nyckeln i NativeModules. Enligt konventionen matchar namnet Swift-klassens namn. Om du vill ha ett annat namn mot JavaScript kan du ange ett alias som det andra argumentet till RCT_EXTERN_MODULE, men om namnen är samma undviker du förvirring.
// JavaScript — accessing the iOS module
import { NativeModules } from 'react-native';
const { CalendarModule } = NativeModules;
if (!CalendarModule) {
console.warn('CalendarModule not found — iOS only?');
} else {
CalendarModule.createCalendarEvent('Team Lunch', 'Conference Room A');
}Returnera data med promises i Swift
Swift-metoder i native-moduler som returnerar data använder parametrarna RCTPromiseResolveBlock och RCTPromiseRejectBlock. Dessa skickas in som de två sista argumenten när de deklareras i bryggfilen. Anropa resolve(value) vid lyckat resultat eller reject(code, message, error) vid fel. På JS-sidan använder du await för anropet precis som för vilken asynkron funktion som helst.
// Swift method
@objc
func getDeviceModel(
_ resolve: @escaping RCTPromiseResolveBlock,
rejecter reject: @escaping RCTPromiseRejectBlock
) {
let model = UIDevice.current.model
resolve(model)
}
// Bridge file
RCT_EXTERN_METHOD(
getDeviceModel:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject
)
// JavaScript
const model = await CalendarModule.getDeviceModel();Kör på huvudtråden
Metoder i native-moduler körs som standard i en bakgrundskö med seriell exekvering. Om metoden använder UIKit, som kräver huvudtråden, måste du skicka arbetet till huvudkön. Du kan åsidosätta den statiska metoden requiresMainQueueSetup() så att den returnerar true om modulen behöver initieras på huvudtråden från början.
@objc
static func requiresMainQueueSetup() -> Bool {
return true // init on main thread
}
@objc
func openAlert(_ message: String) {
DispatchQueue.main.async {
let alert = UIAlertController(
title: 'Alert',
message: message,
preferredStyle: .alert
)
alert.addAction(UIAlertAction(title: 'OK', style: .default))
UIApplication.shared.keyWindow?.rootViewController?
.present(alert, animated: true)
}
}Exportera konstanter till JavaScript
Precis som på Android kan native-moduler för iOS exponera konstanter via metoden constantsToExport(). Returnera en dictionary med värden som React Native serialiserar och kopplar till modulobjektet i JavaScript vid uppstart. Konstanter är synkrona och kostar inget att läsa efter initieringen.
// Swift
@objc
func constantsToExport() -> [String: Any]! {
return [
'PLATFORM': 'ios',
'OS_VERSION': UIDevice.current.systemVersion,
'IS_PAD': UIDevice.current.userInterfaceIdiom == .pad
]
}
// Bridge file (add inside the interface)
RCT_EXPORT_MODULE()
// JavaScript
const { PLATFORM, IS_PAD } = NativeModules.CalendarModule;
console.log(PLATFORM, IS_PAD);Skicka händelser till JavaScript
Om du vill skicka data proaktivt från native-kod till JavaScript bör din Swift-modul ärva från RCTEventEmitter i stället för NSObject. Åsidosätt supportedEvents() för att lista händelsenamn och anropa sendEvent(withName:body:) för att skicka en händelse. På JS-sidan använder du NativeEventEmitter för att prenumerera på händelserna.
// Swift
@objc(LocationModule)
class LocationModule: RCTEventEmitter {
override func supportedEvents() -> [String]! {
return ['onLocationUpdate']
}
func startTracking() {
sendEvent(withName: 'onLocationUpdate',
body: ['lat': 37.7749, 'lng': -122.4194])
}
}
// JavaScript
import { NativeModules, NativeEventEmitter } from 'react-native';
const emitter = new NativeEventEmitter(NativeModules.LocationModule);
const sub = emitter.addListener('onLocationUpdate', (loc) => {
console.log(loc.lat, loc.lng);
});
// cleanup: sub.remove();Plattformsöverskridande modulomslag
När modulen endast finns på en plattform skyddar du anropen med Platform.OS i omslagsfilen för att undvika körtidskrascher på den andra plattformen. Ett vanligt mönster är att exportera en no-op-stub på plattformar som inte stöds, så att anropande kod aldrig behöver kontrollera Platform.OS själv.
// CalendarModule.js
import { NativeModules, Platform } from 'react-native';
const { CalendarModule: NativeCalendar } = NativeModules;
export const CalendarModule = {
createEvent: (name, location) => {
if (Platform.OS === 'ios' && NativeCalendar) {
NativeCalendar.createCalendarEvent(name, location);
} else {
console.warn('CalendarModule not available on', Platform.OS);
}
}
};Hantera bridging header i blandade projekt
När du lägger till Swift-filer i ett Objective-C-projekt, vilket är standard i äldre React Native-projekt, frågar Xcode om du vill skapa en bridging header. Den här filen importerar de Objective-C-headers som Swift behöver kunna se. Vanligtvis importerar du React/RCTBridgeModule.h, React/RCTEventEmitter.h och alla andra RN-headers som din Swift-kod refererar till. Utan den här filen kan Swift inte se RCT-typerna.
// YourApp-Bridging-Header.h
// Auto-created by Xcode when adding first Swift file
#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>
#import <React/RCTLog.h>
#import <React/RCTUtils.h>Testa native-modulen från början till slut
När du har skrivit din Swift-klass och bryggfil ska du bygga om appen från Xcode (inte bara från Metro), eftersom ändringar i native-kod kräver ett fullständigt native-bygge. Öppna iOS-simulatorn, utlös JavaScript-koden som anropar modulen och använd console.log eller Xcodes konsol för att verifiera att native-sidan körs. Xcodes debugger kan sätta brytpunkter i Swift-kod medan React Native-appen körs.
// Quick integration test in a component
import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import { CalendarModule } from './CalendarModule';
export function TestScreen() {
useEffect(() => {
CalendarModule.createEvent('Standup', 'Zoom')
.then((result) => console.log('Event created:', result))
.catch((err) => console.error('Error:', err));
}, []);
return <View><Text>Native Module Test</Text></View>;
}Snabbtest
Testa dina kunskaper om koncept inom React Native Mobile Development från den här lektionen.
Sammanfattning av lektionen
I den här lektionen lärde Ni Er: hur Ni skapar en Swift-klass som följer RCTBridgeModule, skriver en Objective-C-bryggfil med RCT_EXTERN_MODULE och RCT_EXTERN_METHOD samt returnerar asynkrona data med RCTPromiseResolveBlock och RCTPromiseRejectBlock. Ni såg också hur händelser kan skickas med RCTEventEmitter. Härnäst utforskar vi den moderna arkitekturen för Turbo Native Module med JSI.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Skriva en äldre nativ modul i Swift” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Skriva en äldre nativ modul i Swift”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Skriva en äldre nativ modul i Swift”?
Skapa en Objective-C-bryggfil och en Swift-klass som följer RCTBridgeModule, exponera en metod med RCT_EXPORT_METHOD och anropa den från React Native JS. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Native Academy?
Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Skriva en äldre nativ modul i Swift”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Native Academy-lektionen?
Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Skriva en äldre nativ modul i Kotlin
- Skriva en äldre nativ modul i Swift
- Turbo Native Modules med JSI
- Asynkrona callback-funktioner, promises och händelser från native