Skriva en äldre nativ modul i Kotlin
Skapa en ReactContextBaseJavaModule i Kotlin, annotera en metod med @ReactMethod, exponera den genom ett ReactPackage och anropa den från JavaScript.
Skriva en äldre nativ modul i Kotlin är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 1 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.
Vad är en äldre native-modul
En äldre native-modul gör att du kan anropa native Android-kod (Kotlin/Java) från JavaScript i en React Native-app. När de inbyggda React Native-API:erna inte täcker en enhetsfunktion du behöver skriver du en native-modul för att överbrygga gapet. Äldre moduler använder Bridge-arkitekturen, vilket innebär att anrop skickas asynkront över JS-till-native-bryggan.
Skapa Kotlin-modulklassen
Varje native-modul för Android ärver från ReactContextBaseJavaModule. Du åsidosätter getName() så att den returnerar namnet som JavaScript använder för att anropa modulen. Placera klassen i mappen android/app/src/main/java/com/yourapp/ tillsammans med befintliga Android-källfiler.
// ToastModule.kt
package com.yourapp
import android.widget.Toast
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
class ToastModule(reactContext: ReactApplicationContext) :
ReactContextBaseJavaModule(reactContext) {
override fun getName(): String = 'ToastModule'
}Annotera metoder med @ReactMethod
Alla metoder som du vill exponera för JavaScript måste annoteras med @ReactMethod. Metoden måste vara public och returtypen måste vara void — resultat returneras asynkront via callbacks eller promises, inte som returvärden. React Native serialiserar parametrar automatiskt för grundläggande typer som String, Int, Boolean och Double.
@ReactMethod
fun show(message: String, duration: Int) {
val durationConst = if (duration == Toast.LENGTH_SHORT)
Toast.LENGTH_SHORT else Toast.LENGTH_LONG
Toast.makeText(reactApplicationContext, message, durationConst).show()
}Skapa ReactPackage
Native-moduler måste registreras via ett ReactPackage. Du implementerar gränssnittet ReactPackage och returnerar din modul från createNativeModules. Paketet läggs sedan till i listan över paket i MainApplication.kt, så att React Native inkluderar det vid uppstart.
// ToastPackage.kt
package com.yourapp
import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager
class ToastPackage : ReactPackage {
override fun createNativeModules(
reactContext: ReactApplicationContext
): List<NativeModule> = listOf(ToastModule(reactContext))
override fun createViewManagers(
reactContext: ReactApplicationContext
): List<ViewManager<*, *>> = emptyList()
}Registrera paketet i MainApplication
Öppna MainApplication.kt och leta reda på metoden getPackages(). Lägg till en instans av ToastPackage i listan. React Native anropar detta vid uppstart för att hitta alla tillgängliga native-moduler och registrera deras JavaScript-gränssnitt.
// MainApplication.kt (inside getPackages)
override fun getPackages(): List<ReactPackage> =
PackageList(this).packages.apply {
add(ToastPackage()) // <-- register your package here
}Anropa modulen från JavaScript
På JavaScript-sidan importerar du NativeModules från react-native och får åtkomst till modulen via namnet som returneras från getName(). Lägg native-modulen i en hjälparfil för att tillhandahålla ett tydligt TypeScript-API och dölja den direkta referensen till NativeModules från dina komponenter.
// ToastModule.js
import { NativeModules } from 'react-native';
const { ToastModule } = NativeModules;
export function showToast(message, duration = 'short') {
const dur = duration === 'short' ? 0 : 1;
ToastModule.show(message, dur);
}
// Usage in a component:
// import { showToast } from './ToastModule';
// showToast('Hello from native!', 'long');Returnera värden med promises
Eftersom metoder med @ReactMethod måste returnera void använder du promise-parametrar för att skicka data tillbaka till JavaScript. Lägg till promise: Promise som sista parameter, anropa promise.resolve(value) vid lyckat resultat eller promise.reject(code, message) vid fel. På JS-sidan använder du await för anropet precis som för vilken asynkron funktion som helst.
// Kotlin
@ReactMethod
fun getDeviceName(promise: Promise) {
try {
val name = android.os.Build.MODEL
promise.resolve(name)
} catch (e: Exception) {
promise.reject('ERROR', e.message)
}
}
// JavaScript
const name = await NativeModules.MyModule.getDeviceName();
console.log('Device:', name);Använd callbacks som alternativ
Innan Promises blev standard använde native-moduler Callback-parametrar (typen Callback i SDK:t). Du tar emot en eller två callbacks — vanligtvis successCallback och errorCallback — och anropar dem från native-koden. Callbacks kan endast anropas en gång; använd Promises eller händelser för upprepade svar.
@ReactMethod
fun getBatteryLevel(
successCallback: Callback,
errorCallback: Callback
) {
try {
val intent = reactApplicationContext.registerReceiver(
null,
android.content.IntentFilter(
android.content.Intent.ACTION_BATTERY_CHANGED
)
)
val level = intent?.getIntExtra(
android.os.BatteryManager.EXTRA_LEVEL, -1
) ?: -1
successCallback.invoke(level)
} catch (e: Exception) {
errorCallback.invoke(e.message)
}
}Skicka komplexa data med WritableMap
Om du vill returnera ett objekt (en JSON-map) från native-kod till JavaScript använder du WritableMap och Arguments.createMap(). Du lägger till nyckel-värde-par i mappen med typade metoder som putString, putInt och putBoolean. Mappen serialiseras automatiskt till ett JavaScript-objekt när den når JS-lagret.
@ReactMethod
fun getDeviceInfo(promise: Promise) {
val map = Arguments.createMap()
map.putString('model', android.os.Build.MODEL)
map.putString('brand', android.os.Build.BRAND)
map.putInt('sdkVersion', android.os.Build.VERSION.SDK_INT)
map.putBoolean('isTablet', reactApplicationContext
.resources.configuration.smallestScreenWidthDp >= 600)
promise.resolve(map)
}Annoteringen isBlockingSynchronousMethod
Som standard är alla anrop med @ReactMethod asynkrona. Om du lägger till isBlockingSynchronousMethod = true blir anropet synkront — JS-tråden blockeras tills native-koden returnerar. Detta avråds starkt från i produktion eftersom det låser gränssnittet, men kan vara användbart vid felsökning eller för att läsa ett litet cachat värde som måste vara tillgängligt omedelbart.
@ReactMethod(isBlockingSynchronousMethod = true)
fun getAppVersionSync(): String {
return reactApplicationContext
.packageManager
.getPackageInfo(reactApplicationContext.packageName, 0)
.versionName ?: 'unknown'
}Modulkonstanter via getConstants
Du kan exponera kompileringskonstanter för JavaScript genom att åsidosätta getConstants() i modulen. Konstanterna överförs en gång vid uppstart och är synkront tillgängliga som NativeModules.MyModule.CONSTANT_NAME utan att något asynkront anrop behövs. Använd konstanter för fasta värden som felkoder, konfigurationsflaggor eller plattformsidentifierare.
override fun getConstants(): Map<String, Any> {
return mapOf(
'LONG_TOAST' to Toast.LENGTH_LONG,
'SHORT_TOAST' to Toast.LENGTH_SHORT,
'PLATFORM' to 'android'
)
}
// In JavaScript:
// const { LONG_TOAST } = NativeModules.ToastModule;
// showToast('Hello!', LONG_TOAST);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 du dig: hur du skapar en ReactContextBaseJavaModule i Kotlin, annoterar metoder med @ReactMethod för att exponera dem för JavaScript och registrerar modulen via ett ReactPackage i MainApplication. Du såg också hur du returnerar data med Promises och WritableMap. Nästa steg är att skriva en äldre native-modul i Swift för iOS.
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 Kotlin” 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 Kotlin”, 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 Kotlin”?
Skapa en ReactContextBaseJavaModule i Kotlin, annotera en metod med @ReactMethod, exponera den genom ett ReactPackage och anropa den från JavaScript. 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 1 av 4.
Hur lång tid tar lektionen ”Skriva en äldre nativ modul i Kotlin”?
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