Button

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.

Örnek çözümü göster

import React from 'react';
import { Button } from 'react-native';

export default function App() {
  const handleSave = () => {};
  return <Button title="Kaydet" onPress={handleSave} />;
}

Kendini test et

Button'da hangi prop etiketi belirler?
```
<Button ???="Kaydet" onPress={save} />
```
- title
- label
- text
- name
Cevabı göster

title — title prop'u düğme etiketini belirler.

onPress referansını yaz

<Button title="Kaydet" ____={handleSave} />

Cevabı göster

<Button title="Kaydet" onPress={handleSave} />

Prop'u işlevine eşle

title

Düğme etiketi
onPress

Dokunma işlevi
color

Düğme rengi
disabled

Devre dışı bırakma

Sıradaki ders: TouchableOpacity

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler