Event parametre

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.

Örnek çözümü göster

function App() {
  return (
    <TouchableOpacity onPress={(event) => console.log(event.nativeEvent.locationX)}>
      <Text>Dokun</Text>
    </TouchableOpacity>
  );
}
export default App;

Kendini test et

Olay parçalarını eşle

event

Olay nesnesi
nativeEvent

Yerel platform verisi
locationX

Yatay dokunma konumu
pageY

Dikey sayfa konumu
onPress'e event parametresi nasıl verilir?
- onPress={(event) => ...}
- onPress={event}
- onPress={event()}
- onPress=event
Cevabı göster

onPress={event} — ok fonksiyonu içinde event parametresi alınır.

event parametresini ekle

import { TouchableOpacity, Text } from 'react-native';

function App() {
  return (
    <TouchableOpacity onPress={(____) => console.log(event.nativeEvent.locationX)}>
      <Text>Koordinat</Text>
    </TouchableOpacity>
  );
}

Cevabı göster

import { TouchableOpacity, Text } from 'react-native';

function App() {
  return (
    <TouchableOpacity onPress={(event) => console.log(event.nativeEvent.locationX)}>
      <Text>Koordinat</Text>
    </TouchableOpacity>
  );
}

Sıradaki ders: onLayout

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler