React Native ile Mobil Uygulama Geliştirme – 16 – React Native ile Görseller Uygulamada Nasıl Yüklenir?

“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 16. kısmıdır. Bir önceki makalede (Part 15), React Native Community Blur paketi ile Android ve iOS uygulamalarının arka plan görünümünü bulanık(blur) nasıl yapabileceğimizi anlattım.
Bu makalede React Native uygulamalarına görselleri nasıl yükleyebiliriz konusunu öğreneceğiz.
Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Görseller, bir mobil uygulamaya başka bir boyut katar. Kullanıcı tarafından oluşturulan görüntüler bunu güçlendirir.

Bu makale de React Native ile geliştirilen mobil uygulamanızda, fetch API ile kullanıcılarınıza resim yükleme işlemini nasıl yapabileceğinizi anlatacağım.

Kurulum

Görüntüleri gerçekten yüklemeye başlamadan önce iki proje oluşturacağız:
1-Bir React Native uygulaması
2-Basit Node Server (böylece fotoğrafı yükleyebileceğimiz bir yerimiz var)

React Native App

Burada birkaç şey yapacağız:

1-Her iki uygulamamızın da içinde olacağı bir dizin oluşturma
2-Yeni bir React Native uygulaması oluşturma
3- react-native-image-picker kitaplığını yükleme
4-react-native-image-picker yerel bağımlılıklarını bağlama
Terminalinizde aşağıdakileri çalıştırın:

Ardından, React Native uygulamanızla ilişkili hem iOS hem de Android uygulamalarında gerekli izinleri etkinleştirmeniz gerekir.

iOS’ta bu, mobile/ios/mobile/Info.plist’te gerçekleşir ve şunu eklemeniz gerekmektedir.

Android’de, AndroidManifest.xml dosyasını mobil/android’de birkaç dizin aşağısında bulmak ve şunu eklemeniz gerekmektedir.

Daha sonra, react-native run-ios veya react-native run-android’i çalıştırabilir ve aşağıdakine benzer bir sonuç elde edebilirsiniz:

Node Server

Yeni bir terminal penceresinde aşağıdaki komutları çalıştırın:

Ardından index.js’ye aşağıdakileri yazın:

Son olarak, uygulamayı index.js node ile çalıştırabilirsiniz.

Şimdi başlamaya hazırız!

Resim Seçme

Bir resim yüklemeden önce, yükleyecek bir resmimiz olmalı! İşte burada react-native-image-picker devreye giriyor. Cihazımızdan bir görüntü seçmemize izin verecek.
mobile/App.js’yi aşağıdakilerle güncelleyebilirsiniz:

Bu kod, kullanıcının resim galerisini açmasına ve bir fotoğraf seçmesine olanak tanır. Bir fotoğraf seçtiklerinde, uygulamada şu şekilde görüntülenecektir:

Request Body Oluşturma

Herhangi bir veri oluşturmak/güncellemek için daha önce getirme API’sini kullandıysanız, muhtemelen şöyle bir şey yapmışsınızdır:

Bir görüntü yüklemek için bunun yerine verileri multipart/form-data kodlama türüne göre yüklememiz gerekir.

Bunu yapmak için FormData kullanarak isteğimizin gövdesini oluşturabiliriz.

Sunucumuzu kurduğumuzda, resmin fotoğraf anahtarında olacağını söyledik, bu yüzden gerekli tüm fotoğraf bilgilerini koyduğumuzdan emin olmamız gerekiyor. Ayrıca diğer ilişkili bilgileri (userId gibi) iletmenize de izin vereceğiz.

Önce FormData’yı başlatıyoruz ve ardından fotoğraf anahtarını ekliyoruz. Bu mesajın gövdesi, bunun işe yaraması için gereken minimum değerdir. Bir dosya adı, bir dosya türü ve ardından bir uri iletmemiz gerekiyor. Uri, görüntünün cihazda bulunduğu yerdir.

Çalışması için bu uri’ye platforma dayalı olarak biraz masaj yapmamız gerektiğini fark edeceksiniz. Esasen, sadece iOS’taki uri’den file:// soymak için kaynar.

Son olarak, uç noktaya iletmek istediğimiz herhangi bir ek veriyi (bu fotoğraf değil) döngüye alırız.

Resmin Yüklenmesi
Son olarak, fotoğrafı yükleyebiliriz.

Fotoğrafı yüklemek için bileşenimizde yeni bir işlev oluşturacağız.

Endpoint api/upload’da ve bir POST isteği bekliyor. Daha sonra daha önce belirtmek üzere kaydettiğimiz fotoğrafı createFormData fonksiyonuna geçiriyoruz.

Daha sonra getirmenin bize sağladığı söz zincirine girebiliriz. Önce yanıtı bir json nesnesine dönüştürüyoruz ve ardından fotoğrafın yüklendiği konusunda kullanıcıyı uyarıyoruz!

Görsel yüklenemezse, bu hatayı yakalar ve kullanıcıya görselin yüklenemediğini bildiririz.

Fotoğrafı gerçekten yüklemeden önce, bir kullanıcıya işlemi başlatmak için dokunabilecekleri bir düğme vermemiz gerekiyor.

Şimdi, bir fotoğraf seçip yükle düğmesine bastığınızda, sunucuda/görüntülerde sunucuda yeni bir görüntünün göründüğünü görmelisiniz.

 

Kaynak:https://www.reactnativeschool.com/

React Native ile Mobil Uygulama Geliştirme – 15 – Blur Background View 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 15. kısmıdır. Bir önceki makalede (Part 14), React Native’de WebView oluşturmayı ve mobil projelerimizde nasıl kullanacağımızı anlattım.
Bu makalede React Native Community Blur paketi ile Android ve iOS uygulamalarının arka plan görünümünü bulanık(blur) nasıl yapabileceğimizi öğreneceğiz.
Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.
Bu yazıda @react-native-community/blur olarak bilinen harika bir react yerel npm paketi hakkında bilgi edineceğiz. React Native Community Blur paketi, hem android hem de iOS uygulamalarına  bulanık arka plan görünümü oluşturmak için kullanılır. React Native Community Blur paketinde koyu, açık ve xlight olmak üzere temel olarak 3 tür bulanıklaştırma efekti vardır. Bugün bir react native uygulaması oluşturacak ve @react-native-community/blur paketini NPM sunucusunu kullanarak proje uygulamamıza yükleyeceğiz. Yüklemeyi bitirdikten sonra, react native ile bulanık görünüm yapma kodunu yazacaktık.
1. İlk adım, @react-native-community/blur paketini projemize yüklemektir. Bu nedenle, projenizin Kök dizinini Komut İstemi veya Terminal’de açın ve aşağıdaki komutu yürütün.

2. Artık android’de yükleme işlemi için başka herhangi bir komut yürütmeniz gerekmiyor. Ancak iOS için kurulum işlemini tamamlamak için aşağıdaki komutu uygulamalıyız.

3. Şimdi bir sonraki adım, uygulama için kodlamaya başlamaktır. Bu nedenle, projenizin ana App.js dosyasını açın ve Projenize Görünüm, Stil Sayfası, Metin, Resim ve Bulanık Görünüm bileşenini içe aktarın.

4. Ana dışa aktarma varsayılan Uygulama işlevsel bileşenimizi oluşturma.

5. Şimdi dönüş bloğunda ilk önce bir Kök Görünüm bileşeni -> Arka Plan Görüntüsü bileşeni -> BlurView Bileşeni yapacağız. Şimdi, Bulanıklaştırma Görünümü bileşenine hangi bulanıklaştırma efektini uyguladığımızı göstermek için bir Metin bileşeni yapacağız.
Burada temel olarak 3 tür BlurView efekti mevcuttur: –
1. dark
2. light
3. xlight
Mevcut Prop:
1. stil: – Bulanıklaştırma Görünümü bileşenine stil uygulamak için kullanılır.
2. blurType: – Bulanıklaştırma türünü ayarlamak için kullanılır, desteklenen değerler dark, light, xlight’tır.
3. blurAmount: – Bulanıklaştırma yoğunluğunu ayarlar.
4. lessTransparencyFallbackColor: – Yalnızca iOS, siyah, beyaz, #rrggbb, vb. – Erişilebilirlik ayarı ReduceTransparency etkinse kullanılacak arka plan rengi.

6. Stil Oluşturma.

7. App.js dosyası için tam Kaynak Kodu: –

Ekran görüntüleri:

Kaynak: https://reactnativecode.com/

React Native ile Mobil Uygulama Geliştirme – 14 – WebView 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 14. kısmıdır. Bir önceki makalede (Part 13), React Native’de Multi-Step Form oluşturmayı ve mobil projelerimizde nasıl kullanacağımızı anlattım.

React Native’de web sitelerimizi webview ile  göstermeyi ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

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

Bu yazıda React Native WebView ile web sitenizin görünümünü Ios ve Android uygulamanızda gösterebilmeyi anlatacağım. Web sitenizin URL’sini kullanarak bu işlemi yapacağımızdan, sitenizdeki herhangi bir değişiklik uygulamanıza anında yansıyacaktır.

1. Yeni bir proje oluşturun

2. Aşağıdaki bağımlılıkları yükleyin
Navigasyon ve react-native web görünümü için iki bağımlılık eklemeliyiz, navigasyon için en son react-navigasyon 5.0’ı kullanıyoruz. React-navigation 5.0 hakkında daha fazla bilgi edinmek için bu linke bakın. React-native-webview yüklemek için aşağıdaki komutu kullanın.

React-navigation 5.0 için aşağıdaki komutları kullanın.

İlk olarak, react-navigasyonu için aşağıdaki library’i kurun.

3. WebViewScreen.js oluşturun
Bu ekranı birden çok kez kullanabilmemiz için WebViewScreen.js için ayrı ekran etkinliği oluşturacağız.

Yapıcıdaki yukarıdaki ekranda, önceki ekrandan geçiş olan görünen URL’yi alıp durum değişkenine kaydedeceğiz ve yukarıdaki kodu gördüğümüz gibi kaynağa atlayarak web görünümünü görüntülemek için bu URL’yi kullanacağız.

4. WebView ekranını çağırma
Bu örnekte, aşağıdaki gibi Home.js eylem çubuğundan webViewScreen’i çağırıyorum

5. App.js
React-navigation 5.0’da NavigationContainer’ı Kullanarak Ekranları tanımladığım App.js’mi ve createStackNavigator’ı kontrol edin.

Ekran Görüntüsü

Kaynak: https://www.techup.co.in/react-native-webview-example/

React Native ile Mobil Uygulama Geliştirme – 13 – Multi-step Form 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 13. kısmıdır. Bir önceki makalede (Part 12), React Native’de Context API ve Hooks ile Simple Toast oluşturmayı ve mobil projelerimizde nasıl kullanacağımızı anlattım.

React Native’de multi-step form (step by step form) oluşturmayı ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

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

Bir müşteri için bir e-ticaret sitesi üzerinde çalışırken, ödeme sayfası için bir multi-step form üzerinde çalışmam gereken bir kısım vardı. İlk başta bunun için bir eklenti kullanabilirim diye düşünüyordum. Bu yüzden internette arama yaptım ama gereksinimlerimi karşılayan hiçbir şey bulamadım, bu yüzden kendim yaptım.

Fikir aslında çok basit, durum yönetimini kullanarak düğmelerin ve madde işaretlerinin nasıl görüntüleneceğini değiştirebilirsiniz. Ve biraz stil ile madde işaretlerinin nasıl çalıştığını vurgulayabilirsiniz. Onay işaretli yeşil madde işareti sayfanın tamamlandığını, gölgeli turuncu madde işareti o anda görüntülenen sayfayı belirtir ve ana hatları çizilen madde işaretleri henüz yapılmamış sayfaları gösterir. Siz kendi uygulamanıza göre kodları değiştirip deneyebilirsiniz.

 

Ekran Çıktısı:

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

Kaynaklar:

1-https://www.npmjs.com/package/react-native-multistep-forms

2-https://zaferayan.medium.com/react-nativede-stepper-form-nas%C4%B1l-yap%C4%B1l%C4%B1r-e1eb58e5f0f3

3-https://reactscript.com/animated-multi-step-form-for-react-native/

4-https://carlofontanos.com/react-native-wizard-stepper/

React Native ile Mobil Uygulama Geliştirme – 12 – Context API ve Hooks ile Simple Toast 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 12. kısmıdır. Bir önceki makalede (Part 11), React Native’de Hooks ve FlatList ile Search Bar eklemeyi ve mobil projelerimizde nasıl kullanacağımızı anlattım.

React Native’de Context API ve Hooks ile Simple Toast oluşturmayı ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

React Native topluluğu, Toast adı verilen küçük mesajların gösterilmesini sağlayan çok sayıda kullanıma hazır kütüphane sunar. Ancak, bunu kendi başımıza uygulamak büyük bir çaba değil. Ek olarak, davranışlarının ve görünümlerinin tam kontrolünü elde ederiz. Context API ve hookları kullanarak böyle bir çözümü zaman kaybetmeden uygulayabiliriz.

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

Her şeyden önce, create context ve Provide bileşeni oluşturmamız gerekiyor.

Bu context’te 3 adet anahtarımız var. İki tanesi toast mesajın görünürlülüğünü ve gizliğini sağlamak için, bir taneside toast mesajın state’ini almak içindir.

Şimdi Consumer bileşeni oluşturmamız gerekiyor:

Burada mevcut toast durumunu almak için useContext hooks kullanıyoruz ve animasyonu useEffect hooks kullanarak çalıştırıyoruz. Ek olarak, kullanıcının Toast’ı tıkladığında kapatmasına izin veriyoruz.

Toast bileşenimize bazı stiller ekleyelim:

Ancak, ToastProvider’ın içine useEffect hook’u ekleyerek Toast sağlayıcımıza otomatik gizleme ekleyebiliriz.

Şimdi provider ve consumer’u uygulamaya bağlayabiliriz:

Evet! Provider içine Consumer girişini koyabileceğimizi ve context’e yalnızca göster / gizle yöntemini gösterebileceğimizi biliyorum, ancak daha esnek bir çözüme sahip olmak istiyorum (Consumer’u uygulama yapısında istediğim yere koyabilirim)

Artık Tostumuzu istediğimiz ekrandan gösterebiliriz:

Ekran Çıktısı:

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

Kaynak

https://selleo.com

 

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.

Kaynak: https://www.digitalocean.com/community/tutorials/react-react-native-redux

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.

Kaynak: https://www.opencodez.com/