Özet - Jestler
- React Native kursu
- Orta seviye
- Ders 81/116
- 5 dk
PanResponder ve gesture handler'ı birleştirerek bir sürüklenebilir kart yazarsın.
Özet - Jestler
Jestler için iki yol öğrendik: yerleşik PanResponder ve react-native-gesture-handler kütüphanesi. PanResponder üç ana geri çağrı kullanır: onMoveShouldSetPanResponder (başlat), onPanResponderMove (sürükle), onPanResponderRelease (bırak).
gestureState.dx ve dy hareket miktarını verir. Kütüphane ise TapGestureHandler ve PanGestureHandler gibi hazır bileşenlerle yerel motoru kullanır; daha akıcıdır.
Uygulama PanResponder: move ve release
Bir PanResponder yarat. onMoveShouldSetPanResponder: () => true, onPanResponderMove: (e, g) => setPos({ x: g.dx, y: g.dy }) ve onPanResponderRelease: () => setPos({ x: 0, y: 0 }) olsun. <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 });
// move ve release geri çağrılarını ekle
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: (e, g) => setPos({ x: g.dx, y: g.dy }),
onPanResponderRelease: () => setPos({ x: 0, y: 0 }),
});
return <View {...pan.panHandlers} />;
}Uygulama TapGestureHandler ile sarmala
Bir <TapGestureHandler onHandlerStateChange={onTap}> ile bir <View /> sarmala ve döndür. onTap tanımlı.
Başlangıç kodu
import React from 'react';
import { TapGestureHandler, View } from 'react-native-gesture-handler';
export default function Tap() {
const onTap = () => console.log('tap');
// TapGestureHandler ile sarmala
return <View />;
}Örnek çözüm
import React from 'react';
import { TapGestureHandler, View } from 'react-native-gesture-handler';
export default function Tap() {
const onTap = () => console.log('tap');
return (
<TapGestureHandler onHandlerStateChange={onTap}>
<View />
</TapGestureHandler>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangi geri çağrı parmak kaldırılınca çalışır?
- onPanResponderRelease Doğru cevap
- onPanResponderMove
- onMoveShouldSetPanResponder
- onLayout
Açıklama: onPanResponderRelease parmak kaldırılınca çağrılır.
2 Jest özeti
| Kavram | Anlamı |
|---|---|
PanResponder |
Yerleşik jest |
onPanResponderMove |
Sürükleme |
onPanResponderRelease |
Bırakma |
TapGestureHandler |
Tıklama |