10-React Native Ana Bileşenleri: Button

Yeni bölümden merhabalar. Geçtiğimiz bölümde temel bir bileşen olan Scroll View’dan bahsetmiştik. Şimdi ise sık kullanılan başka bir bileşen olan Button’dan bahsedeceğiz. Aşamalı bir şekilde ilerlediğimiz tüm React Native derslerine ulaşmak için buraya tıklayabilirsiniz.

Button Bileşeni

Buton bileşeni uygulamamıza fonksiyonel butonlar eklememizi sağlar. Mobil uygulamalarda butonlar olmazsa olmazdır. Şimdi butonları daha iyi anlayabilmek için VS Code’umuzu ve sanal cihazımızı açalım. Ardından geçtiğimiz dersten kalan View’ün içindeki her şeyi silelim. Yalnızca aşağıdaki kodlar kalmış olmalıdır.

import { View, Text, Image, ImageBackground, ScrollView } from "react-native";
const favIcon = require("./assets/favicon.png");

export default function App() {
  return (
    <View style={{ backgroundColor: "beige", flex: 1, marginTop: 25 }}></View>
  );
}

Şimdi View bileşeninin içinde bir buton oluşturacağız. React Native’deki buton etiketi web geliştirmeden biraz farklı. Normalde web geliştirmede kapanış etiketi içeren bir buton etiketi oluşturuyorduk ve metin olarak istediğimizi girebiliyorduk. Ne var ki React Native’de buton etiketi oluştururken kapanış etiketi kullanmıyoruz. Buton etiketini aşağıdaki gibi oluşturuyoruz.

<Button />

Butonun yazısını nasıl ayarlayacağız?

React Native’de butonların yazılarını title prop’u ile ayarlarız. Tek yapmamız gereken title prop’unu eklemek ve ardından tırnak içinde istediğimiz metni girmek.

Şimdi projemize geri dönelim. Önce Button bileşenini import edelim. Süslü parantezler içine Button yazmamız gerekiyor.

import { View, Text, Image, ImageBackground, ScrollView, Button } from "react-native";

Şimdi de butonumuzun yazısını ayarlamak için View’ün içinde title prop’unu oluşturalım ve içine istediğimiz metni yazalım. Ben metni “Başla” olarak ayarladım.

<Button title="Başla" />

Projemizi ön izleyelim

Değişikliklerimizi yapıp kaydettikten sonra Android cihazlar için varsayılan stillerle ekranın üst tarafında oluşturulmuş bir buton göreceksiniz. Bu iPhone’larda biraz daha farklı gözüküyor ancak temel olarak aynı.

Şimdilik butonlara detaylı stil vermeyeceğiz. Sadece aşağıda temel stillendirmeden bahsedeceğiz. İlerleyen derslerde stillendirme konusuna geçiş yapacağız zaten.

Butonlarımıza nasıl fonksiyon ekleriz?

Butonumuzu oluşturduk. Ancak şu anda hiçbir işlevi yok. Butonlarımızı buton yapan şey ne işe yaradıklarıdır. Şimdi butonumuza bir fonksiyon ekleyelim.

React ile geliştirme yaparken hatırlarsanız butonlara onClick prop’u ile fonksiyon atıyorduk. Bu, React Native’de biraz daha değişik. React Native’de butonlara fonksiyon atamak için onPress prop’unu kullanırız. Butonumuzda onPress prop’unu oluşturalım ve bir ok (arrow) fonksiyonu ile ekranda “Butona bastınız” yazdıralım. Aşağıdaki gibi.

 <Button title="Başla" onPress={() => alert("Butona bastınız")} />

Burada ok fonksiyonu butona basıldığında alert fonksiyonunu tetikleyecektir. Bunun sonucunda da ekranda istediğimiz metin çıkacaktır.

Tabi buradaki basit bir örnek. Büyük çaplı uygulamalarda daha kompleks fonksiyonlar görmemiz mümkündür.

Butonlarımızın rengini nasıl değiştiririz?

Butonlarımızı rengini değiştirmek oldukça kolaydır. Yalnızca color prop’unu ekleriz ve istediğimiz rengi tırnak içinde belirtiriz.

  <Button
        title="Başla"
        onPress={() => alert("Butona bastınız")}
        color={"red"}
   />

Butonumuzun rengini burada kırmızı olarak ayarladık. Ön izlemeden de kontrol ederseniz butonun renginin varsayılan mavimsi renkten kırmızıya dönüştüğünü göreceksiniz. Şimdilik yalnızca temel stillendirme olan color prop’unu bilmemiz yeterli olacaktır.

Butonlarımızı nasıl devre dışı bırakırız?

Zaman zaman projelerimizde butonlarımızı devre dışı bırakmak isteyebiliriz. Bunun için buton bileşenimize disabled prop’unu eklememiz yeterli olacaktır.

<Button
        title="Başla"
        onPress={() => alert("Butona bastınız")}
        color={"red"}
        disabled
 />

Butonlarımızı devre dışı bıraktığımızda tıklanamaz olurlar ve renkleri griye döner. Mesela bir e-ticaret uygulaması geliştiriyoruz ve ürünümüz stoklarda yok. İlgili ürünün satın alma butonunu devre dışı bırakarak stoğu gelene kadar bekletebiliriz.

---

Sonuç

Button bileşeni, mobil uygulamalarda gerçekten önemli bir yere sahip. React Native’de buton oluşturmak göründüğü kadar karmaşık değil aslında. Sadece metni belirlemek için title prop’unu kullanıyorsun, sonra tıklama işlevini onPress prop’u ile ekliyorsun. Ayrıca rengini de değiştirmek istersen, color prop’unu kullanabiliyorsun. Eğer bir butonun işlevsiz olmasını istersen de, sadece disabled prop’unu eklemek yeterli oluyor.

Bir sonraki bölümde görüşmek üzere. İyi çalışmalar.