Pressable
- React Native kursu
- Başlangıç
- Ders 44/116
- 5 dk
Pressable ile gelişmiş dokunma öğrenirsin.
Pressable
Pressable React Native'in yeni nesil dokunma bileşenidir. TouchableOpacity'a benzer ama daha geniş bir olay yelpazesi sunar: onPressIn, onPressOut, onLongPress hepsi tek bileşende toplanır. style prop'u bir işlev alabilir ve bu işlev { pressed } durumu alır.
Örnek: <Pressable style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}>...</Pressable>. Burada pressed doğruyken saydamlık 0.5 olur. Bu, dokunma geri bildirimini tamamen özelleştirmeni sağlar. Yeni kodlarda Pressable önerilir.
pressed durumu
Pressable'ın style işlevine verilen nesne { pressed } adlı bir özellikle çağrılır. pressed doğruyken düğmeye basılıdır. Bunu kullanarak basılma anında farklı bir görünüm üretebilirsin. Aynısı onPressIn ve onPressOut ile de yapılır.
Örnek: style={({ pressed }) => ({ backgroundColor: pressed ? 'tomato' : 'steelblue' })}. Bu yazımda düğme basılıyken kırmızımsı, bırakıldığında çelik mavisi olur. Bu kalıp yeni React Native kodlarında dokunma geri bildirimi için standarttır.
Uygulama Pressable ile basılma geri bildirimi
Boş bileşeni tamamla. handlePress işlevini tanımla. Dönüşte <Pressable onPress={handlePress} style={({ pressed }) => ({ backgroundColor: pressed ? 'tomato' : 'steelblue' })}> içinde <Text style={{ color: 'white' }}>Bas</Text> bulunsun.
Başlangıç kodu
import React from 'react';
import { Pressable, Text } from 'react-native';
export default function PressButton() {
// handlePress işlevini ekle ve Pressable döndür
return null;
}Örnek çözüm
import React from 'react';
import { Pressable, Text } from 'react-native';
export default function PressButton() {
const handlePress = () => {};
return (
<Pressable onPress={handlePress} style={({ pressed }) => ({ backgroundColor: pressed ? 'tomato' : 'steelblue' })}>
<Text style={{ color: 'white' }}>Bas</Text>
</Pressable>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bileşeni özelliğine eşle
| Kavram | Anlamı |
|---|---|
Pressable |
Yeni nesil dokunma |
TouchableOpacity |
Saydamlıkla geri bildirim |
Button |
Sistem varsayılan görünümü |
onLongPress |
Uzun basma işlevi |
2 Pressable'ın style prop'u ne alabilir?
<Pressable style={???}>...</Pressable>- Yalnızca bir nesne
- Yalnızca bir dizi
- Bir nesne ya da bir işlev Doğru cevap
- Yalnızca bir dize
Açıklama: Pressable style'a hem nesne hem işlev verebilirsin.
3 pressed parametresini yaz
<Pressable style={({____}) => ({ opacity: pressed ? 0.5 : 1 })}>...</Pressable><Pressable style={({pressed}) => ({ opacity: pressed ? 0.5 : 1 })}>...</Pressable>Açıklama: pressed durumu style işlevine verilir.