TouchableOpacity

TouchableOpacity ile dokunma geri bildirimi öğrenirsin.

TouchableOpacity

TouchableOpacity dokunulduğunda saydamlığı azalan esnek bir düğme kabuğudur. Button'dan farkı: içerisine herhangi bir bileşen koyabilirsin; Text, Image ya da View gibi. onPress yine dokunma işlevidir.

Örnek: <TouchableOpacity onPress={handlePress}><Text style={{ color: 'blue' }}>Devam</Text></TouchableOpacity>. Dokunulduğunda kabuk yarım saydam olur; kullanıcı görsel geri bildirim alır. Bu bileşen yıllardır yaygın olsa da yeni kodlarda Pressable tercih edilir.

Özel çocuklar

TouchableOpacity bir düğme davranışı verir ama görünümü sen belirlersin. İçine bir View koyup arka plan, kenarlık ve boşluk verebilirsin. Bu, kart biçimli düğmeler, ikonlu düğmeler ve özel stilli düğmeler için idealdir.

Örnek: <TouchableOpacity onPress={handlePress}><View style={{ padding: 12, backgroundColor: 'tomato' }}><Text style={{ color: 'white' }}>Sil</Text></View></TouchableOpacity>. Bileşenin style prop'u da vardır; ancak çocuğa verilen stil daha esnek olduğundan genelde iç View stillendirilir.

Uygulama Özel düğme yaz

Boş bileşeni tamamla. handlePress işlevini tanımla. Dönüşte <TouchableOpacity onPress={handlePress}> içinde <View style={styles.btn}><Text style={styles.label}>Devam</Text></View> bulunsun. btn: padding: 12, backgroundColor: 'tomato'. label: color: 'white'.

Örnek çözümü göster

import React from 'react';
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';

export default function ContinueButton() {
  const handlePress = () => {};
  return (
    <TouchableOpacity onPress={handlePress}>
      <View style={styles.btn}>
        <Text style={styles.label}>Devam</Text>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  btn: { padding: 12, backgroundColor: 'tomato' },
  label: { color: 'white' }
});

Kendini test et

TouchableOpacity bileşenini yaz

<____ onPress={handlePress}>
  <Text>Devam</Text>
</TouchableOpacity>

Cevabı göster

<TouchableOpacity onPress={handlePress}>
  <Text>Devam</Text>
</TouchableOpacity>

TouchableOpacity ne yapar?
```
<TouchableOpacity onPress={press}>
  <Text>Dokun</Text>
</TouchableOpacity>
```
- Yalnızca metin gösterir
- Dokunulduğunda saydamlığı azalır
- Dokunulduğunda rengi değişmez
- İçine bileşen almaz
Cevabı göster

Dokunulduğunda saydamlığı azalır — Dokunulduğunda saydamlığı azalır ve geri bildirim verir.
Bileşeni özelliğine eşle

Button

Yalnızca düz metin etiketi
TouchableOpacity

Saydamlıkla geri bildirim
title

Düğme etiketi
onPress

Dokunma işlevi

Sıradaki ders: Pressable

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler