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

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

React Native'ı mobil uygulamalar için kullanmanın en iyi yanı, kod tabanınızın neredeyse% 95'ini hem Android hem de iOS platformlarında paylaşabilmenizdir. Biz Pickyourtrail olarak, React Native bizim mobil uygulaması oluşturmak için bizim seçim bu yüzden seviyorum.

React Native hakkında daha derin bilgiler

Bir platformlar arası uygulama geliştirme çerçevesi olmasına rağmen, React Native, uygulama kullanıcı arayüzünü 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 açıklık 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 belgelerinden Düğme Örneği

Oldukça farklı değil mi?

Bazı bileşenler o kadar benzersizdir ki React Native, bunları farklı bileşen adları kullanarak açıkça ayırmalıdır.

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

React Yerel Belgelerinden DatePickerIOS

Bununla birlikte, Android'de Tarih seçici, yalnızca işlevsellik ve kullanıcı deneyiminden farklı olan bir açılır pencere açan eşzamansız DatePickerAndroid işlevi olarak kullanılabilir.

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

Neden bu kadar farklılar?

Hem Android hem de iOS platformları farklı tasarım prensipleri üzerine inşa edilmiştir ve kullanıcılar için farklı deneyimler sunar. React Native temelde bu tasarım ilkeleri üzerine kurulu bileşenleri kontrol etmenizi sağlayan bir arabirimdir.

Bununla birlikte, Pickyourtrail'de, hem Android hem de iOS uygulamalarımızın kullanıcılarının her iki platformda da aynı deneyime sahip olmaları gerekiyordu. Dolayısıyla, her iki platformu birleştiren ve kullanıcılarımız için benzersiz bir deneyim yaratan ortak bileşenler yaratmak artık bizim üzerimizde!

Button bileşeniyle başlayalım.

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

Artık uygulamamızda platformdan bağımsız düğmeyi oluşturacak bir CustomButton bileşenimiz var. Tek yapmamız gereken kullanmak

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

Daha fazlasına ihtiyaç var?

ReaB Props'u, uygulamalarımıza uygun daha temalı bileşenler oluşturmamıza izin veren CustomButton bileşeni için özel stilimizi iletmek için kullanabiliriz. React Native'de CSS kullanmadığımız ve tüm stiller doğrudan Javascript'te yazıldığından, bunun için ayrı bir kütüphane kullanmak zorunda kalmadan stil bileşenlerine benzer işlevsellik elde edebiliriz.

İlginç Okuma: LocalStorage dünyasına bir göz atın!

DatePicker gibi bileşenler ne olacak?

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

Pickyourtrail için nasıl geçti?

Artık mobil uygulamamızın ihtiyaçlarını karşılamak üzere temalı farklı bileşenlere sahip devasa bir bileşen kütüphanemiz var ve ihtiyaç duydukları her yerde kolayca tekrar kullanılabiliyor. Neredeyse her gün eklenen heyecan verici yeni bileşenlerle bileşen kütüphanesi hızla büyüyor!

Projeniz için her bir bileşeni yeniden oluşturmayarak 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. Sizin için işe yaradıysa, aşağıdaki yorumlar bölümünde bize bildirin!

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

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

Yazar hakkında: Pickyourtrail'deki teknisyenimiz 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! Oldukça uzman, değil mi?