React Native
Özet - Butonlar
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.
Örnek çözümü göster
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ı.
Örnek çözümü göster
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' }
});
Kendini test et
-
Hangi bileşen özel görünümlü geri bildirim verir?
/* özel stilli dokunma düğmesi */
- Button
- TouchableOpacity
- Text
- View
Cevabı göster
TouchableOpacity — TouchableOpacity içerisine her bileşeni alır ve saydamlıkla geri bildirim verir.
-
Bileşeni gücüne eşle
- Button
- Sistem varsayılanı
- TouchableOpacity
- Saydamlık geri bildirimi
- Pressable
- Dinamik style işlevi
- disabled
- Devre dışı bırakma
Sıradaki ders: Uygulama tasarımı
