React Native kullanarak iOS ve Android arasında bir denge kurduk.

En sevdiğiniz uygulamayı iPhone'unuzda kullanıp ardından uygulamanızın görünümünden hayal kırıklığına uğramak için Android'e geçtiniz mi? Eh, bu tam olarak UI bileşenleri işletim sistemleri arasında aynı olmadığında olur. İlerleme sürecini analiz eden ve bu konuyu React Native ile çözmek için daha konforlu bir kullanıcı deneyimi sunan bir Facebook yazılım mühendisi Jordan Walke sayesinde.

Mobil uygulamalar için React Native'ı kullanmanın en iyi yolu, kod tabanınızın neredeyse% 95'ini hem Android hem de iOS platformlarında paylaşabilmenizdir. Biz Pickyourtrail'de bu özelliği seviyoruz, bu yüzden React Native mobil uygulamamızı oluşturmak için bizim seçimimiz.

Native React ile ilgili daha derin görüşler

Platformlar arası bir uygulama geliştirme çerçevesi olmasına rağmen, React Native, uygulama UI'sini oluşturmak için hem iOS hem de Android'in “yerel” bileşenlerini kullanır. Bu, aynı bileşenin her platformda farklı görünebileceği anlamına gelir.

Size daha fazla netlik sağlamak için, Button bileşenini örnek olarak ele alalım.

Bir düğme hem iOS hem de Android'de şöyle görünür:

React Native dokümantasyonundan Düğme Örneği

Oldukça farklı değil mi?

Bazı bileşenler o kadar benzersizdir ki React Native, farklı bileşen adları kullanarak bunları net bir şekilde ayırmak zorunda kalır.

Diyelim ki, bir tarih seçici oluşturmak istiyorsunuz, iOS için, tarih seçebileceğiniz bir görünüm sağlayan DatePickerIOS bileşenini kullanacaksınız. Bu UI, iOS cihazlarında oldukça standarttır ve çoğu kişi bu şekilde seçenekleri seçmek için kullanılır.

Yerel Belgelere Tepki Veren DatePickerIOS

Bununla birlikte, Android'de Tarih seçici yalnızca hem işlevsellik hem de kullanıcı deneyiminde farklılık gösteren bir açılır pencere açan, asenkronize bir işlev DatePickerAndroid olarak kullanılabilir.

DatePickerAndroid Malzeme Tarih Seçici. Vuescript'ten görüntü

Neden bu kadar farklılar?

Peki, hem Android hem de iOS platformları farklı tasarım ilkelerine dayanır ve kullanıcılar için farklı deneyimler sunar. React Native, temelde bu tasarım ilkeleri üzerine inşa edilmiş bileşenleri kontrol etmenizi sağlayan bir arayüzdür.

Ancak, Pickyourtrail'de hem Android hem de iOS uygulamalarımızın kullanıcılarına her iki platformda da aynı deneyime sahip olmak için ihtiyacımız vardı. Dolayısıyla hem platformları birleştiren hem de kullanıcılarımız için benzersiz bir deneyim yaratan ortak bileşenler oluşturmak artık bizde!

Button bileşeniyle başlayalım.

Native’ın yerleşik düğme bileşenini React yerel stil düğmesini oluşturur. Ancak, TouchableHighlight'ı kullanarak ortak düğmemizi her iki platformda da göstermeyi önemseyen özel bir tıklanabilir bileşen oluşturabiliriz.

Artık, uygulamamızdaki platform bağımsız düğmesini oluşturacak bir CustomButton bileşenimiz var. Tek yapmamız gereken kullanmak

Android ve iOS için benzer düğme görünümü sunan CustomButton bileşeni

Daha fazlasına ihtiyaç var?

Uygulamalarımıza uygun daha fazla temalı bileşen oluşturmamızı sağlayacak CustomButton bileşeni için özel stilimizi aktarmak için React Props'i kullanabiliriz. CSS'yi React Native'da kullanmadığımız ve tüm stillerin doğrudan Javascript'te yazıldığı için, stil bileşenlerine benzer bir işlevsellik için ayrı bir kitaplık kullanmanıza gerek kalmadan ulaşabiliriz.

İlginç Okuma: LocalStorage dünyasına bir bakış!

DatePicker gibi bileşenlerden ne haber?

Ancak, DatePickerIOS bir UI bileşenidir ve DatePickerAndroid bir pop-up olarak uygulanır, buradaki ideal yaklaşım iOS Tarih Seçici için Modal kullanmaktır. Bu, kullanıcıların her iki platformda da benzer deneyime sahip olmasını sağlayacaktır. Bunun iyi bir uygulaması reaksiyon-yerel veri toplama bileşeninde mevcuttur.

Pickyourtrail için nasıl geçti?

Artık mobil uygulamamızın gereksinimlerini karşılamak için temalı farklı bileşenlere sahip devasa bir bileşen kütüphanesine sahibiz ve ihtiyaç duydukları yerde kolayca yeniden kullanılabilirler. Bileşen kütüphanesi, hemen hemen her gün eklenen heyecan verici yeni bileşenlerle hızla büyüyor!

Projeniz için her bir bileşeni yeniden oluşturarak zaman kazanmayı planlıyorsanız, NativeBase veya React Native Elements gibi React Native için kullanılabilen çok çeşitli bileşen kitaplıklarından birini seçebilirsiniz. İşe yaramadıysa aşağıdaki yorumlar bölümünde bize bilgi verin!

Hızlı Okuma: Yavaş sayfa yüklerini bu şekilde çözdük!

İyi bir teknik okuduktan sonra bir mola mı arıyorsunuz? Git ve Pickyourtrail ürünümüzle oynayın ve tatilinizi planlamaya başlayın!

Yazar hakkında: Pickyourtrail'den teknisyenimiz olan Dani Akash, cep telefonları ve sunucular için kodlamayı çok ciddiye alıyor. Ayrıca, 10 saatlik Manga okumasıyla uyku ile savaşır. Ha! Uzman oldukça değil mi?