Event parametre
- React Native kursu
- Başlangıç
- Ders 79/116
- 5 dk
Olay işleyici parametrelerini öğrenirsin.
Olay nesnesi
Olay işleyiciler bir event parametresi alır. Bu nesne, olay hakkında bilgi taşır: dokunma konumu, hedef öğe, zaman damgası gibi.
Örneğin onPress={'{(event) => console.log(event)}'}. Burada event, React Native'nin gönderdiği olay nesnesidir. İçinde nativeEvent adlı bir alan vardır; gerçek platform verisi oradadır.
Yaygın kullanım: event.nativeEvent.locationX dokunmanın yatay konumunu verir. pageY dokunmanın sayfadaki dikey konumudur. Bunlar çizim uygulamaları ya da özel hareketler için kullanışlıdır.
event parametresini kullanmak
Olay işleyici yazarken parametre adı serbesttir; yaygın seçim event veya e'dir. Önemli olan prop'a fonksiyonun parametre alacak biçimde yazılmasıdır.
Yanlış: onPress={'{handlePress}'} — burada handlePress parametre alıyor olsa bile ok fonksiyonu yerine doğrudan referans kullanılmış. Bu çalışır ama parametre açıkça görünmez.
Açık biçim: onPress={'{(event) => handlePress(event)}'}. Bu, handlePress'in event aldığını gösterir. Karmaşık işlerde açık yazım kodu daha okunabilir kılar.
Uygulama Dokunma konumunu yaz
Bir App bileşeni yaz. <TouchableOpacity> içinde <Text>Dokun</Text> göster. onPress işleyicisi event alıp console.log(event.nativeEvent.locationX) yapsın. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { TouchableOpacity, Text } from 'react-native';
// dokunma konumunu buraya yazÖrnek çözüm
function App() {
return (
<TouchableOpacity onPress={(event) => console.log(event.nativeEvent.locationX)}>
<Text>Dokun</Text>
</TouchableOpacity>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Olay parçalarını eşle
| Kavram | Anlamı |
|---|---|
event |
Olay nesnesi |
nativeEvent |
Yerel platform verisi |
locationX |
Yatay dokunma konumu |
pageY |
Dikey sayfa konumu |
2 onPress'e event parametresi nasıl verilir?
- onPress={(event) => ...}
- onPress={event} Doğru cevap
- onPress={event()}
- onPress=event
Açıklama: ok fonksiyonu içinde event parametresi alınır.
3 event parametresini ekle
import { TouchableOpacity, Text } from 'react-native';
function App() {
return (
<TouchableOpacity onPress={(____) => console.log(event.nativeEvent.locationX)}>
<Text>Koordinat</Text>
</TouchableOpacity>
);
}import { TouchableOpacity, Text } from 'react-native';
function App() {
return (
<TouchableOpacity onPress={(event) => console.log(event.nativeEvent.locationX)}>
<Text>Koordinat</Text>
</TouchableOpacity>
);
}Açıklama: event parametresi nativeEvent'i taşır.