Özet - Butonlar
- React Native kursu
- Başlangıç
- Ders 47/116
- 5 dk
Button, TouchableOpacity ve disabled'ı birleştirerek bir eylem paneli yazarsın.
Özet - Butonlar
Bu grupta beş şey öğrendin. Button sistem varsayılanı, yalnızca düz metin etiketli düğmedir. TouchableOpacity saydamlıkla geri bildirim verir ve içerisine her bileşeni alır. Pressable yeni nesil dokunma bileşenidir; style'a işlev verir. onPress, onPressIn, onPressOut, onLongPress dokunma olaylarıdır. disabled düğmeyi devre dışı bırakır.
Şimdi bunları birleştirip bir eylem paneli yazacaksın: iki düğme yan yana, solda Button ile 'Kaydet', sağda TouchableOpacity ile özel görünümlü 'Sil'. İki küçük görev seni sonuca götürecek.
Uygulama Eylem paneli iskeleti
Boş bileşeni tamamla. handleSave ve handleDelete işlevlerini tanımla. panel stilini ekle: flexDirection: 'row', gap: 12. Dönüşte <View style={styles.panel}> içinde <Button title="Kaydet" onPress={handleSave} /> bulunsun.
Başlangıç kodu
import React from 'react';
import { View, Button, StyleSheet } from 'react-native';
export default function ActionPanel() {
// handleSave ve handleDelete işlevlerini ekle; View içinde Button döndür
return null;
}
const styles = StyleSheet.create({
// panel stilini buraya ekle
});Örnek çözüm
import React from 'react';
import { View, Button, StyleSheet } from 'react-native';
export default function ActionPanel() {
const handleSave = () => {};
const handleDelete = () => {};
return (
<View style={styles.panel}>
<Button title="Kaydet" onPress={handleSave} />
</View>
);
}
const styles = StyleSheet.create({
panel: { flexDirection: 'row', gap: 12 }
});Uygulama Sil düğmesini ekle
Önceki iskelete sağ tarafa bir TouchableOpacity ekle. del stilini tanımla: padding: 12, backgroundColor: 'tomato'. label stilini tanımla: color: 'white'. <TouchableOpacity onPress={handleDelete}> içinde <View style={styles.del}><Text style={styles.label}>Sil</Text></View> bulunsun. Düğmeler styles.panel içinde yan yana durmalı.
Başlangıç kodu
import React from 'react';
import { View, Button, TouchableOpacity, Text, StyleSheet } from 'react-native';
export default function ActionPanel() {
const handleSave = () => {};
const handleDelete = () => {};
return (
<View style={styles.panel}>
<Button title="Kaydet" onPress={handleSave} />
{/* Sil düğmesini buraya ekle */}
</View>
);
}
const styles = StyleSheet.create({
panel: { flexDirection: 'row', gap: 12 }
// del ve label stillerini buraya ekle
});Örnek çözüm
import React from 'react';
import { View, Button, TouchableOpacity, Text, StyleSheet } from 'react-native';
export default function ActionPanel() {
const handleSave = () => {};
const handleDelete = () => {};
return (
<View style={styles.panel}>
<Button title="Kaydet" onPress={handleSave} />
<TouchableOpacity onPress={handleDelete}>
<View style={styles.del}>
<Text style={styles.label}>Sil</Text>
</View>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
panel: { flexDirection: 'row', gap: 12 },
del: { 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 Hangi bileşen özel görünümlü geri bildirim verir?
/* özel stilli dokunma düğmesi */- Button
- TouchableOpacity Doğru cevap
- Text
- View
Açıklama: TouchableOpacity içerisine her bileşeni alır ve saydamlıkla geri bildirim verir.
2 Bileşeni gücüne eşle
| Kavram | Anlamı |
|---|---|
Button |
Sistem varsayılanı |
TouchableOpacity |
Saydamlık geri bildirimi |
Pressable |
Dinamik style işlevi |
disabled |
Devre dışı bırakma |