onPanResponderRelease
- React Native kursu
- Orta seviye
- Ders 79/116
- 5 dk
onPanResponderRelease ile bırakma öğrenirsin.
onPanResponderRelease
onPanResponderRelease, parmak ekrandan kaldırıldığında çağrılır. Burada genellikle bileşen eski yerine döner ya da son konum kaydedilir. 'Bırakma' anı budur.
Örnek: onPanResponderRelease: () => setPos({ x: 0, y: 0 }) parmağı kaldırınca bileşeni başlangıç noktasına döndürür. Veya son konumu korumak için hiçbir şey yapmazsın.
Uygulama Bırakınca eski yere dön
Bir PanResponder yarat. onMoveShouldSetPanResponder: () => true ve onPanResponderRelease: () => setPos({ x: 0, y: 0 }) olsun. pos state'i tanımlı. <View {...pan.panHandlers} /> döndür.
Başlangıç kodu
import React, { useState } from 'react';
import { PanResponder, View } from 'react-native';
export default function Drag() {
const [pos, setPos] = useState({ x: 0, y: 0 });
// Bırakınca konumu sıfırla
return <View />;
}Örnek çözüm
import React, { useState } from 'react';
import { PanResponder, View } from 'react-native';
export default function Drag() {
const [pos, setPos] = useState({ x: 0, y: 0 });
const pan = PanResponder.create({
onMoveShouldSetPanResponder: () => true,
onPanResponderRelease: () => setPos({ x: 0, y: 0 }),
});
return <View {...pan.panHandlers} />;
}Bırakma davranışı
Bırakma anında iki yaygın seçenek var: bileşeni eski yerine döndürmek ya da son konumda bırakmak. Döndürmek için setPos({ x: 0, y: 0 }); bırakmak için hiçbir şey yapmamak yeterli.
Bazı uygulamalar bırakma anında snap yapar: en yakın köşeye ya da hedefe yapışır. Bu, onPanResponderRelease içinde hesaplanıp setPos'a yazılır.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 onPanResponderRelease ne zaman çağrılır?
- Jest başlarken
- Her hareket
- Parmak kaldırılınca Doğru cevap
- Mount sırasında
Açıklama: Parmak ekrandan kaldırılınca çağrılır.
2 release geri çağrısı
PanResponder.create({ ____: () => setPos({ x: 0, y: 0 }) });PanResponder.create({ onPanResponderRelease: () => setPos({ x: 0, y: 0 }) });Açıklama: onPanResponderRelease bırakma anını yakalar.
3 release kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
onPanResponderRelease |
Bırakma anı |
setPos |
Konum günceller |
dx |
Hareket miktarı |
panHandlers |
View'e yayılır |