onLongPress
- React Native kursu
- Başlangıç
- Ders 78/116
- 5 dk
onLongPress ile uzun dokunma öğrenirsin.
onLongPress olayı
onLongPress kullanıcı bir öğeyi basılı tuttuğunda çağrılır. Hızlı dokunuş onPress'i, uzun tutma ise onLongPress'i tetikler.
Örnek: <TouchableOpacity onPress={'{short}'} onLongPress={'{long}'}>. Hızlı basış short'u, biraz tutma long'u çağırır. Bu, bağlam menüsü ya da silme onayı gibi durumlar için idealdir.
Bekleme süresi delayLongPress prop'u ile ayarlanır. Varsayılan 500 milisaniyedir. Örneğin delayLongPress={'{800}'} daha uzun bir tutma bekler. Bu, yanlış tetiklenmeyi önler.
delayLongPress ayarı
Bir öğeye uzun basmanın ne kadar süreceğini delayLongPress ile ayarlarsın. Varsayılan 500 milisaniyedir; bazen çok kısadır.
Örneğin bir galeride uzun basınca silme menüsü açılıyorsa delayLongPress={'{700}'} daha güvenli hissettirir. Kullanıcı kaydırırken yanlışlıkla silme tetiklenmez.
Değer milisaniye cinsinden verilir. Çok düşük (ör. 100) yanlış tetiklenmelere yol açar; çok yüksek (ör. 2000) kullanıcının sabrını taşır. 500-800 arası genelde iyi bir aralıktır.
Uygulama Kısa ve uzun basma
Bir App bileşeni yaz. count state'i tanımla. <TouchableOpacity> etiketinde hem onPress hem onLongPress olsun. onPress setCount(count + 1), onLongPress setCount(count + 5) yapsın. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { useState } from 'react';
import { TouchableOpacity, Text } from 'react-native';
// kısa ve uzun basmayı buraya yazÖrnek çözüm
function App() {
const [count, setCount] = useState(0);
return (
<TouchableOpacity
onPress={() => setCount(count + 1)}
onLongPress={() => setCount(count + 5)}>
<Text>{count}</Text>
</TouchableOpacity>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 onLongPress ekle
import { TouchableOpacity, Text } from 'react-native';
function App() {
return (
<TouchableOpacity
onPress={() => console.log('Kısa')}
____={() => console.log('Uzun')}>
<Text>Bas</Text>
</TouchableOpacity>
);
}import { TouchableOpacity, Text } from 'react-native';
function App() {
return (
<TouchableOpacity
onPress={() => console.log('Kısa')}
onLongPress={() => console.log('Uzun')}>
<Text>Bas</Text>
</TouchableOpacity>
);
}Açıklama: onLongPress basılı tutmayı dinler.
2 delayLongPress birimi nedir?
- Piksel Doğru cevap
- Saniye
- Milisaniye
- Yüzde
Açıklama: değer milisaniye cinsindendir.
3 onLongPress parçalarını eşle
| Kavram | Anlamı |
|---|---|
onLongPress |
Uzun tutma olayı |
delayLongPress |
Bekleme süresi |
500 |
Varsayılan değer |
onPress |
Hızlı dokunma olayı |