TouchableOpacity
- React Native kursu
- Başlangıç
- Ders 43/116
- 5 dk
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'.
Başlangıç kodu
import React from 'react';
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
export default function ContinueButton() {
// handlePress işlevini ekle ve TouchableOpacity döndür
return null;
}
const styles = StyleSheet.create({
// btn ve label stillerini buraya ekle
});Örnek çözüm
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' }
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 TouchableOpacity bileşenini yaz
<____ onPress={handlePress}>
<Text>Devam</Text>
</TouchableOpacity><TouchableOpacity onPress={handlePress}>
<Text>Devam</Text>
</TouchableOpacity>Açıklama: TouchableOpacity dokunulan kabuğu saydamlıkla geri bildirim verir.
2 TouchableOpacity ne yapar?
<TouchableOpacity onPress={press}>
<Text>Dokun</Text>
</TouchableOpacity>- Yalnızca metin gösterir
- Dokunulduğunda saydamlığı azalır Doğru cevap
- Dokunulduğunda rengi değişmez
- İçine bileşen almaz
Açıklama: Dokunulduğunda saydamlığı azalır ve geri bildirim verir.
3 Bileşeni özelliğine eşle
| Kavram | Anlamı |
|---|---|
Button |
Yalnızca düz metin etiketi |
TouchableOpacity |
Saydamlıkla geri bildirim |
title |
Düğme etiketi |
onPress |
Dokunma işlevi |