Kotlin ile Eski Bir Yerel Modül Yazma
Kotlin ile bir ReactContextBaseJavaModule oluşturun, bir yönteme @ReactMethod ek açıklamasını uygulayın, bunu bir ReactPackage aracılığıyla dışa açın ve JavaScript'ten çağırın.
Kotlin ile Eski Bir Yerel Modül Yazma, CoddyKit'te ücretsiz bir React Native Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Native Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Native Academy kursu toplamda 4 dersten oluşur.
Eski Yerel Modül Nedir
Bir eski yerel modül, React Native uygulamasında yerel Android (Kotlin/Java) kodunu JavaScript'ten çağırmanıza olanak tanır. Yerleşik React Native API'leri ihtiyacınız olan bir cihaz özelliğini kapsamadığında, aradaki boşluğu doldurmak için bir yerel modül yazarsınız. Eski modüller Bridge mimarisini kullanır; bu da çağrıların JS ile yerel kod arasındaki köprü üzerinden eşzamansız olarak yapıldığı anlamına gelir.
Kotlin Modül Sınıfını Oluşturma
Her Android yerel modülü ReactContextBaseJavaModule sınıfını genişletir. JavaScript'in modülünüzü çağırırken kullanacağı adı döndürmek için getName() yöntemini geçersiz kılarsınız. Bu sınıfı, mevcut Android kaynak dosyalarının yanındaki android/app/src/main/java/com/yourapp/ klasörüne yerleştirin.
// 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'
}Yöntemlere @ReactMethod Ek Açıklamasını Ekleme
JavaScript'e açmak istediğiniz her yönteme @ReactMethod ek açıklaması eklenmelidir. Yöntem public olmalı ve dönüş türü void olmalıdır — sonuçlar dönüş değerleriyle değil, geri çağırmalar veya vaatler aracılığıyla eşzamansız olarak döndürülür. React Native, String, Int, Boolean ve Double gibi temel türlerin parametrelerini otomatik olarak serileştirir.
@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()
}ReactPackage Oluşturma
Yerel modüller bir ReactPackage aracılığıyla kaydedilmelidir. ReactPackage arayüzünü uygular ve modülünüzü createNativeModules içinden döndürürsünüz. Ardından paket, React Native'in başlangıçta modülü dahil etmesi için MainApplication.kt içindeki paketler listesine eklenir.
// 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()
}Paketi MainApplication İçinde Kaydetme
MainApplication.kt dosyasını açın ve getPackages() yöntemini bulun. ToastPackage örneğinizi listeye ekleyin. React Native, kullanılabilir tüm yerel modülleri keşfedip JavaScript arayüzlerini kaydetmek için bunu başlangıç sırasında çağırır.
// MainApplication.kt (inside getPackages)
override fun getPackages(): List<ReactPackage> =
PackageList(this).packages.apply {
add(ToastPackage()) // <-- register your package here
}Modülü JavaScript'ten Çağırma
JavaScript tarafında NativeModules öğesini react-native içinden içe aktarın ve modülünüze getName() tarafından döndürülen adla erişin. Yerel modülü, temiz bir TypeScript API'si sunmak ve ham NativeModules başvurusunu bileşenlerinizden gizlemek için bir yardımcı dosyayla sarın.
// 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');Promise'lerle Değer Döndürme
@ReactMethod yöntemleri void döndürmek zorunda olduğundan, verileri JavaScript'e göndermek için Promise parametrelerini kullanırsınız. Son parametre olarak promise: Promise ekleyin; başarılı durumda promise.resolve(value), hata durumunda ise promise.reject(code, message) çağrısını yapın. JS tarafında çağrıyı tüm eşzamansız işlevlerde olduğu gibi await ile bekleyebilirsiniz.
// 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);Alternatif Olarak Geri Çağırmaları Kullanma
Promise'ler standart hâle gelmeden önce yerel modüller Callback parametrelerini (SDK'deki Callback türü) kullanıyordu. Genellikle successCallback ve errorCallback olmak üzere bir veya iki geri çağırma alır ve bunları yerel koddan çağırırsınız. Geri çağırmalar yalnızca bir kez çağrılabilir; tekrarlanan yanıtlar için Promise'leri veya olayları kullanın.
@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)
}
}WritableMap ile Karmaşık Veri Aktarma
Yerel koddan JavaScript'e bir nesne (JSON eşlemesi) döndürmek için WritableMap ve Arguments.createMap() kullanın. putString, putInt ve putBoolean gibi türü belirli ekleme yöntemlerini kullanarak eşlemeye anahtar-değer çiftleri eklersiniz. Eşleme JS katmanına ulaştığında otomatik olarak bir JavaScript nesnesine serileştirilir.
@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)
}isBlockingSynchronousMethod Ek Açıklaması
Varsayılan olarak tüm @ReactMethod çağrıları eşzamansızdır. isBlockingSynchronousMethod = true eklemek çağrıyı eşzamanlı hâle getirir; yerel kod dönene kadar JS iş parçacığı engellenir. Bu yaklaşım, kullanıcı arayüzünü dondurduğu için üretimde kesinlikle önerilmez, ancak hata ayıklama veya hemen kullanılabilir olması gereken küçük bir önbelleğe alınmış değeri okuma açısından yararlı olabilir.
@ReactMethod(isBlockingSynchronousMethod = true)
fun getAppVersionSync(): String {
return reactApplicationContext
.packageManager
.getPackageInfo(reactApplicationContext.packageName, 0)
.versionName ?: 'unknown'
}getConstants ile Modül Sabitleri
Modülünüzde getConstants() yöntemini geçersiz kılarak derleme zamanı sabitlerini JavaScript'e açabilirsiniz. Sabitler başlangıçta bir kez aktarılır ve eşzamansız bir çağrı gerektirmeden NativeModules.MyModule.CONSTANT_NAME olarak eşzamanlı biçimde erişilebilir. Hata kodları, yapılandırma bayrakları veya platform tanımlayıcıları gibi sabit değerler için sabitleri kullanın.
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);Hızlı Kontrol
Bu dersteki React Native Mobil Geliştirme kavramlarını anlayıp anlamadığınızı test edin.
Ders Özeti
Bu derste şunları öğrendiniz: Kotlin'de bir ReactContextBaseJavaModule oluşturmayı, JavaScript'e açmak için yöntemlere @ReactMethod ek açıklaması eklemeyi ve modülü MainApplication içindeki bir ReactPackage aracılığıyla kaydetmeyi. Ayrıca Promise'leri ve WritableMap'i kullanarak nasıl veri döndürüleceğini gördünüz. Sırada iOS için Swift'te eski bir yerel modül yazmayı inceleyeceğiz.
Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Kotlin ile Eski Bir Yerel Modül Yazma” dersi ücretsiz mi?
Evet — “Kotlin ile Eski Bir Yerel Modül Yazma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Native Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Native Academy kursu toplamda 4 dersten oluşur.
“Kotlin ile Eski Bir Yerel Modül Yazma” dersinde ne öğreneceğim?
Kotlin ile bir ReactContextBaseJavaModule oluşturun, bir yönteme @ReactMethod ek açıklamasını uygulayın, bunu bir ReactPackage aracılığıyla dışa açın ve JavaScript'ten çağırın. React Native Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Native Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Native Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Kotlin ile Eski Bir Yerel Modül Yazma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Native Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Native Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Kotlin ile Eski Bir Yerel Modül Yazma
- Swift ile Eski Bir Yerel Modül Yazma
- JSI ile Turbo Yerel Modülleri
- Yerelden Eşzamansız Geri Çağırmalar, Promise'ler ve Olaylar