onPanResponderMove

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.

Örnek çözümü göster

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} />;
}

Kendini test et

move kavramlarını eşleştir

onPanResponderMove

Hareket sırası
dx

Yatay hareket
dy

Dikey hareket
gestureState

Jest verisi
onPanResponderMove ne zaman çağrılır?
- Yalnızca release anında
- Jest aktifken her hareket
- Mount sırasında
- Hiçbir zaman
Cevabı göster

Jest aktifken her hareket — Jest aktifken her parmak hareketinde çağrılır.

move geri çağrısı

PanResponder.create({ ____: (evt, g) => setPos({ x: g.dx, y: g.dy }) });

Cevabı göster

PanResponder.create({ onPanResponderMove: (evt, g) => setPos({ x: g.dx, y: g.dy }) });

Sıradaki ders: onPanResponderRelease

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler