Button
- React Native kursu
- Başlangıç
- Ders 42/116
- 4 dk
Button bileşeni ve onPress'ini öğrenirsin.
Button
React Native'in Button bileşeni en temel dokunma ögesidir. İki zorunlu prop'u vardır: title düğme üstündeki metni, onPress dokunma olayını işleyen işlevi alır. Örnek: <Button title="Kaydet" onPress={handleSave} />.
Button işletim sistemine göre varsayılan görünümle gelir; renk özelleştirmesi color prop'undan ibarettir. Daha özelleştirilmiş görünüm istediğinde TouchableOpacity veya Pressable kullanırsın. Button yalnızca düz metin etiketi kabul eder; içinde başka bileşenler barındıramaz.
onPress işleyici
onPress bir işlev alır ve kullanıcı düğmeyi dokunup bıraktığında çağrılır. İşlev genellikle handleSave, onSubmit gibi bir isimle bileşen içinde tanımlanır. Önemli: işlevi çağırmak için onPress={handleSave} yazılır; parantez açılmaz çünkü bu bir referanstır.
Yanlış yazım: onPress={handleSave()}. Bu, render sırasında işlevi bir kez çağırır ve sonucunu onPress'e verir; istenmeyen bir davranıştır. Doğru: onPress={handleSave} ya da ok fonksiyonuyla onPress={() => handleSave(id)}.
Uygulama Kaydet düğmesi yaz
Boş App bileşenini tamamla. Bir handleSave işlevi tanımla (içeriği boş bir gövde olabilir). Dönüşte <Button title="Kaydet" onPress={handleSave} /> kullan.
Başlangıç kodu
import React from 'react';
import { Button } from 'react-native';
export default function App() {
// handleSave işlevini ekle ve Button döndür
return null;
}Örnek çözüm
import React from 'react';
import { Button } from 'react-native';
export default function App() {
const handleSave = () => {};
return <Button title="Kaydet" onPress={handleSave} />;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Button'da hangi prop etiketi belirler?
<Button ???="Kaydet" onPress={save} />- title Doğru cevap
- label
- text
- name
Açıklama: title prop'u düğme etiketini belirler.
2 onPress referansını yaz
<Button title="Kaydet" ____={handleSave} /><Button title="Kaydet" onPress={handleSave} />Açıklama: onPress dokunma işlevini alır.
3 Prop'u işlevine eşle
| Kavram | Anlamı |
|---|---|
title |
Düğme etiketi |
onPress |
Dokunma işlevi |
color |
Düğme rengi |
disabled |
Devre dışı bırakma |