onPanResponderMove
- React Native kursu
- Orta seviye
- Ders 78/116
- 5 dk
onPanResponderMove ile sürükleme öğrenirsin.
onPanResponderMove
onPanResponderMove, jest aktifken parmak hareket ettikçe çağrılır. Burada bileşenin konumunu güncellersin. gestureState.dx ve gestureState.dy başlangıçtan beri toplam hareketi verir.
Örnek: onPanResponderMove: (evt, g) => setPos({ x: g.dx, y: g.dy }). Her karede parmağın yeni konumu state'e yazılır; bileşen parmakla beraber hareket eder.
gestureState değerleri
gestureState jest hakkında zengin veri taşır. dx, dy başlangıçtan itibaren toplam yer değiştirme; moveX, moveY parmağın o anki konumu; vx, vy hız.
En sık dx ve dy kullanılır; bunlar sürükleme miktarını verir. Konumu bu değerlerle hesaplayıp bileşene uygularsın.
Uygulama Konumu move ile güncelle
Bir PanResponder yarat. onMoveShouldSetPanResponder: () => true ve onPanResponderMove: (evt, g) => setPos({ x: g.dx, y: g.dy }) olsun. pos state'i useState({ x: 0, y: 0 }) ile 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 });
// PanResponder ekle; sürükleme sırasında pos'u güncelle
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,
onPanResponderMove: (evt, g) => setPos({ x: g.dx, y: g.dy }),
});
return <View {...pan.panHandlers} />;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 move kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
onPanResponderMove |
Hareket sırası |
dx |
Yatay hareket |
dy |
Dikey hareket |
gestureState |
Jest verisi |
2 onPanResponderMove ne zaman çağrılır?
- Yalnızca release anında
- Jest aktifken her hareket Doğru cevap
- Mount sırasında
- Hiçbir zaman
Açıklama: Jest aktifken her parmak hareketinde çağrılır.
3 move geri çağrısı
PanResponder.create({ ____: (evt, g) => setPos({ x: g.dx, y: g.dy }) });PanResponder.create({ onPanResponderMove: (evt, g) => setPos({ x: g.dx, y: g.dy }) });Açıklama: onPanResponderMove sürükleme sırasında çağrılır.