Native event
- React Native kursu
- İleri seviye
- Ders 70/83
- 5 dk
Native event ve emitter öğrenirsin.
Native event
Native event, native taraftan JS'e gönderilen bildirimlerdir. Örnek: Bluetooth açıldığında, kulaklık takıldığında ya da sensör verisi geldiğinde native taraf bir event yayımlar. JS, NativeEventEmitter ile bu event'leri dinler.
Kullanım: önce modülün bir örneği alınır new NativeEventEmitter(NativeModules.Bluetooth). Sonra addListener ile belirli bir event dinlenir. İşlem bitince remove ile temizlik yapılır; bellek sızıntısı önlenir.
NativeEventEmitter ile dinleme
NativeEventEmitter, native event'leri dinlemek için kullanılan sınıftır. Önce modül örneği ile bir emitter oluşturulur: const emitter = new NativeEventEmitter(NativeModules.Bluetooth). Sonra emitter.addListener('stateChanged', callback) ile event dinlenir.
Callback, event payload'ını alır. Önemli: bileşen kapanırken listener kaldırılır. useEffect içine const sub = emitter.addListener(...) yazılır, return () => sub.remove() ile temizlik yapılır. Bu kalıp, bellek sızıntısını önler.
Uygulama Bluetooth event dinle
useBluetoothState hook'unu tamamla. NativeEventEmitter'ı react-native'dan içe aktar. new NativeEventEmitter(NativeModules.Bluetooth) ile emitter oluştur. addListener('stateChanged', handler) ile dinle; useEffect dönüşünde sub.remove() çağır.
Başlangıç kodu
import { useEffect } from 'react';
import { NativeModules } from 'react-native';
export function useBluetoothState(handler) {
useEffect(() => {
// emitter oluştur ve 'stateChanged' dinle
}, []);
}Örnek çözüm
import { useEffect } from 'react';
import { NativeEventEmitter, NativeModules } from 'react-native';
export function useBluetoothState(handler) {
useEffect(() => {
const emitter = new NativeEventEmitter(NativeModules.Bluetooth);
const sub = emitter.addListener('stateChanged', handler);
return () => sub.remove();
}, []);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Native event neyi bildirir?
- Native taraftan gelen durum değişikliklerini
- Yalnızca dosya adlarını Doğru cevap
- Yalnızca animasyonları
- Yalnızca stilleri
Açıklama: Native event native taraftan gelen durum değişikliklerini bildirir.
2 Event parçalarını eşle
| Kavram | Anlamı |
|---|---|
NativeEventEmitter |
Event dinleyici |
addListener |
Event kaydı yapar |
'stateChanged' |
Event adı |
sub.remove() |
Temizlik yapar |
3 Event adını yaz
emitter.addListener('____', handler);emitter.addListener('stateChanged', handler);Açıklama: stateChanged event adıdır.