onPress ve onPressIn
- React Native kursu
- Başlangıç
- Ders 45/116
- 5 dk
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.
Başlangıç kodu
import React from 'react';
import { Button } from 'react-native';
export default function SendButton() {
// handlePress işlevini ekle ve Button döndür
return null;
}Örnek çözüm
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.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangisi parmak ekrana değdiğinde çağrılır?
<Pressable ???={() => setPressed(true)}>- onLongPress
- onPressOut
- onPress
- onPressIn Doğru cevap
Açıklama: onPressIn parmak değdiğinde çağrılır.
2 onPressIn prop'unu yaz
<Pressable ____={() => setPressed(true)} onPress={handlePress}>
<Text>Bas</Text>
</Pressable><Pressable onPressIn={() => setPressed(true)} onPress={handlePress}>
<Text>Bas</Text>
</Pressable>Açıklama: onPressIn parmak değdiğinde çağrılır.
3 Olayı tetiklendiği ana eşle
| Kavram | Anlamı |
|---|---|
onPressIn |
Parmak değdi |
onPressOut |
Parmak kalktı |
onPress |
Dokunma tamamlandı |
onLongPress |
Uzun basış tamamlandı |