TouchableOpacity
- React Native kursu
- Başlangıç
- Ders 22/116
- 6 dk
TouchableOpacity ile dokunma öğrenirsin.
TouchableOpacity nedir?
TouchableOpacity, içine aldığı içeriği tıklanabilir yapan bir sarmalayıcı bileşendir. Tıklandığında hafifçe saydamlaşır; bu, görsel geri bildirim sağlar.
En sık kullanılan özelliği onPress'tir. Bir fonksiyon alır; tıklama olduğunda çağrılır. Örnek: <TouchableOpacity onPress={increment}><Text>Artır</Text></TouchableOpacity>.
TouchableOpacity'i react-native'den içe aktarman gerekir.
Butonları bağlama
Tanımladığımız increment ve decrement fonksiyonlarını TouchableOpacity butonlarına bağlayacağız. Böylece kullanıcı butona tıkladığında ilgili fonksiyon çalışır ve sayaç değeri değişir.
İki buton ekleyeceğiz: <TouchableOpacity onPress={increment}><Text>Artır</Text></TouchableOpacity> ve <TouchableOpacity onPress={decrement}><Text>Azalt</Text></TouchableOpacity>.
Bunları <View> içinde, sayaç metninin hemen altına yerleştireceğiz. Butonlar sıralı dizildiğinde uygulama doğal görünür.
Uygulama Butonları ekle
Mevcut App'e iki <TouchableOpacity> butonu ekle. Birinci onPress={increment} ile <Text>Artır</Text>, ikinci onPress={decrement} ile <Text>Azalt</Text> içersin. TouchableOpacity'i içe aktarmayı unutma.
Başlangıç kodu
import { View, Text } from 'react-native';
import { useState } from 'react';
export default function App() {
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
function decrement() {
setCount(count - 1);
}
return (
<View>
<Text>Sayaç: {count}</Text>
</View>
);
}Örnek çözüm
import { View, Text, TouchableOpacity } from 'react-native';
import { useState } from 'react';
export default function App() {
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
function decrement() {
setCount(count - 1);
}
return (
<View>
<Text>Sayaç: {count}</Text>
<TouchableOpacity onPress={increment}>
<Text>Artır</Text>
</TouchableOpacity>
<TouchableOpacity onPress={decrement}>
<Text>Azalt</Text>
</TouchableOpacity>
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 TouchableOpacity hangi prop ile tıklamayı yakalar?
- onPress Doğru cevap
- press
- onTouch
- onClick
Açıklama: onPress tıklama olayını yakalar.
2 TouchableOpacity açılışı
<____ onPress={increment}><Text>Artır</Text></TouchableOpacity><TouchableOpacity onPress={increment}><Text>Artır</Text></TouchableOpacity>Açıklama: TouchableOpacity tıklanabilir sarmalayıcıdır.
3 Buton parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
TouchableOpacity |
Tıklanabilir sarmalayıcı |
onPress |
Tıklama olayı |
increment |
Artırma fonksiyonu |
<Text> |
Buton etiketi |