onPress ve onPressIn

onPress, onPressIn, onPressOut olaylarını öğrenirsin.

onPress ve onPressIn

Dokunma tek bir olay değil, bir dizi olaydır. onPressIn parmak ekrana değdiğinde, onPressOut parmak ekrandan kalktığında, onPress ise tüm dokunma tamamlandığında çağrılır. Button yalnızca onPress verir; Pressable ve TouchableOpacity üçünü de destekler.

Örnek: <Pressable onPressIn={() => setPressed(true)} onPressOut={() => setPressed(false)} onPress={handlePress}>. Böylece basılı anını bir durum değişkeniyle takip eder, bırakınca işlemi tetiklersin. Bu kalıp animasyonlu düğmeler için kullanışlıdır.

Uygulama onPress işleyici ekle

Boş bileşeni tamamla. handlePress işlevini tanımla. Dönüşte <Button title="Gönder" onPress={handlePress} /> kullan.

Örnek çözümü göster

import React from 'react';
import { Button } from 'react-native';

export default function SendButton() {
  const handlePress = () => {};
  return <Button title="Gönder" onPress={handlePress} />;
}

onLongPress

Bir düğmeyi biraz tutunca farklı bir eylem istiyorsan onLongPress kullanırsın. Bu olay parmak ekranda yaklaşık 500 milisaniye kaldığında tetiklenir. delayLongPress prop'u ile bu süreyi ayarlayabilirsin. Pressable ve TouchableOpacity destekler.

Örnek: <Pressable onLongPress={handleDelete} delayLongPress={700}>. Burada kullanıcı 700 milisaniye boyunca basılı tutarsa handleDelete çağrılır. Bu kalıp mobilde 'basılı tut ve seç' menüleri için standarttır; silme, düzenleme ve paylaşma eylemleri burada toplanır.

Kendini test et

Hangisi parmak ekrana değdiğinde çağrılır?
```
<Pressable ???={() => setPressed(true)}>
```
- onLongPress
- onPressOut
- onPress
- onPressIn
Cevabı göster

onPressIn — onPressIn parmak değdiğinde çağrılır.

onPressIn prop'unu yaz

<Pressable ____={() => setPressed(true)} onPress={handlePress}>
  <Text>Bas</Text>
</Pressable>

Cevabı göster

<Pressable onPressIn={() => setPressed(true)} onPress={handlePress}>
  <Text>Bas</Text>
</Pressable>

Olayı tetiklendiği ana eşle

onPressIn

Parmak değdi
onPressOut

Parmak kalktı
onPress

Dokunma tamamlandı
onLongPress

Uzun basış tamamlandı

Sıradaki ders: disabled

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler