react-native-gesture-handler
- React Native kursu
- Orta seviye
- Ders 80/116
- 5 dk
react-native-gesture-handler kütüphanesini öğrenirsin.
react-native-gesture-handler
react-native-gesture-handler, yerel jest motorunu kullanan bir kütüphanedir. Yerleşik PanResponder'dan daha akıcı ve güvenilir çalışır; özellikle React Navigation ile birlikte kullanılır.
Tıklama için TapGestureHandler, sürükleme için PanGestureHandler gibi hazır bileşenler sunar. Her birinin onHandlerStateChange gibi geri çağrıları vardır.
TapGestureHandler
TapGestureHandler, tıklama jestini yakalar. onHandlerStateChange ile durumu izler; event.nativeEvent.state State.BEGAN, State.ACTIVE, State.END gibi değerler alır. Bu değerler jestin hangi aşamada olduğunu belirtir.
Kullanım: <TapGestureHandler onHandlerStateChange={onTap}><View /></TapGestureHandler>. Çocuğu olmak zorundadır; tıklama çocuğun üzerinde yakalanır. State.END geldiğinde tıklama tamamlanmış sayılır.
Uygulama TapGestureHandler ile sarmala
Bir TapGestureHandler kullan: <TapGestureHandler onHandlerStateChange={onTap}><View /></TapGestureHandler> döndür. onTap zaten 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 Kütüphane import
import { TapGestureHandler } from '____';import { TapGestureHandler } from 'react-native-gesture-handler';Açıklama: TapGestureHandler bu kütüphaneden gelir.
2 gesture-handler kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
TapGestureHandler |
Tıklama jesti |
PanGestureHandler |
Sürükleme jesti |
onHandlerStateChange |
Durum değişimi |
react-native-gesture-handler |
Kütüphane |
3 react-native-gesture-handler neden tercih edilir?
- Daha az özellik
- Yalnızca iOS
- Renk değiştirir
- Yerel motor, daha akıcı Doğru cevap
Açıklama: Yerel jest motoruyla daha akıcı çalışır.