05.02. Temel Bileşenler

Bir React Native uygulaması geliştirirken View, Text, Image, TextInput, ScrollView ve StyleSheet olmak üzere 6 bileşen ön plana çıkar. Bunların bazıları önceki örneklerde görmüştük, bu bölümün kodlarını bir önceki bölümde hazırladığımız yapı üzerine inşa edeceğim. 

Temel bileşenler:

  • View: Bir UI (Kullanıcı Arayüzü) oluşturmak için en temel bileşendir.
  • Text: Metin görüntülemek için bir bileşendir.
  • Image: Görüntüleri göstermek için bir bileşendir.
  • TextInput: Klavye ile uygulamaya metin girmek için bir bileşendir.
  • ScrollView: Birden fazla bileşen ve görünüm barındırabilen bir kaydırma bölümü sağlar. Özellikle verilerimizin taşma olması durumunda düşünülebilecek bir bileşendir.
  • StyleSheet: CSS stil sayfalarına benzer bir soyutlama katmanı sağlar.

“components” klasörüne Title.js dosyasını oluşturalım.

Burada kullanıcı tanımlı bir Title bileşeni oluşturuyoruz. Text özelliğini kullanacağız. children metin, style görsellik, rest ise kalan diğer durumlar için ayrılmıştır. propTypes özellik türleri atanıyor. Bu bölümde bu bileşene özel style tanımlanabilir. Şimdi rn02.js dosyasını aynı klasöre oluşturup bu bileşeni kullanalım. Kullanmak istediğiniz sınıfı export etmeyi unutmayın. (Birden fazla export yazabileceğinizi unutmayın.)

Title dosyasını import ediyoruz ve Title bileşeninin sadece children özelliğine veri gönderiyoruz. Özellikle tüm js dosyalarınızda yapacağınız tanımlamalar için bu tür hazırlıklar yapmanızı öneririm. Title.js dosyasında …rest bölümü sayesinde örneğin “onPress={navigateToSettings}” gibi bir tıklama işlemi tanımlanabilir. Eğer, …rest kullanılmaz ise bu tür üçüncü özellikler kullanılamaz.

İki ayrı dosyada çalışmak zor bir süreç olabilir. Bu durumda ilk olarak aynı dosyada bileşeninizi oluşturun ve daha sonra farklı bir .js dosyasına aktarıp yukarıdakine benzer şekilde kullanabilirsiniz. Bu sefer TextInput özelliğini kullanalım.

UselessTextInput adında editable ve max. 40 karakter uzunluğunda (maxLegth) bir birleşen oluşturduk. Bu iki özellik direkt bileşenin özellikleridir. Diğer özellikleri React Native web sitesinden bulabilirsiniz. Örneğin aklımıza tüm karakterleri büyük harfe çevirme problemi geldi. İlk bakmamız gereken yer TextInput tanıtımının yapıldığı web sayfasıdır. Tıklayın, bakalım. autoCapitalize özelliğini gördük, bunu kodumuza eklediğimizde bu TextInput yeni bir özellik kazanır.

constructor sayesinde this.state.text özelliği set edilir. Burada UselessTextInput özelliğine multiline ve numberOfLines özellikleri eklenmiştir. Aslında bu özellikler kalıtım yoluyla TextInput üzerinden gelmiştir. Value özelliği this.state.text bağlanmıştır. OnChangeText, metin değiştiğinde gerçekleşecek fonksiyonu işaret eder. Buradaki arrow fonksiyonuna metinde her değişiklik text üzerinden aktarılır. this.setState text’e güncelleme işlemi yapar. Bu sayede this.state.text her güncellediğinde Text bileşenleri içine yazılmış kodlarda güncellenir. Diğer özellikleri direkt web adresi üzerinden de test edebilir ve bu bölüme kodlar yazıp kod çıktılarınız direkt görebilirsiniz. Hatta kod yazarken ilk testleri burada yapıp daha sonra aktarmanızı öneririm.

ScrollView, tüm alt bileşenlerini bir kerede oluşturur. Bu, anlaşılmasını ve kullanılmasını çok kolaylaştırır. Ancak, bunun bir dezavantajı vardır. Görüntülemek istediğiniz çok uzun bir listeye, belki de içeriğe değer birkaç ekrana sahip olduğunuzu hayal edin. Aynı anda her şey için JS bileşenleri ve yerel görünümler oluşturmak, yavaş görüntülemeye ve artan bellek kullanımına katkıda bulunacaktır. Burada, FlatList devreye giriyor. FlatList öğeleri görünmek üzere oldukları sırada istenildiği zaman (lazily)  işler. Hafızada ve işlem süresinde tasarruf sağlamak için ekranın dışına kaydırılan öğeleri hemen yüklemez, gerektiğinde yükler. (Örnek için tıklayın.)