Uygulamamızın ana sayfasında kullanıcıdan bizi değerlendirmesini istiyorsak React Native Elements bileşenlerinden Rating kullanılabilir. Aşağıdaki şekilde bileşeni tasarlayıp return içerisinde uygun bir yere yerleştiriyoruz. Burada readonly özelliğine this.state.oyverildi değerini atadım. Başlangıçta false olan bu değer sayesinde oy verme işlemi gerçekleştirilir daha sonra oy verme işlemi onFinishRating ile yakalanıp this.OylamaTamam fonksiyonu tetiklenince this.state.oyverildi değeri true yapılarak aynı kullanıcının yeniden oy vermesi engellenmiş olur.

<Rating
            type="heart"
            readonly={this.state.oyverildi}
            ratingCount={5}
            fractions={1}
            startingValue={3}
            imageSize={40}
            onFinishRating={this.OylamaTamam}
            showRating
            style={{
              paddingVertical: 2,
              alignItems: "center",
              justifyContent: "center"
            }}
          />
OylamaTamam(rating) {
    alert("Teşekkürler, Puanınız: ", rating)
    this.setState({oyverildi:true})
  }

Bu şekilde yapıldığı zaman aşağıdaki şekilde hata veriyor:

Burada fonksiyonun tanınmadığından bahsediliyor bunun sebebi güncelleme işleminin bind edilmemiş olması. Bind işlemini yapmak için aşağıdaki kodu constructur() yani kurucu metod içerisine ekleyerek bileşenin ilgili fonksiyondaki değişimi takip etmesini sağlıyoruz.

    this.OylamaTamam=this.OylamaTamam.bind(this);

Böylece ilgili değişimi yakalamış olduk ve kodumuz artık çalışıyor 🙂

Çalıştığı zaman (readonly) şeklinde bir metnin çıktığını gördüm.

Bu metin herhangi bir özellik ile düzenlenemediğinden kaynak dosyayı bulup içini inceledim. Orada aşağıdaki şekilde istediğimiz metni yazabiliriz:

İlgili dosya : …\node_modules\react-native-elements\src\rating adresinde.

Sonuç:

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir