React Native ile Mobil Uygulama Geliştirme – 11 – Hooks ve FlatList ile Search Bar Ekleme

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 11. kısmıdır. Bir önceki makalede (Part 10), React Native’de Drag & Drop bileşenini oluşturmayı ve mobil projelerimizde nasıl kullanacağımızı anlattım.

React Native’de Hooks ve FlatList Kullanarak Search Bar bileşenini eklemeyi ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

React Native ile mobil uygulamalar geliştirirken verileri görüntülemek için yaygın bir kullanım durumu, bir liste biçimindedir.

React Native’de liste oluşturmanın iki yaygın yolu vardır: ScrollView ve FlatList. Framework’ün API’sindeki bu bileşenlerin her birinin kendi gücü vardır.

Bu makalede, verileri almak, verileri görüntülemek ve bir arama çubuğu eklemek için FlatList tarafından sağlanan farklı unsurları inceleyelim.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Expo tabanlı yeni bir proje oluşturmak için, bir terminal penceresi açın ve aşağıdaki komutları açıklanan sırayla çalıştırın.

Proje dizini oluşturulduktan sonra lodash.filter’ı kurduğunuzdan emin olun. Paketi, daha sonra liste işlevinden bir arama eklerken verileri filtrelemek için kullanacağız.

FlatList Bileşenini Kullanma

React Native FlatList, genel performansı düşürmeden büyük miktarda veriden oluşan kaydırma listeleri oluşturmanın etkili bir yoludur. Büyük veri dizileri için optimize edilmiştir çünkü yalnızca ekranda görüntülenen bir dizi öğeyi oluşturur. Bir veri listesinde gezinirken, bileşen monte edildikten hemen sonra tüm verileri oluşturan ScrollView ile karşılaştırıldığında dahili durum korunmaz. Bu, ScrollView’daki tüm verilerin aygıtın belleğine eklendiği ve büyük miktarda veri işlenirken performansın düşmesine neden olabileceği anlamına gelir.

FlatList’e bir dizi veri iletmek, veri listesini nasıl görüntüleyebileceğinizdir. Bunun nasıl çalıştığını görelim. Örneğin, App.js’yi açın ve işlev bileşeninden önce aşağıdaki veri dizisini ekleyin.

Ardından, FlatList’i App.js dosyasında içe aktarın.

FlatList, bir veri listesini görüntülemek için gerekli olan üç birincil props kullanacak:

data: bir liste oluşturmak için kullanılan bir veri dizisi. Dizi, eleman olarak birden çok nesneden oluşur.
keyExtractor: FlatList’e, dizinin tek tek öğeleri için benzersiz bir tanımlayıcı veya kimlik kullanmasını söyler.
renderItem: veri dizisinden tek bir öğeyi alan ve onu kullanıcı arayüzünde işleyen bir işlev.

Ardından, bu veri listesini döndürmek için Uygulama bileşenini değiştirin.

Aşağıdaki styles nesnesini ekleyin.

Şimdi emülatöre geri dönün ve veri dizisindeki tüm nesnelerin artık bir liste şeklinde görüntülendiğini göreceksiniz. FlatList’i kullanmak, organize verileri görüntülemek için minimum çaba gerektirir.

FlatList’te bir API’den veri alma

FlatList, mobil uygulamanın verileri nasıl getirdiğini umursamıyor. Önceki bölümde, bir dizi veriyle nasıl alay edileceğini ve bir liste olarak nasıl kullanılacağını öğrendik. Bu bölümde, verileri bir uzak API kaynağından alalım ve verileri görüntülemek için aynı kalıbı (önceki bölümde olduğu gibi) takip edelim.

Yan Not: Uzak bir API kaynağı için, Random User Placeholder API‘yi kullanacağım.

Bu bölümde kullanacağımız tüm gerekli bileşenleri içe aktararak başlayın. Aşağıdaki içe aktarma ifadelerini aşağıda gösterildiği gibi güncelleyin:

Ardından, verileri sabit olarak almak için API endpoint URL’sini tanımlayın.

API endpoint HTTP isteği şimdilik ilk 20 sonucu getirecek.

React Hook useState’i kullanarak App bileşeninin içinde üç durum değişkeni tanımlayın. isLoading durum değişkeninin boolean değeri varsayılan olarak false olacaktır. Amacı, veriler API endpoint’den getirilirken bir yükleme göstergesi görüntülemektir.

Veri değişkeni varsayılan olarak boş bir diziye sahip olacaktır. Bu durum değişkenini kullanarak, FlatList bir veri listesi görüntülemek için doldurulur.

Son durum değişkeni olan error, varsayılan bir null değerine sahip olacak. Yalnızca verileri alırken bir hata olduğunda güncellenecektir.

Sonra, React Hook useEffect’i ve JavaScript’ten alma API’sini kullanarak, verileri API_ENDPOINT’ten alalım. App bileşeninin içindeki durum değişkenlerini tanımladıktan sonra aşağıdakileri ekleyin.

UseEffect başlatıldığında yükleme değişkeni true olarak ayarlanır. Bu değişkenin boolean değeri, yalnızca verilerin getirilmesi tamamlandığında veya bir hata olduğunda false olarak ayarlanır. Aşağıdaki setData, veri değişkenini bir veri dizisi ile güncelliyor.

Ardından, her biri iki farklı senaryo için bir JSX döndüren iki if koşulu ekleyin. İlk olarak, veriler getirilirken bir yükleme göstergesi gösterilir. İkinci olarak, bir hata olduğunda bir hata mesajı görüntülenir.

Ardından, kullanıcı avatarını ve API endpoint’den getirilen kullanıcının adını görüntülemek için FlatList’i güncelleyin.

Styles nesnesini de güncellemeyi unutmayın.

Bu adımdan sonra alacağımız bir FlatList kullanılarak görüntülenen kişilerin listesi aşağıdadır.

Veriler getirilirken yüklenme göstergesi burada.

Ve aşağıda, uygulamanın verileri getiremediği senaryo verilmiştir.

Search Bar Ekleme

Bu bölümde, mevcut FlatList’in en üstünde bir arama çubuğu oluşturalım. Bir arama çubuğunu görüntülemek için ListHeaderComponent adlı bir destek sağlar.

Uygulama bileşenini düzenlemeye başlamadan önce, bu adımda gerekli olan gerekli içe aktarma ifadelerini ekleyelim. React-native’den TextInput için içe aktarmayı ekleyin. Ayrıca lodash.filter dosyasını içe aktarın.

Aşağıda gösterildiği gibi FlatList için prop ekleyin

Ardından, aşağıdaki JSX’i döndürecek renderHeader işlevini tanımlayın:

İşte bu adımdan sonra emülatördeki çıktı.

Ardından, iki durum değişkeni daha ekleyin. İlk olarak, sorgu, veri listesinde arama yapmak için kullanıcı tarafından sağlanan herhangi bir girdiyi takip edecektir. Varsayılan bir boş dizge değerine sahiptir. İkinci olarak, verileri filtrelemek için kullanılacak olan API’den verileri tutmak için başka bir değişken ekleyin.

Tüm Data dizisini doldurmak için side-effect olarak useEffect’i güncelleyin.

Ardından, search bar’ı işleyecek olan handleSearch adında bir işleyici yöntemi ekleyin. Varsayılan olarak, sorgu olarak sağlanan arama terimini küçük harfe biçimlendirecektir. Kullanıcının adı, durum değişkeni fullData’dan filtrelenirken durum değişkeni verileri, doğru kullanıcıyı oluşturmak için aramadan sonra nihai sonuçları saklar.

İçerme işleyicisi yöntemi sorguyu arayacaktır. Kullanıcının adı ve soyadı ve handleSearch() ‘den küçük harfe biçimlendirilmiş sorgu olmak üzere iki parametre kabul eder.

Emülatörde, bu sorguya dayalı sonuçları almak için bir arama sorgusu.

Bu makalenin odak noktası, FlatList bileşeninin sağladığı farklı donanımlara aşina olmanızı sağlamaktı.

Daha iyi sonuçlar için bir API endpoint’den veri alırken Algolia gibi güçlü bir arama sağlayıcısının kullanılması önerildiğini unutmayın.

Son olarak, hassas mantık içeren ticari React Native uygulamaları geliştiriyorsanız özel dikkat göstermeyi unutmayın. Kılavuzumuzu izleyerek onları kod hırsızlığına, kurcalanmaya ve ters mühendisliğe karşı koruyabilirsiniz.

Lütfen bize görüşlerinizi bildirmekten çekinmeyin.

Kaynak

1-https://blog.jscrambler.com/add-a-search-bar-using-hooks-and-flatlist-in-react-native/

React Native ile Mobil Uygulama Geliştirme – 10 – Drag & Drop Bileşenini Oluşturma

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 10. kısmıdır. Bir önceki makalede (Part 9), React Native’de Redux Kullanımı ve mobil projelerimizde nasıl kullanacağımızı anlattım.

React Native’de Drag & Drop bileşenini oluşturmayı ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

Bir sonraki React Native uygulamam için beyin fırtınası yaparken, işte ilk adım, bir Drag & Drop bileşenini oluşturabilmek için hareketi izleyen bir API olup olmadığını görmek istedim.
Neyse ki bulması çok zor olmadı: PanResponder’a sahibiz! Bununla hareketi soyut bir durum olarak izleyebilir ve kullanıcı arayüzümüzü buna göre güncelleyebiliriz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Nasıl bir uygulama yapmak istediğimizin kafamızda netleşmesi için aşağıdaki görsele bakabilirsiniz.

Drag Bileşen Oluşturma

PanResponder API belgelerini takip etmenin biraz zor olduğunu buldum, ancak bu örnek ve animasyon kılavuzu gitmeme yardımcı oldu. PanResponder sınıfını içe aktardıktan sonra, componentWillMount() yaşam döngüsü yönteminde .create yöntemiyle başlatırsınız. Bunu constructor() da yazabilirsiniz.

this.panResponder = PanResponder.create(), panResponder’ı başlatır ve bir referans oluşturur. Bunu <Animate.View> bileşenimizde, bir sahne grubundan geçiyormuş gibi {… this.panResponder.panHandlers} ‘ı geçirerek kullanırız.
PanResponder.create() içinde onStartShouldSetPanResponder’ı true olarak ayarladık, böylece panResponder dokunma geri bildirimlerine yanıt verecek. Sonra onPanResponderMove’a bir Animated.event iletiriz: kullanıcının hareket ettiği Animated.View circle bileşenimizin konumunu güncellemek için.
Çevremizin konumunu elde etmek için hesaplanan animasyon değerini this.state.pan.getTranslateTransform() ‘dan alıp Animated.View’a aktardığımız bir dönüştürme stili oluşturmak için kullanırız.
Son olarak, öğenin ikinci dokunuşta atlamaması için delta değerini ayarlıyoruz.
Bu noktada, kullanıcının etkileşime girebileceği sürüklenebilir bir dairemiz var:

Çemberi İlk Konumuna Geri Döndürmek

Bileşeni bıraktıklarında dairenin orijinal konumuna geri dönmesini istiyoruz. Bunu yapmak için onPanResponderRelease’i kullanarak kullanıcı arayüzüne kullanıcı bıraktığında nasıl yanıt vereceğini bildiririz.

Dairemiz şimdi ilk konumuna geri dönüyor:

Bırakma Alanının Oluşturulması

Artık sürüklemeye sahibiz, bırakmaya ihtiyacımız var. Bırakma alanımızla başka bir bileşen oluşturuyoruz ve içinde Sürüklenebilir bileşenimizi kullanıyoruz:

Ardından Draggable, onPanResponderRelease işleyicisine biraz mantık ekliyoruz ve bırakma alanında olup olmadığımızı belirlemek için bir işlev ekliyoruz. Not: Burada ekrandaki bırakma bölgesinin konumu hakkında varsayımlarda bulunuyoruz.

Uygulamayı çalıştırdığımızda aşağıdaki gibi bir görüntü ortaya çıkar.

PanResponder API’si ilk başta benim için biraz korkutucuydu, ancak şimdi bu, herkesin uygulamalarında kullanıcı deneyimini daha iyi hale getirmek için kullanabileceği harika bir API olduğunu düşünüyorum.
Umarım bu makale, sorularınız veya endişeleriniz olan yorumlarda size ulaşmanıza yardımcı olmuştur. Okuduğunuz için teşekkürler ve iyi kodlamalar!

Lütfen bize görüşlerinizi bildirmekten çekinmeyin.

Kaynak

1-https://blog.reactnativecoach.com/creating-draggable-component-with-react-native-132d30c27cb0

React Native ile Mobil Uygulama Geliştirme – 9 – React Native’de Redux Kullanımı

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 9. kısmıdır. Bir önceki makalede (Part 8), React Native’de Tab Navigation Kullanımı ve mobil projelerimizde nasıl kullanacağımızıanlattım.

React Native’de Redux Kullanımı ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

Redux’la kullanacağımız bazı nesneler ya da kavramlar var. Öncelikle onlardan kısaca bahsetmek gerekebilir. Mantığını anlayabilmemiz için ihtiyacımız olan üç ana kavram; “store”, “reducer” ve “action” diyebiliriz.

store: Redux kütüphanesiyle birlikte yaratacağımız verilerin tutulacağı alan diyebiliriz. Uygulamamızda tek bir adet “store”umuz olacak ve state’lerimizi bu store’un içinde depolayacağız.

reducer: Action’dan gelen verileri süzgeçleyip store’da belirtilen veriyi güncellememizi sağlayan bir araç.

action: Reducer’lara ulaşarak onları tetikleyen, store’daki güncellemesi gereken veriyi yollan bir araç. Neyi güncellemesi gerektiğini adlandırırken “type” ile belirtmemiz gerekirken, değiştirmesi gereken veriyi payload’larla taşır.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Redux, JavaScript uygulamaları için öngörülebilir bir state konteynirdir. Redux sizin için yeniyse, Redux ile ilgili bu yazımızı okumanızı öneririm.

Bu makalede, bir React Native uygulamasında Redux kullanarak kullanıcı verilerini nasıl saklayacağınızı öğreneceksiniz. Uygulama, bir dizi bağlı arkadaşın görüntülendiği bir HomeScreen ve eklenecek potansiyel arkadaşların bir listesini görüntüleyen bir FriendsScreen’e sahip sahte bir sosyal ağdır. Durumu iki ekran arasında paylaşmak için Redux kullanacaksınız.

İlk önce MySocialNetwork adında bir React Native Mobil proje oluşturalım ve konsolda proje dizinine gidelim. Ardından, projede redux ve react-redux kitaplıklarını kurun:

Projeniz şimdi kuruldu ve bağımlılıklarınız kuruldu. Projenin kök dizininde FriendsReducer.js isimli bir dosya oluşturalım ve aşağıdaki kodları yazalım.

Bu dosyada, sosyal ağınıza eklemek için olası arkadaşlarınızla bir INITIAL_STATE değişkeni oluşturursunuz. Ardından, friendsReducer’ı arkadaşlar adlı bir özellik olarak dışa aktarıyorsunuz.

Actions, uygulamanızdan Redux deposuna veri gönderen bilgi yüklerini temsil eden JavaScript nesneleridir.

Actions bir türü ve isteğe bağlı bir yükü vardır. Bu örnek, tür ADD_FRIEND olacak ve yük, mevcut arkadaşlar dizisine eklediğiniz bir arkadaşın dizi dizini olacaktır.

FriendsActions.js dosyasını projenin kök düzeyinde oluşturun:

Bir kullanıcı bir arkadaşa tıkladığında, bu kod friends.possible dizisinden friendsIndex’i alır. Şimdi bu arkadaşı friends.current dizisine taşımak için bu indeksi kullanmanız gerekecek.

FriendsReducer.js: dosyasına geri dönelim.

Bu kod, mevcut ve olası arkadaşları önceki durumdan çıkarır. Array.splice(), arkadaşı olası arkadaşlar dizisinden alır. Array.push, arkadaşı mevcut arkadaş dizisine ekler. Değişiklikler yapıldıktan sonra durum güncellenir.

Artık bir reducer and ve bir action’imiz var. Reducer’u uygulamanıza uygulamanız gerekecek.

React Redux’ün Sağlayıcı bileşenini kullanarak uygulamanızın arkadaş durumunu sağlamanız gerekecektir.

App.js’yi açın:

ProvidercreateStore, ve friendsReducer import edin.

Artık arkadaşlarınıza uygulamanızdan erişilebilir, ancak onları yine de Ana Ekrana (HomeScreen) ve Arkadaşlar Ekranına (FriendsScreen) eklemeniz gerekir.

Bu adımda, mapStateToProps işlevi ile arkadaşlarınızı ekranlarınız için erişilebilir hale getireceksiniz. Bu işlev, FriendsReducer’daki durumu iki ekrandaki sahne öğelerine eşler.

HomeScreen.js ile başlayalım. HomeScreen.js dosyasını açın:

Bu kod değişikliği, react-redux ekler ve arkadaşları HomeScreen’de kullanılabilir hale getirir.

Ardından, mevcut arkadaşlar için değerler ekleyin (this.props.friends.current):

Ana Ekranınız şimdi mevcut arkadaşların sayısını gösterecektir. Artık FriendsScreen’e geçebilirsiniz.

FriendsScreen.js’yi açın:

Bu kod değişikliği, react-redux ekler ve arkadaşları FriendsScreen’de kullanılabilir hale getirir.

Olası arkadaşlar için değerler ekleyin (props.friends.possible):

Artık Arkadaşlar Ekranına gittiğinizde, indirgeyiciden tüm olası arkadaşları göreceksiniz.
Son olarak, yeni Redux Arkadaş Ekle seçeneğini FriendsScreen.js’ye ekleyin:

Sosyal ağa iki arkadaş ekleyelim ve kullanıcının mevcut kaç arkadaşı olduğunu görmek için HomeScreen’e geri dönelim:

Bununla birlikte, tüm mantığı App.js’den Redux’a taşıdınız, bu da uygulamanızı özellikle kimlik doğrulama ve veritabanı entegrasyonu gibi daha fazla sayfa ve özellik ekledikçe çok daha esnek hale getiriyor.

Tamamlamadan önce kodu temizleyelim.

Artık Redux kullandığınıza göre, App.js’den geçtiğiniz desteğe artık ihtiyacınız olmayacak.

Eylem türlerinizi ayrı bir dosyada saklayarak temizliği bir adım daha ileri götürebilirsiniz.

‘ADD_FRIEND’ dizesini iki yerde kullanıyorsunuz: eylemde ve arkadaş azaltıcıda. Bu tehlikelidir, çünkü dizeyi bir yerde değiştirirseniz diğerinde değiştirmezseniz başvurunuzu bozabilirsiniz. Uygulamanız büyüdükçe, tüm bu işlem türlerini types.js adlı bir dosyada tutmak mantıklı hale gelir.

Types.js dosyasını kök seviyesinde oluşturun:

Ardından, yeni ADD_FRIEND’yi kullanmak için FriendsActions.js’yi yeniden düzenleyelim.

FriendsReducer.js dosyasındaki “ADD_FRIEND” değişkenini ADD_FRIEND değişkenine değiştirin:

Bu, uygulamayı daha az kırılgan hale getirir. Uygulamalarınızı geliştirirken, kodu birleştirmek ve kendinizi tekrar etmekten kaçınmak için fırsatların farkında olmalısınız.

Bu öğreticide, reduxreducersactions,ve ölçeklenebilir veri yönetimini (scalable data management) ele aldınız.

Verileri bir veritabanıyla senkronize tutmaktan, kimlik doğrulamasına ve kullanıcı izinlerini takip etmeye kadar Redux ile yapabileceğiniz çok daha fazla şey var.

Lütfen bize görüşlerinizi bildirmekten çekinmeyin.

React Native ile Mobil Uygulama Geliştirme – 8 – React Native’de Tab Navigation Kullanımı

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 8. kısmıdır. Bir önceki makalede (Part 7), React Native’de kullanılan en iyi 10 kütüphaneleri ve mobil projelerimizde nasıl kullanacağımızı anlattım.

React Native’de Tab Navigation Kullanımı ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Muhtemelen mobil uygulamalarda en yaygın gezinme tarzı sekme tabanlı gezinmedir. Mobil uygulamalarının ekranlarının altındaki veya üstteki başlığın altında (veya hatta bir başlık yerine) sekmeler olabilir.

Bu yazımızda Tab Navigation kullanmak için createBottomTabNavigator’ı kapsar. Ayrıca, uygulamanıza sekmeler eklemek için createMaterialBottomTabNavigator ve createMaterialTopTabNavigator’ı da kullanabilirsiniz.

Devam etmeden önce ilk olarak @ react-navigation/bottom-tabs yükleyin:

Tab Navigation Kullanımı Örneği

Ekran Görüntüsü:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Görünümü Özelleştirme

Bunu inceleyelim:

tabBarIcon, alt sekme gezgininde desteklenen bir seçenektir. Bu nedenle, onu options prop’undaki ekran bileşenlerimizde kullanabileceğimizi biliyoruz, ancak bu durumda, kolaylık sağlamak için simge yapılandırmasını merkezileştirmek için Tab.Navigator’ın screenOptions prop’una koymayı seçtik.
tabBarIcon, odaklanmış durum, renk ve boyut parametreleri verilen bir işlevdir. Yapılandırmada daha aşağıya bir göz atarsanız, tabBarOptions ve activeTintColor ve inactiveTintColor görürsünüz. Bunlar varsayılan olarak iOS platformu varsayılanlarıdır, ancak bunları buradan değiştirebilirsiniz. TabBarIcon’a aktarılan renk, odaklanan duruma bağlı olarak aktif veya pasif olandır (odaklanma etkindir). Boyut, sekme çubuğunun beklediği simgenin boyutudur.
CreateBottomTabNavigator yapılandırma seçenekleri hakkında daha fazla bilgi için tam API referansını okuyun.

Simgelere rozetler ekleyin

Bazen bazı simgelere rozetler eklemek isteriz. Bunu yapmak için tabBarBadge seçeneğini kullanabilirsiniz:

UI açısından bu bileşen kullanıma hazırdır, ancak yine de React Context, Redux, MobX veya etkinlik yayıcıları kullanmak gibi rozet sayısını başka bir yerden düzgün bir şekilde geçirmenin bir yolunu bulmanız gerekir.

Lütfen bize görüşlerinizi bildirmekten çekinmeyin.

 

React Native ile Mobil Uygulama Geliştirme – 7 – React Native’de Kullanılan En İyi 10 Kütüphane

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 7. kısmıdır. Bir önceki makalede (Part 6), React Native Animation, mobil uygulama geliştirirken yazılara, resimlere vb. arayüz bileşenlerine, animasyonu nasıl uygulayacağımızı anlattım.

React Native’de kullanılan en iyi 10 kütüphaneleri ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

React Native topluluğu çok büyük. Çoğu web geliştiricisi, React Native’i android ve iOS için iki dilden öğrenmeyi tercih ediyor. Hemen hemen her geliştirme çerçevesinde, geliştirmeyi herhangi bir üçüncü taraf kütüphane (library) kullanmadan yapmak gerçekten zordur. React.js’ye aşina iseniz, React Native’de birçok ortak kütüphane (library) bulacaksınız.

Bu blog gönderisinde, uygulamalarınızda kullanılabilecek en iyi 10 React Native kütüphanelerini (libraries) listeliyoruz. Bu kütüphaneler (libraries) iyi test edilmiştir ve başlaması kolaydır. Ayrıca bu kütüphanelere (libraries) küçük bir açıklama ekliyoruz. Daha detaylı bilgi almak için github sayfalarına bakabilirsiniz.

1. Axios

Axios, javascript uygulamaları için en popüler HTTP istemci kütüphanelerden biridir. Çoğu uygulama, web’e GET, POST, PUT veya başka herhangi bir Http isteği aracılığıyla bağlanmayı gerektirir. Axios, bu istekleri yazmayı gerçekten kolaylaştırır. Ayrıca, istek başlığını ve hata işlemlerini yapılandırma gibi birçok farklı seçenek sunar.

Npm, bower veya yarn ile kurabilirsiniz. Belgeler de iyi korunur ve MIT lisanslı bir kütüphanedir. Axios hakkında daha fazla bilgi edinmek için Github sayfasını kontrol edin.

 

2. Redux ve react-redux

Redux, React.js’de durum yönetimi için kullanılır. Varsayılan durum yönetimi, yüksek oranda ölçeklenebilir uygulamalar için yeterince iyi değildir. Redux’u daha basit hale getirmek için kullanabilirsiniz. Redux ve React-Redux, her ikisi de farklı kütüphanelerdir. Redux herhangi bir Javascript uygulamasıyla kullanılabilir. React Redux kütüphanesi, redux üzerinden bir bağlanmadır. Bu kütüphane hem React.js hem de React Native ile kullanılabilir. React Redux bir npm paketi olarak mevcuttur ve mevcut bir projeye kolayca entegre edilebilir. Redux mevcut bir projeye eklenebilir, ancak bunu proje geliştirmenin başlangıcında eklemek en iyi uygulamadır.

İşte React Redux github sayfasının bağlantısı.

3. NativeBase

Native Base, bir UI bileşeni React-Native kütüphanesidir. Uygulamanızın UI bileşenini hızlı bir şekilde başlatmak istiyorsanız, bu kullanışlı bir kütüphanedir. Bu kütüphanenin avantajlarından biri, onu native React Native uygulamalarıyla veya expo ile kullanabilmenizdir. Hem Android hem de iOS uygulamaları için güzel UI bileşenleri oluşturmak için birçok seçeneğe sahiptir. Belgeler iyi korunur ve büyük bir topluluk, tüm React-Native sürümler için onu güncel tutmaktadır.

İşte github sayfasının bağlantısı.

 

4. React Native Push Notifications

Push notifications hem Android hem de IOS platformlarında farklıdır. Bu Kütüphane, hem Android hem de iOS’ta local ve remote bildirimleri uygulamayı kolaylaştırır. Planlanmış bildirim, bildirim için özel sesler, bildirimler için öncelik ayarlama, önem ayarlama vb. Gibi farklı özelleştirme seçenekleri sunar. Birkaç yöntem yalnızca Android’de mevcuttur ve çok azı yalnızca iOS’ta kullanılabilir, Github sayfasında iyi belgelenmiştir.

Bu, github sayfasının bağlantısıdır.

 

5. React Native Elements

Bu makaleyi yazarken, bu kütüphanenin github’da 15000’den fazla yıldızı var. Bu, bir mobil uygulamada gerekli olan hemen hemen tüm farklı UI bileşenlerini içeren bir UI araç takımı koleksiyonudur. Bu, React Native elementlerini gösteren bir expo uygulamasıdır. Bu, GitHub sayfasının bağlantısıdır.

 

6. React Native Config

Bir yapılandırma dosyası kullanmak her zaman iyi bir geliştirme uygulamasıdır. Ön uç, arka uç veya mobil uygulamalar: yapılandırma dosyası kodunuzu çok daha kolay hale getirebilir. Yapılandırma dosyası, tüm ortam ayarları değerlerini saklamak için kullanılır. Örneğin, uygulamanızı geliştirme, hazırlama ve üretimde farklı bir API uç noktasında test etmek isteyebilirsiniz.

Farklı ortamlar için farklı yapılandırma dosyaları oluşturabilir ve sahne, üretim ve geliştirme arasında kolayca geçiş yapabilirsiniz. React Native Config kütüphanesi, React Native IOS ve Android uygulamalarında yapılandırma değişkenleri oluşturmayı kolaylaştırır. Aynı yapılandırma dosyasını hem Android hem de IOS için kullanabilirsiniz.

Bu, kütüphanenin github sayfasıdır.

 

7. React Native Permissions

Uygulamanız kamera, mikrofon vb. Gibi herhangi bir iPhone veya Android donanımı veya kişiler, mevcut konum vb. Gibi herhangi bir özel telefon öğesi kullanıyorsa, kullanıcıdan izin istemeniz gerekir. İzni kabul etmek veya reddetmek kullanıcının sorumluluğundadır. İzin işleme hem Android hem de iOS’ta farklıdır. React Native Permissions kütüphanesi, uygulamayı kolaylaştırır. Farklı izin türlerini algılayabilir ve ayrıca kullanıcı izni yetkilendirmiş veya reddetmiştir.

Bu, Github sayfasının bağlantısıdır.

 

8. React Native Maps

IOS için apple maps kullanmanız ve Android için Google maps kullanmanız gerekir. Her ikisi de tamamen farklıdır ve aynı özelliği IOS ve Android’de uygulamak için her iki harita bileşeni hakkında bilgi gerektirir. Google maps’i bir iOS projesinde kullanabilirsiniz, ancak apple, apple maps kullanmanızı önerir.

React Native Maps kütüphanesi, her iki harita görünümünü de entegre etmeyi kolaylaştırır. Kodunuzda yalnızca bir basit <MapView /> etiketi kullanarak, birçok karmaşık özelliği hem Android hem de IOS’ta aynı anda uygulayabilirsiniz. İşaretçi ekleme, ekstra animasyonlu API bileşenleri ekleme, bölgeyi veya konumu izleme, programlı olarak konum değişikliği, yakınlaştırma vb. Gibi birçok özelleştirilebilir seçeneğe sahiptir. Çok az şey yalnızca Android’de ve çok azı IOS’ta mevcuttur.

İşlevleri hakkında daha fazla bilgi edinmek için github deposunu kontrol edebilirsiniz.

 

9. React Native Net Info

Uygulamanız ağla ilgileniyorsa, bu mutlaka sahip olunması gereken bir kitaplıktır. Bu kitaplık, bağlı ağ türünü ve kalitesini kontrol etmek için kullanılır. Tüm IOS, Android ve Windows platformlarında mevcuttur. Bunu npm veya iplik kullanarak kurabilirsiniz ve işte bu kadar. Kitaplığı içe aktarın ve yalnızca bir satır kod kullanarak ağ durumunu kontrol edebilirsiniz.

Bu modül size bağlantı türü (2g, 3g, 4g, wifi vb.), Ağın erişilebilir olup olmadığı, ağın detayı (SSID, güç, IP adresi vb.) Gibi birçok gelişmiş seçenek sağlayabilir. ve daha fazlası. Kütüphane hakkında daha fazla bilgi edinmek için dokümantasyonu inceleyebilirsiniz.

 

10. React Native UI Kitten

UI Kitten bir UI öğeleri kütüphanesidir. Eva tasarım sistemine göre geliştirilmiştir. Bu kütüphanenin ana avantajı, hem açık hem de karanlık modlara sahip olması ve uygulamayı yeniden yüklemeden çalışma zamanında bu temalar arasında geçiş yapabilmenizdir. Başlamak için 20’den fazla bileşene sahiptir. Ayrıca, başlamak için 40’tan fazla karanlık mod ve ışık modu temasına sahip bir başlangıç uygulaması sağlar.

480’den fazla açık kaynak simgesiyle aynı topluluk tarafından geliştirilen eva-icons kütüphanesini de kontrol edebilirsiniz. Bu, kütüphanenin GitHub sayfasıdır.

 

Bu En İyi 10 React Native Kütüphanelerinin, React Native projelerinde kullanabilmeniz için bir üçüncü taraf kütüphanesini daha hızlı almanıza yardımcı olacağını umuyoruz. Herhangi bir kütüphaneyi kullanmadan önce yıldızları, aktif topluluğu ve şu anda açık olan konuları kontrol etmek gerçekten en iyi uygulamadır. Ayrıca, ana projeye entegre etmeden önce kütüphaneyi daima örnek bir uygulama ile deneyin veya demo uygulamalarını deneyin.

Lütfen bize görüşlerinizi bildirmekten çekinmeyin.

 

React Native ile Mobil Uygulama Geliştirme – 6 – React Native Animation

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 6. kısmıdır. Bir önceki makalede (Part 5), React Native API Integration, uzak URL’lerden veri alma yollarını anlattım.

Mobil uygulama geliştirirken yazılara, resimlere vb. arayüz bileşenlerine, animasyonu nasıl uygulayacağımızı öğreneceğiz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Mobil uygulamada kullanıcı deneyimini iyileştirmenin en iyi yollarından biri animasyon kullanmaktır. Android ve iOS yerel geliştirmede, animasyon farklı şekilde ele alınır. Ayrıca, Android’de bulunan tüm animasyonlar iOS’ta uygulanamaz ve bunun tersi de geçerlidir. React Native Animation, animasyonu hem Android hem de iOS’ta uygulamak için aşağıdaki iki API’yi sağlar:

  • Animated API
  • LayoutAnimation API

Bu API’lerin nasıl kullanılacağını örneklerle öğreneceğiz.

Animated API

Animated API’yi View, Text, ScrollView, Image, FlatList ve SectionList ile kullanabiliriz. Animasyonlu bir bileşen oluşturmak için Animated.createAnimatedComponent() yöntemini de kullanabiliriz.

Örneğin :

Bu örnekte, 3 saniyelik bir süre boyunca “genişlik” “0” ile “100” arasında bir görünüm oluşturacaktır. “Görünüm” yerine “Animated.View” kullandığımıza dikkat edin. Ayrıca, “genişlik” değerini değiştirmek için “Animated.timing” yöntemini kullanıyoruz. “Genişlik”, bileşenin “durumunda” tanımlanan bir değerdir. Değeri, “Animated.View” öğesinin genişliğini ayarlamak için kullanılır. Aynı yaklaşımı kullanarak, bir görünümün hem yüksekliğini hem de genişliğini canlandırabiliriz, bir görünümün opaklığına animasyon ekleyebiliriz vb. Bu, durumu sürekli olarak değiştirmekle aynı değildir. Durumu sürekli değiştirirsek, bileşeni tekrar tekrar yeniden oluşturacak ve bu da görünümün performansını etkileyecektir. Animation API, animasyonu daha verimli göstermek için farklı bir mekanizma kullanır.

Animasyon yapılandırması:
Animated, üç farklı animasyon türü sağlar:

Animated.decay(): Bu tür animasyonlar bir başlangıç ​​hızıyla başlar ve yavaş yavaş son hıza doğru yavaşlar.
Animated.spring(): Spring fiziği model animasyonu.
Animated.timing(): Belirli bir süre boyunca bir değeri canlandırır. Bu, “Animasyonlu” nun en yaygın kullanılan işlevlerinden biridir.

Animasyon değerleri:
Yukarıdaki örnekte Animated.value kullandık. Animated.Value(), tek değerler için kullanılır. Bu yöntemin dışında Animated.ValueXY() de var. Bu, vektörler için kullanılır.

Bir animasyonu başlatmak için start() yöntemi kullanılır. Bu yöntem isteğe bağlı olarak, tamamlandığında çağrılacak olan bir tamamlama işleyici bloğu alır. Önceden tanımlanmış değerlerle tamamlanmadan önce bir animasyonu durdurmak için stop() yöntemini de çağırabiliriz. Örneğin, herhangi bir kullanıcı etkileşiminde veya başka bir animasyon başlarsa stop() ‘u çağırmamız gerekebilir. Tamamlama bloğunda animasyonun normal şekilde bitip bitmediğini veya stop() çağrılıp çağrılmadığını tespit edebiliriz. Bize tamamlama bloğunda, normal tamamlama için “true” ve “stop()” tamamlama için “false” olacak olan “finished” adlı bir bayrak verir.

Animasyonları birleştirin:
Yeni bir tane oluşturmak için iki hareketli değeri birleştirebiliriz. Animasyonları birleştirme yöntemleri şunlardır:

Add: Animated.add()
Subtract: Animated.subtract()
Divide: Animated.divide()
Modulo: Animated.modulo()
Multiply: Animated.multiply()

Mimik :
Animasyonla çalışıyorsak, jestlerle uğraşmak zorunda kalabiliriz. Hareket olaylarını animasyonlu değerlerle eşlemek için Animated.event() yöntemi kullanılır. Bunun için yapılandırılmış harita sözdizimi kullanılır.

Mevcut animasyon değerini okumak:
Bazen bir görünümün mevcut animasyon değerini okumamız gerekebilir. Ancak daha önce de açıkladığım gibi, bu durum değerini sürekli güncellemek gibi bir şey değil. Bu esas olarak yerel çalışma zamanında yapılır ve bu nedenle mevcut değeri izlemek zordur. Bunun için kullanabileceğimiz iki yol aşağıdadır:

spring.stopAnimation(callback): Animasyonu durdurur ve geri aramayı başlatır. Bu geri arama, nihai değeri tutacaktır.
spring.addListener(callback): Bu durumda, geri arama eşzamansız olarak çağrılacaktır. Geri arama ile animasyonun son bir değerini alacağız. Bu, animasyonun mevcut durumuna göre bir şey işliyorsak kullanışlıdır.

LayoutAnimation API:
LayoutAnimation, Animated API gibi pek çok özellik sağlamaz, ancak çoğu durumda kullanışlıdır. Temel olarak, görünümleri bir sonraki işlemede yeni konumlarına canlandıracaktır. Bu, flexbox mizanpaj güncellemeleri için ve ayrıca değişiklikler herhangi bir ata görünümünü etkiliyorsa kullanışlıdır. Normalde, bir durumdaki değerleri değiştirerek kullanırız.

Android’de, yalnızca aşağıdaki yapılandırmayı eklersek çalışacaktır:

Sadece bir satır kod ekliyoruz ve bu da animasyonu görünüme ekliyor. Çok sayıda görünümümüz varsa, tüm görünümleri aynı anda canlandırmak için özellikleri durumda depolayabilir ve durumu “LayoutAnimation” kullanarak güncelleyebiliriz.

Hem “LayoutAnimation” hem de “Animated” api’ler bir uygulamada kullanışlıdır. Kullanım durumlarına bağlıdır. “Animated” oldukça güçlüdür ancak her türden animasyon için çok sayıda kod yazmayı içerir. Ancak animasyona daha fazla kontrol sağlar. “LayoutAnimation”, çok fazla kod yazmadan ve herhangi bir görünümü değiştirmeden yeniden oluşturma sırasında animasyon yapmak için harikadır. Görünüm özelliklerini state’de depolayın ve animasyonu yapmak için state’i değiştirin.

Makale, React Native Animation API’nin kitlelere hitap eden muhteşem bir uygulama geliştirmek için nasıl kullanılabileceğini açıkladı.

Lütfen bize görüşlerinizi bildirmekten çekinmeyin.

React Native ile Mobil Uygulama Geliştirme – 5 – React Native API Integration

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 5. kısmıdır. Bir önceki makalede (Part 4), React Native ‘in en temel yapı taşı olan UI Components (Kullanıcı Arayüzü Bileşenleri) ‘ni anlattım.

Mobil uygulama verilerini sunucu tarafında bir veritabanı yönetim sistemi üzerinde saklamanın ve erişmenin en kolay yolu RESTful API veya web servisi tarzı çözümlerdir. Bu makalede, internetteki bir veriye erişip, o veriyi arayüzümüzde göstermekle alakalı işlemleri öğreneceğiz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

React Native API Integration, uzak URL’lerden veri almanın en kolay yollarından biridir. API entegrasyonunu yalnızca GET isteğini kullanmak için değil, aynı zamanda POST, PUT, DELETE gibi diğer HTTP isteklerini tek bir kod parçası kullanarak hem Android hem de iOS’ta kolayca kullanabiliriz. Bu makalede, bir örnekle bir GET isteğinin nasıl yapılacağını öğreneceğiz. Uygulamamız bazı fake verileri getirecek ve uygulamada dolduracaktır.

Fetch API:

React native, HTTP isteklerini işlemek için Fetch API adlı bir API kullanır. Bu, web uygulamalarında kullanılan API’nin aynısıdır. Daha önce “fetch” seçeneğini kullandıysanız, bu kılavuzun anlaşılması daha kolay olacaktır. Verileri almak için “fetch()” adı verilen küresel bir yöntem kullanılır. Bu, zaman uyumsuz bir yöntemdir. En basit şekli yalnızca bir argüman alabilir: getirdiğimiz verilerin URL’si. Verileri eşzamansız olarak almak ve getirme tamamlandıktan sonra bu veriler üzerinde işlem yapmak için kullanabiliriz. Örneğin :

Bu kadar.
Request ve Response nesneleriyle ilgilenir. Yukarıda gördüğünüz gibi, fetch en az bir argüman olarak kullanılabilir. Bir Promise nesnesi döndürür. Bu nesneye verilen yanıtı çözer. Yanıtı aldığımızda, diğer body parametrelerine erişebiliriz.

Fetch API’si için Diğer Değişkenler:

Fetch ayrıca isteği özelleştirmek için kullanılabilecek bir saniye argümanı alır. ‘POST’, ‘GET’, ‘PUT’ gibi istek türlerini değiştirebiliriz ve ayrıca isteğin üstbilgisini ve gövdesini özelleştirebiliriz. Örneğin :

Bu örnekte, başlık ve gövde değerleriyle bir ‘POST’ isteği yapıyoruz. Gövde JSON tipindedir.

Response Datalarını İşleme:

Yukarıda açıklandığı gibi, fetch tarafından döndürülen Promise nesnesini kullanarak yanıtı ele alabiliriz. Bu sözün üstesinden gelmek için ‘then’ ya da herhangi bir ‘async await’ işlevini kullanabiliriz.

Bu örnekte, verileri alıyoruz ve JSON’u kullanarak verileri “json” a dönüştürüyoruz. Async await örneğini makalenin sonunda göstereceğim.

Request Özellikleri ve Metodları:

Request() yapıcısı yeni bir Request nesnesi oluşturmak için kullanılır. İstek nesnesi alıyorsanız, nesnenin çeşitli özelliklerine erişin. Aşağıda bu özelliklerin ve her birinin kısa ayrıntılarını bulabilirsiniz.

Özellikler (read-only):
Request.cache: isteğin önbellek modunu al.
Request.context: İsteğin bağlamını al
Request.credentials: isteğin kimlik bilgilerini alın
Request.destination: istek hedefini al
Request.headers: başlık nesnesini al
Request.integrity: İsteğin bütünlük değerini al
Request.method: istek yöntemini alın ör. GET, POST, PUT vb.
Request.redirect: yönlendirmenin nasıl ele alınacağına ilişkin modu edinin
Request.referrer: isteğin yönlendiricisini al
Request.referrerPolicy: isteğin yönlendirme politikasını alın
Request.url: İsteğin URL’sini al

 

Metodlar:
Aşağıda, kolayca kullanabileceğiniz bazı Request nesnesi yöntemleri verilmiştir.

Request.clone(): mevcut istek nesnesini klonlamak için kullanılır.
Body.arrayBuffer(): ArrayBuffer türündeki bir gövde nesnesiyle çözümlenecek bir söz verir
Body.blob(): Blob türünde bir gövde nesnesiyle çözümlenecek bir söz verir
Body.formData(): FormData türündeki bir gövde nesnesiyle çözümlenecek bir söz verir
Body.json(): Json türünde bir gövde nesnesiyle çözümlenecek bir söz verir
Body.text(): Metin türünde bir gövde nesnesiyle çözümlenecek bir söz verir

Response Özellikleri ve Metodları:

Request’e benzer bir şekilde, Response nesnesi de aşağıda kontrol edebileceğiniz bazı özelliklere ve yöntemlere sahiptir.

Özellikler (read-only):
Response.headers: Yanıtın headers nesnesini al
Response.ok: Yanıtın başarılı olup olmadığını tanımlamak için Boolen değeri. Yanıt 200 ile 299 arasındaysa bir yanıt başarı olarak adlandırılır
Response.redirected: Yeniden yönlendirilmiş bir yanıt olup olmadığını tanımlar
Response.status: yanıtın durum kodu
Response.statusText: Yanıt değerinin durum mesajı veya metin temsili.
Response.type: yanıt türü
Response.url: yanıtın URL’si
Response.useFinalURL: Yanıtın nihai URL’si olup olmadığını tanımlayan Boolean değeri
Body.body: Body içeriğinin bir ReadableStream’ini göstermek için kullanılan basit bir alıcı.
Body.bodyUsed: Body’nin henüz bir yanıtta kullanılıp kullanılmadığını bildiren bir Boolean saklar.

Metodlar:
Response.clone(): yanıt nesnesinin klonunu oluşturur.
Response.error(): bir ağ hatası olan bir yanıt nesnesi döndürür
Response.redirect(): Yeni url ile bir yanıt nesnesi oluşturur Response Body uygular. Dolayısıyla, yukarıda tanımladığımız aynı İstek Gövdesi yöntemlerini de içerir.

Uygulmayı Çalıştırma:

Basit bir örnekle getirmeyi öğrenelim.

Bu örnekte, ‘jsonplaceholder’ API’sından kukla veriler getiriyoruz. Bu açık bir API’dir ve test için kullanabilirsiniz.

“App”, bir anahtar “jsonData” ile bir “state” olan bir tepki bileşenidir. “render” yönteminde, “jsonData” tarafından tanımlanan değeri gösteren bir “Text” bileşeni döndürür. Bu değer “state” nesnesinden okunur. Varsayılan olarak “jsonData” değeri boştur. Veriler getirildiğinde, değeri “jsonData” olarak ayarlar ve bileşeni yeniden yükler.
Bu bileşen yüklendikten sonra componentDidMount yöntemi çağrılır. Bu yöntemin içinde, json API’sına bir GET isteği göndermek için “fetch” i kullanıyoruz. Yanıt vaadini döndürür ve bu vaat nesnesini, o yanıttan “json” değerini almak için kullanıyoruz.
Son olarak, bu json değerinin gövdesi “jsonData” anahtarına ayarlanır. Durum değeri değiştirildikten sonra, bileşen kullanıcı arayüzünü yeniden oluşturur ve json değeri kullanıcı arayüzünde aşağıdaki gibi gösterilir:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Yukarıdaki örnekte görebileceğiniz gibi, json verisi getirilir ve kullanıcı arayüzünde gösterilir.

Aşağıdaki gibi getirirken async-await’i de kullanabiliriz:

Yukarıdaki fonksiyonlardan herhangi birini kullanabilirsiniz, tamamen uygulamanın mimarisine bağlıdır.

Not:
İOS uygulamaları için, bir istek SSL şifreli değilse, engellenir veya çalışmaz. Bu varsayılan davranıştır. Bir ATS veya uygulama taşıma güvenliği istisnası ekleyerek bundan kaçınabilirsiniz.

Makale, herhangi bir üçüncü taraf API, React Native Application’daki Rest Services’i entegre etmenin ne kadar kolay olduğunu gösterdi.

Lütfen bir deneyin ve yorumlarınızı bize bildirin.

React Native ile Mobil Uygulama Geliştirme – 4 – React Native UI Components

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 4. kısmıdır. Bir önceki makalede (Part 3), React Native’de Stillendirme ve Flex kullanımını örnekleyerek, elementleri boyutlandırma, renklendirme vb. değişiklikler yaparak nasıl özelleştireceğimizi anlattım.

Bu makalede, React Native ‘in en temel yapı taşı olan UI Components (Kullanıcı Arayüzü Bileşenleri) ‘ni anlatacağım. Component dediğimiz şey Türkçe’ye çevirdiğimizde bileşen anlamına geliyor. Sizin uygulamalarınızda işi yerine getiren, yapan her birime birer komponent denir aslında. Amaç bir kere yazalım o komponent’i her yerde kullanalım mantığı vardır. Bir React Native projesinde farklı tipteki UI öğelerini kullanabiliriz. Ancak bir android ve iPhone’da farklı görünebileceğini unutmayın. Text inputs, touchables ve picker’ların farklı örneklerle nasıl yapıldığını öğreneceğiz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Text Inputs:

TextInput bileşeni, kullanıcı metin girişlerini almak için kullanılır. Metin girişleriyle kullanılabilecek aksesuarlar aşağıdadır:

placeholder : Bu placeholder metnidir, yani boş bir TextInput’ta gösterilecek metindir.

value: TextInput onChangeText içine yerleştirilecek değer: Bir işlev alır ve bu her metin değişikliğinde çağrılacaktır.

onSubmitEditing: Bir işlev alır ve metin gönderildikten sonra çağrılacaktır.

Aşağıdaki örneğe bakalım:

TextInput öğesine herhangi bir metin yazarsanız, metin içinde aynı metni gösterir. “placeholder” desteği yer tutucuyu koymak için kullanılır. Kullanıcı yazmaya başladığında bu kaldırılır. OnChangeText props bir işlevi alır ve geçerli ‘props‘ metin ’değerini değiştirir. “value” props, metni TextInput öğesine koymak için kullanılır. ‘TextInput’un‘ değerini ’doğrudan değiştirmiyoruz. “state” deki “metin” değerini değiştirir ve “metin” değer olarak atanır. Alttaki “Metin”, kullanıcının yazdığı metnin aynısını koymak için kullanılır.

TextInput’ta özelleştirme için başka birçok sahne var. Bu resmi kılavuzu kontrol ederek daha fazla bilgi edinebilirsiniz.

 

Touch Handling:

Tüm mobil uygulamalar esas olarak parmak dokunuşu kullanılarak işlenir. Bu dokunma hareketleri, dokunma, kaydırma, kıstırma vb. gibi farklı tiplerde olabilir. React Native, farklı hareketleri işlemek için bir hareket yanıtlama sistemi sağlar. Hemen hemen tüm React Native bileşeni kullanıcı parmak dokunuşunu algılayabilir, ancak yalnızca dokunma olayıyla ilgili olan bir bileşene “Touchables” adı verilir. Bu bileşeni kullanarak, farklı tasarıma sahip kendi özel düğmelerimizi oluşturabiliriz. Ayrıca, tek basış ve uzun basış olaylarını tespit etmek için iki farklı props sunar. Sağlayabileceği geri bildirim türleri şunlardır:

TouchableHighlight :

Bu, bir button veya web bağlantısı ile kullanılabilir. Kullanıcı öğeye bastığında görünüm kararır.

TouchableNativeFeedback :

Bu Android’de dalgalanma etkisi gösterecektir. TouchableNativeFeedback, iOS’ta desteklenmez.

TouchableOpacity :

Bu, kullanıcı bastığında buttonun opaklığını azaltır.

TouchableWithoutFeedback :

Dokunulduğunda kullanıcıya herhangi bir geri bildirim göstermek istemiyorsanız kullanın.

Bu türler dışında, tek basış ve uzun basışları tespit etmek için ‘onPress’ ve ‘onLongPress’ aksesuarlarını kullanabiliriz. Bu iki sahne de bir ‘function’ gerektirir.

Burada da görebileceğiniz gibi, TouchableHighlight bileşenindeki tek basış ve uzun basışları tespit etmek için ‘onPress’ ve ‘onLongPress’ desteklerini kullanıyoruz.

Picker:

Picker, kullanıcıdan bir değer listesinden seçim yapmasını istemek için kullanılır. Picker bileşen hem Android hem de iOS’ta kullanılabilir. İşlevsellik hem Android hem de iOS’ta aynıdır, ancak görünüm farklıdır. Aslında yerel Android ve iOS seçicileri kullanıyor ve her ikisi de farklı görünüyor. Seçilen değeri gösterir ve üzerine tıkladığımızda, android’de bir açılır pencerede mevcut değerlerin bir listesini gösterir. İOS’ta, mevcut tüm seçeneklerle birlikte bir kaydırılabilir tekerlek gösterir. Seçici bileşenini, diğer bileşenler gibi ‘react-native’ öğesinden içe aktarabiliriz. Örneğin :

Bu kodu çalıştırırsanız, bir Android telefonda aşağıdaki gibi görünecektir:

Picker listesinde gösterilecek ‘Picker’ bileşeninin içine ‘Picker’ öğesi olarak bir öğe listesi eklememiz gerekir. Picker’da çok sayıda farklı props vardır. Bunlardan birkaçı aşağıdaki gibidir:

1. onValueChange :

Seçiciden bir öğe seçildiğinde bir geri arama verir. Seçilen öğenin değerini ve o öğenin dizinini verir. Dizin önemlidir, gerekirse dizini kullanarak farklı bir harita listesinden seçim yapabiliriz.

2. selectedValue :

Seçici öğe değerleri listelerinden biriyle eşleşmesi gereken seçilen değer.

3. enabled :

Değeri ‘false’ olarak ayarlarsak seçiciyi devre dışı bırakır.

4. mode :

Bu seçenek yalnızca Android için kullanılabilir. “dialog” veya “dropdown” olabilir. “dialog” kalıcı bir iletişim kutusu gösterir, bu varsayılan seçenektir. “dropdown” bir açılır liste görüntüler.

5. style and itemstyle :

stil “pickerStyleType” türünde olmalıdır. “picker” ye bir “style” eklemek için kullanılır. “itemStyle”, öğe etiketlerinin her birine stil uygulamak için kullanılır.

Şimdiye kadar, çoğu uygulama için gereken en yaygın kullanılan React Native UI Bileşenlerini gördük. Lütfen görüşlerinizi ve bununla ilgili sorularınızı bize bildirin.

React Native ile Mobil Uygulama Geliştirme – 3 – Stillendirme ve Flex Kullanımı

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 3. kısmıdır. Bir önceki makalede (Part 2), React Native ile cross-platform mobil uygulama geliştirmek için bilmeniz gereken State ve Props kavramlarından bahsettim.

Bu makalede, React Native’de Stillendirme ve Flex kullanımını örnekleyerek, elementleri boyutlandırma, renklendirme vb. değişiklikler yaparak nasıl özelleştireceğimizi anlatacağım.

Stil, uygulama geliştirmenin önemli parçalarından biridir. Native Android Uygulama geliştirme için XML, kullanıcı arayüzünü tasarlamak için kullanılır. Benzer şekilde, Native iOS Uygulama geliştirme için XCode gereklidir. Ancak React Native’de, hem Android hem de iOS’ta çalışan uygulamayı biçimlendirmek için yalnızca JavaScript kullanıyoruz. Reaksiyona özgü UI bileşenlerinin yerleşimini belirtmek için flexbox kullanılır. Bu makalede, React Native’de stil eklemeyi ve flexbox’ı nasıl kullanacağımızı öğreneceğiz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın

Biçimlendirme:

React Native’de stil için CSS’yi kullanamayız. Bunun yerine, stil öğeleri eklemek için JavaScript kullanılır. Her kullanıcı arabirimi öğesi, kendisine uygulanan bir stil ‘props’ alır. CSS’den farklı olarak, adlandırma kuralı camel case (büyük küçük harf) kullanır, örn. bir öğenin arka plan rengini eklemek için “arka plan rengi” yerine “backgroundColor” kullanacağız.

Örneğin, aşağıdaki gibi bir kalın metin oluşturabiliriz:

Her bileşen farklı türde stil props alır. Geçersiz bir stil’den geçersek yok sayılır.

Stylesheet Kullanma:

Her UI bileşeni için stil props’u eklenmesi, kodu düzenlenmemiş ve dağınık hale getirecektir. Ayrıca, bu şekilde, stili birden fazla kullanıcı arayüzü öğesiyle paylaşamayız. React-Native, farklı kullanıcı arayüzü öğeleri arasında paylaşılabilen bir ortak stil deseni oluşturmak için başka bir yol sağlar. Ortak bir stil sayfası oluşturmak için aşağıda gösterildiği gibi StyleSheet.create yöntemini kullanın:

Bu örnekte, ‘Metin’ öğeleri içeren ‘StyleClass’ adlı bir bileşenimiz var. Her iki “Text” öğesi iki farklı stil kullanıyor. ‘StyleSheet.create’ öğesini kullanarak bileşeni dışa aktarmadan önce stili tanımlıyoruz. İki farklı stilin oluşturulduğunu görebilirsiniz: “title” ve “description” ve bu stilleri eklemek için “{styles.stylename}” kullanıyoruz. Bu yaklaşımın ana avantajı, kodun daha temiz hale gelmesi ve birden fazla UI bileşeninde bir stil kullanabilmemizdir.

Sabit boyut için yükseklik ve genişlik ekleme:

React-native’de, bir UI öğesi için sabit genişlik ve yükseklik ekleyebiliriz. Sabit yükseklik / genişlik ayarlarsak, tüm boyutlu cihazlar için aynı boyutta oluşturulurlar. ‘Stil’ bölümünde ‘genişlik’ ve yüksekliği aşağıdaki gibi kullanabilirsiniz:

Bu boyutlar birimsizdir ve yoğunluktan bağımsız pikselleri temsil eder.

Ancak bu iyi bir uygulama değildir, çünkü bir görünümün veya başka bir UI öğesinin ekranın yarısını doldurmasını istiyorsak ve sabit boyut kullanırsak, telefonlar ve tabletler gibi farklı cihazlarda farklı olacaktır. Bunun için “flexbox” adı verilen başka bir mekanizma kullanılır. Nasıl çalıştığını kontrol edelim:

Flexbox :

Flex, bir görünüme dinamik boyut vermek için kullanılır. Flex değerine 1 verirseniz, tam ekran alanı kaplar. Ebeveyn görüşüne ‘flex = 1’ verebilir ve alt görüşlerine farklı esnek değerler verebiliriz. Örnek,

Burada, çıktı aşağıdaki gibi görünecektir:

Gördüğünüz gibi iç görünümler eşit olarak bölünmüş durumda. İç görünümlere aynı değerde farklı bir değer verirsek, aynı çıktıyı üretecektir. Daha büyük bükülme değeri kardeşlerine göre daha yüksek boşluk oranı sağlayacaktır. Bir görünümün 0’dan büyük bir değere sahip esnekliğe sahip olması veya sabit bir yükseklik / genişliğe sahip olması gerektiğini, aksi takdirde alt görünümlerin görünmeyeceğini unutmayın. Flexbox, farklı ekranlarda tutarlı düzen boyutu sağlamak için kullanılır.

Flexbox’ın ana kavramları şunlardır:

  1. flexDirection
  2. alignItems
  3. justifyContent

flexDirection:

flexDirection, child görünümlerinin hangi yönde yerleştirileceğini tanımlamak için kullanılır. Ana flexDirection türleri şunlardır:

row: Tüm öğeleri soldan sağa hizalayın.
column: Tüm öğeleri yukarıdan aşağıya hizalayın. Bu varsayılan değerdir.
row-reverse : Satırın tersi. Tüm öğeleri sağdan sola hizala
column-reverse i: Sütunun tersi. Tüm öğeleri aşağıdan yukarıya hizalayın.

Örnek :

Aşağıdaki çıktıyı üretecektir:

 

justifyContent:

Geliştirme sırasında bunu, eksenindeki alt görünümlerin nasıl hizalandığını tanımlamak için kullanabilirsiniz. Ana türleri şunlardır:

flex-start: Bu varsayılan değerdir. Tüm içeriği ana eksenin başlangıcına hizalar.

flex-end: İçeriği eksenin sonuna hizalayın.

center: İçeriği eksenin merkezine hizalayın.

space-between : childlar arasındaki kalan alanı dağıtarak tüm childları eksen boyunca eşit aralıklarla yerleştirin.

space-around: childlara eşit boşluk bırakarak eşit boşluk alan childlar.

Örnek :

Aşağıdaki çıktıyı üretecektir:

alignItems:

Bu, öğeleri çapraz eksen boyunca hizalamak için kullanılır. Ana ekseni hizalamak için justifyContent kullanılabilir. Öğeleri çapraz eksen boyunca hizalar. Türleri şunlardır:

stretch: childi çapraz eksenin yüksekliğine uyacak şekilde uzatın.

flex-start: chidları çapraz eksenin başlangıcına hizalayın.

flex-end: Yukarıdaki ile aynıdır, ancak uçlara hizalanır.

center: Merkeze hizalayın.

baseline : Ortak bir taban çizgisi boyunca hizalayın.

Örnek :

Tek bir öğenin alignItems öğelerini geçersiz kılmak için ‘alignSelf’ özelliğini de kullanabilirsiniz.

flexWrap alignContent :

Ekranın boyutu taşarsa, öğeleri kontrol etmek için flexWrap kullanabilirsiniz. ‘nowrap’ ve ‘wrap’ olmak üzere iki değeri vardır. Örnek :

Burada görebileceğiniz gibi, son görünüm sağa yerleştirilir, çünkü ikinci görünümün altına yerleştirirsek ekranı geçecektir.

‘FlexWrap’i kullanarak sarmaladıysanız, öğeleri hizalamak için alignContent kullanabilirsiniz. 6 değeri vardır: ‘flex-start’, ‘flex-end’, ‘stretch’, ‘center’, ‘space-between’, ‘space-around’.

Flexbox kavramı CSS’deki ile aynıdır. Tek fark, flexDirection’ın varsayılan olarak “column” olmasıdır ve flex parametreleri yalnızca tek bir sayıyı destekler.

Sonuç:
Makale, React Native App’te Styling’i nasıl gerçekleştirebileceğiniz konusunda kısa bir giriş yapmıştır. Makaleyi herhangi bir noktayı içerecek şekilde güncellememiz gerekiyorsa lütfen okuyun ve bize bildirin.

 

React Native ile Mobil Uygulama Geliştirme – 2 – Props ve State

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 2. kısmıdır. Bir önceki makalede (Part 1), React Native ile cross-platform mobil uygulama geliştirmek için bilmeniz gereken program kurulumlarından ve Android ve IOS platformları için yapılması gereken ortam kurulum ve ayarlarından bahsettim.

Bu makalede de props” ve “state” kavramlarından bahsedeceğim. React Native’de veri komponent içinde 2 şekilde işlenir: State ya da props kullanarak. State, bir verinin değiştirilme/güncellenme durumu varsa kullanılabilir. Props ise, mevcut bir verinin başka bir komponente aktarılma yöntemidir.

Makaleleri sırasıyla okumanızı tavsiye ediyorum. Eğer PART 1’i okumadıysanız buradan ulaşabilirsiniz.

“props” ve “state”, React Native’deki iki önemli kavramdır. React Native Props ve State kullanarak, bir bileşeni kontrol edebiliriz. Bu derste, “props” ve “state” in örneklerle nasıl kullanılacağını öğreneceğiz.

Props

React Native’de, yeniden kullanılabilir her eleman bir bileşen olarak oluşturulabilir. Örneğin, bir resim ve başlık içeren bir feed listeniz varsa, o öğe için bir bileşen oluşturabilir ve bu öğeyi feed’in her satırında kullanabiliriz. Her satır farklı görüntü ve başlıklarla aynı bileşeni kullanacaktır.

Yine, uygulamamızda, başka bir sayfada resim ve başlık ile aynı görünüm gerekiyorsa, bu bileşeni kullanabiliriz.

Ancak bileşenin yükleyeceği değerleri nasıl ileteceğiz? Bu örnekte, her bir satır için aynı bileşene farklı bir resim URL’si ve başlığı geçirmemiz gerekiyor. “props” bunun için kullanılır. ReactJS’lere aşina iseniz, props konsepti aynıdır. Farklı bileşen örneğine farklı “props” atayabiliriz ve her örnek, görüşlerini oluşturmak için “props” değerini kullanır.

“props”, “properties” anlamına gelir. Normalde, bir üst bileşen props’u alt bileşenlerine geçirir. Alt bileşen, props’ta tanımlanan değerleri kullanır. Propsları kullanarak, yeniden kullanılabilir kod yazmak kolaylaşır.

Bileşenlerde props kullanımı:

Çoğu sistem bileşeninde props kullanmamız gerekir, çünkü bu bileşenler farklı özellikler için farklı görünecektir. Örneğin, yerel bir uygulamada bir resim eklemek için aşağıdaki “Resim” bileşeni gereklidir:

Burada ‘source’ bir props. Farklı URL’yi geçebiliriz ve farklı resimler gösterecektir. Aynı “Image” bileşenini kullandığımızı, ancak “url” desteklerinin farklı olduğunu unutmayın.

“Props” nin değişmez olduğunu hatırlamamız gereken bir şey var, yani onları değiştiremeyiz. Ayrıca, propslar üst bileşenden alt bileşene, yani yukarıdan aşağıya doğru geçirilir.

Custom Component oluşturma:

Bir ‘props’u kabul eden özel bir bileşen oluşturalım. Tek bir basit bileşen oluşturacağız ve farklı sahne değerleri kullanarak farklı değerler göstereceğiz.

Her şeyden önce, basit bir react-native projesi oluşturun. Kök klasörde bir “CustomCard.js” dosyası oluşturun ve aşağıdaki kodu ekleyin:

Bu bir react bileşenidir. Diğer görünüm bileşenleri gibi içe aktarabilir ve yükleyebiliriz. Bu bileşen yüklendiğinde, kullanıldığı yerden döndürülecek bir görünüm döndüren render() yöntemini yürütür.

View olarak return  içinde, bir Metin ve bir Resim var. Metin, “props” lardan aldığı “başlık” değerini gösteriyor. Benzer şekilde, Resim aynı “props” lardan aldığı “url” yi kullanarak bir resim yükler.

Şimdi ‘App.js’ dosyasını açın ve içeriğini aşağıdaki gibi değiştirin:

Burada, ‘firstImage’ ve ‘secondImage’ iki farklı görüntünün iki farklı url’si. Kök bileşendir, yani Uygulama bu bileşenin oluşturma yönteminden döndürülen içeriği yükler.

“Render” içinde “CustomCard” bileşenlerini iki kez kullanıyoruz. Her seferinde iki değer iletiyoruz: “url” ve “başlık”. Bu değerler bileşende sırasıyla “this.props.url” ve “this.props.title” olarak kullanılır. Uygulamayı çalıştırın ve aşağıdaki gibi bir çıktı verecektir:

 

Burada gördüğünüz gibi, aynı bileşen farklı görüntü ve metinlerle yüklendi.

State

Daha önce “props” öğesinin ana bileşen tarafından ayarlandığından ve bir alt bileşene aktarıldığından bahsetmiştim. Alt bileşen, “props” daki değerleri değiştiremez. Değişebilir verileri işlemek için “state” adı verilen farklı bir bileşen özelliği kullanmamız gerekir.

Bir “state”, bir bileşende değişebilecek verileri depolamak için kullanılır. Her bileşenin farklı bir “state” değerleri vardır. Bu değerlere dayanarak kullanıcı arayüzü değiştirilir.

Daha önemli bir şey de, bir state’deki hiçbir değeri doğrudan değiştiremeyeceğimizdir. Bunun için “setState” adlı bir yöntemi çağırmamız gerekiyor. Bu yöntem geçerli durumu değiştirir ve tüm bileşeni yeniden oluşturur.

Yukarıda açıklanan aynı örneği kullanıyoruz. CustomCard.js dosyasını aşağıdaki gibi değiştirin:

Çıktı
Programı şimdi çalıştırırsanız, aşağıdaki gibi görünecektir:

 

Bileşenin altına bir düğme ekledik. Bu düğmelerden herhangi birini tıklatırsanız, her tıklamada başlık metnini gizler ve gösterir.

Koda yakından bakın. “constructor” yöntemi, bileşen her oluşturulduğunda, yani “render” çağrılmadan önce çağrılır. “constructor” içinde “state” i başlatıyoruz. Yalnızca bir boolean değeri ‘isHidden’ ve başlangıç ​​değeri ‘false’.

“constructor” yönteminin “render” ifadesinde, “Metin” bileşeni yalnızca “eyalet” te tanımlanan “isHidden” değeri “yanlış” ise gösterilir. Aksi takdirde, gizlenir. Bir “state’te” mevcut değeri kontrol etmek için “this.state” kullanıyoruz.

‘Düğme’ bileşeninde, üzerine tıklarsak, ‘onPress’ desteklerinin işaret ettiği yöntemi, yani ‘showHideText’ ok işlevini uygular. Düğmeye her tıkladığınızda, aynı yöntemi çağıracaktır. Bu yöntemin içinde, ‘state’ tanımlı ‘isHidden’ ın mevcut değerini değiştiriyoruz.

this.setState ({isHidden:! this.state.isHidden})

Bunu “! This.state.isHidden” olarak değiştiriyoruz, yani, değer “doğru” ise “yanlış” ve “yanlış” ise, “doğru” olacaktır. Bir “state” içindeki herhangi bir şeyi değiştirmek için “this.setState” yöntemi çağrılır. Bu yöntemi çağırdığımızda, bileşen yeniden yeniden oluşturulur. Dolayısıyla, “isHidden” değeri “doğru” olursa, “Metin” gizlenir ve “yanlış” olursa “Metin” gösterilir.

Bir state’deki hiçbir değeri doğrudan değiştiremeyiz. Bunu değiştirmek için “setState” yöntemi gerekir. Bu yöntemi kullanarak bir veya daha fazla durum değerini değiştirebiliriz. Ayrıca, durum her bileşen nesnesinde farklıdır.

React Native Props ve State arasındaki fark:

React Native props ve state başlıkları arasındaki temel fark şunlardır:

Props değiştirilemez ancak state değiştirilebilir.
Props donanımı normalde ana bileşenden alt bileşenine geçirilir. Ancak, her bileşende state korunur.
Props araçlarını kullanarak bir üst bileşenin durumunu değiştirebiliriz.

Bir sonra ki makale de Part3:React Native Uygulamalarında stillendirmeden bahsedeceğim. Takipte kalın!