Pressable

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.

Örnek çözümü göster

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

Kendini test et

Bileşeni özelliğine eşle

Pressable

Yeni nesil dokunma
TouchableOpacity

Saydamlıkla geri bildirim
Button

Sistem varsayılan görünümü
onLongPress

Uzun basma işlevi
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
- Yalnızca bir dize
Cevabı göster

Bir nesne ya da bir işlev — Pressable style'a hem nesne hem işlev verebilirsin.

pressed parametresini yaz

<Pressable style={({____}) => ({ opacity: pressed ? 0.5 : 1 })}>...</Pressable>

Cevabı göster

<Pressable style={({pressed}) => ({ opacity: pressed ? 0.5 : 1 })}>...</Pressable>

Sıradaki ders: onPress ve onPressIn

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler