0:02 merhaba arkadaşlar 3 dersimizde sayfalar arası dolaşım ve sayfalar arası veri taşıma konularından bahsedeceğiz bunun için yeni bir proje oluşturmak istiyorum ilk projemizi gerçekleştirmiştik zaten eee yeni proje oluşturmak için yazmamız gereken komut neydi expo init ve proje adımızdı buna da RN paging yani paging sayfalar arasında dolaşımı ifade etmek için kullandığım sayfalam anlamına gelen bir ifade tekrar enter diyorum ve projemi onaylıyorum burada gördüğünüz gibi RN paging 2inci eee projemiz olarak karşımıza geldi eee
0:52 bundan sonraki süreçte RNA paging projesinin içine giriş yaparak ilerlemeleri orada gerçekleştireceğim arkadaşlar kurulum işleminin tamamlanmasını bekliyorum şimdi bu esnada bahsetmek istediğimiz konuları da şöyle ifade etmek istiyorum sayfalar arası dolaşım ve sayfalar arası veri taşıma işleminden bahsedeceğiz daha sonra arkadaşlar props konusundan flatlist konusundan buton türlerinden use state use effect ve paging konularından bahsedeceğiz arkadaşlar şimdi projemiz oluştu [Müzik] affedersiniz
1:39 arkadaşlar eee bu proje klasörüme geçiş yapmam gerekiyor biliyorsunuz RN paging diyerek giriş yaptım ön izlemeyi başlatabiliriz bunun için de bir Android Studio cihaza ihtiyacımız vardı hemen Android Studio'dan da e sanal emülatörümü başlatıyorum isterseniz web'de de önleme yapabilirdiniz bunlardan bahsetmiştik arkadaşlar virtual device manager ve sanal cihazımı başlatıyorum sanal cihazımız da başladı arkadaşlar en son projeyi görüyoruz burada bir mevcut projemizi göndermeye
2:25 çalışalım bunun için de NPX Expo Start yazarak sunucumuzu başlatıyor idik gördüğünüz gibi bunun içerisinde bir expo klasörü oluştu şimdi sunucumuzu nerede açmak istiyoruz biz android'de açmak istiyoruz yeni projemiz gönderilecek mi bir bakalım ortak bir proje klasöründe çalıştığımız zaman bazen buraya göndermede bazı sıkıntılar gerçekleşebiliyor şuradan ana sayfaya dönelim ve arkadaşlar Android'e tekrar göndermeye çalışayım bir önceki proje karşımıza geliyor buradan da R diyerek reload
3:11 yapıyorum arkadaşlar r tuşuna basarak yeniden yükleme yapabilirsiniz a ile Android'e gönderdim ama bir önceki projemi gösterdi şimdi relowad diyerek yeni projemi gönderdim ve gördüğünüz gibi buradaki Renay paging içerisindeki appjs'nin içindeki texti şu an Android studomda Android Studaki emülatör uygulamda yani sanal telefonumda görebiliyorum şimdi bugünkü ilk konumuz sayfalar arası dolaşımdı sayfalar arası dolaşım için projemize eklememiz gereken bazı eklentiler vardı bu arada sunucuyu durduruyorum ya da ikinci komut sisteminden devam edebilirim buradan tekrar buraya giriş yapıyorum klasörüme
3:59 evet şimdi bunun için ihtiyacımız olan şeylerden bir tanesi neydi arkadaşlar biliyoruz ki bir React Navigation eklentilerini yüklememiz gerekiyordu google'a Reactive Navigation yazabilirsiniz ve devamında açılacak olan ilk site Reactnavigation.org sitesini açıyoruz redbox diyoruz arkadaşlar redbox dedikten sonra burada yüklememiz gereken bazı bileşenler eklentiler var şurada gördüğünüz gibi bakın Reactive projeleri için bunu yükleyin diyor kopyaladık direkt Reddaki ana sayfadan bunu kopyaladım arkadaşlar ve projemin içerisine bunu dahil ediyorum bu birincisi 3 taneye vardı expo kullanıyorsak Expo kullanıyorsak
4:44 yüklememiz gereken ikinci eee bileşen ikinci eklenti diyelim buydu arkadaşlar bunu da kopyalıyorum bakın şurayı kopyalaya tıklayarak kopyaladım buradaki yükleme tamamlandıktan sonra tekrar kopyala yapıştır ve enter diyorum ü tane yapıyorduk bu işlemi üçüncüsünde bu sayfada değildi bakın şurada diyor ki eğer e bu expoyu kullanıyorsanız you can now continue hello React Navigation yani şu sayfaya geçiş yapın diyor hello Roy Navigation ya da buraya tıklayarak geçiş yapabilirsiniz diyor hello Roy Navigation sayfasına geçiş yapıyorum ve burada yine eee Native Svac navigator'ü kurmak için ne var bir komut satırı var
5:30 komut satırını da alarak yine arkadaşlar burada çalıştırarak projemize dahil ediyoruz şimdi geldiğimiz süreçte artık eee React Navigation işlemini projemize dahil etmiş olduk bundan sonra yönlendirme ve eee sayfalar arası dolaşım işlemini gerçekleştireceğiz peki okumaya devam edelim buradan sonrasını biraz aşağıya doğru takip etmemiz gerekiyor arkadaşlar şurada bakın diyor ki creating and stack native snack navigator eee burada statik değil dinamik olanı tercih edeceğiz arkadaşlar dinamik olana geliyorum kodları baştan sona yazmak yerine buradaki tüm kodları kopyalıyorum bakın ne yazıyor yeni bir
6:17 projede appjs içine diyor appjs içine burayı kopyalayın diyor yani geliyoruz aşağıya doğru bakın şurada gördüğünüz komut satırı ister seçerek yapabilirsiniz isterseniz buradan direkt kopyala seçeneğini alabiliriz ve appjs'mizi açıyoruz appjs'nin içerisinde ne var ne yok seçip hepsini siliyorum arkadaşlar ve kopyaladığım ifadeyi buraya yapıştırıyorum eklenti yüklemeyeceğim için şunu biraz daha aşağı alabilirim şimdi ve kaydediyorum ctrls ile kayıtlı bir şey kayıt dışı bir şey olmasın diye kaydettik evet şu an ne yapmış olduk
7:04 arkadaşlar ana sayfamızla alakalı daha doğrusu apps'miz artık bir yönlendirme sayfası haline getirdik ilk başta projemizi ön izleme yaptığımızda bu bir ana sayfa olarak karşımıza çıkıyordu şu an ise yönlendirme işlemini gerçekleştiren bir danışma konumunu üstlenen bir sayfa oldu tüm sayfalar arası dolaşım işlemlerinde buraya buraya yapacağımız eee yönlendirme eee ayarlarına yönelik olarak süreçler gerçekleşecek bir bakalım burada herhangi bir durum var mı bir yerde bir yazım hatası olduğuna dair bilgi var şöyle bir şey yapmak istiyorum kaydettikten sonra load kısmına tekrar geliyorum ve yeniden gönderilmesini istiyorum rel
7:53 diyerek projemin donma süreci gerçekleşti şurada tekrar bir A harfine basalım bu uygulamada donmalar bazen maalesef gerçekleşiyor arkadaşlar bu durumlarda expo'yu kaldırıp tekrar kuruyorum sizin de aklınızda bulunsun ya da web'de önzleme yapabilirsiniz ya da telefonunuzda ön izleme yapabilirsiniz
8:38 telefonunuzda da benzer bir sorun yaşarsanız arkadaşlar tabii burada ne olacak expo'yu tekrar yükleyecek telefonumuza expo yükledikten sonra uygulamayı tekrar yükleyecek biraz sadece zamansal durumlar hım eksik olan bazı şeylerimiz varmış arkadaşlar hemen [Müzik] bakalım eee aslında eksik olan herhangi bir şey yok e projeyi sunucumu tekrar durdurup tekrar başlattım şöyle e mevcut React Native Navigation işlemi için gerekli olan eklentileri
9:24 diğer komut sisteminde komut satırında yükledim ama sunucuyu durdurup başlatmadığım için orada hata verdi arkadaşlar sunucuyu durdurdum tekrar gönderdim ve bakın ana sayfa olarak home screen karşımıza geldi peki bu home screen yazısı nereden karşımıza geliyor işte burada karşımıza geliyor arkadaşlar burada home screen fonksiyonu oluşturulmuş durumda ve apps diyor ki bu sayfa yüklendiğinde ilk olarak home screen'i aç peki home screen ayrı bir sayfa değil gördüğümüz gibi mevcut eee apps içerisine oluşturulmuş bir eee fonksiyon şimdi biz yeni sayfalar oluşturacağız yeni sayfa oluşturmak için klasörümüze sağ tıklayıp new folder diyoruz ve SRC
10:09 isimli bir klasör oluşturuyoruz daha sonra SC klasörüne sağ tıklıyoruz sağ tıklayıp Screens isimli bir klasör daha oluşturuyoruz bunun altına artık diğer sayfalarımızı oluşturabiliriz mesela bu home screen dediğimiz ana sayfa olsun biz ana sayfayı buraya oluşturduğumuzu düşünelim new file dedim sağ tıklayıp bu sefer new folder yerine burada sayfa isimlerinizin ilk harfinin büyük olmasına dikkat edin arkadaşlar anasayfa.js bakın Türkçe olarak veriyorum home screen de yazabilirdik bu birinci sayfamız olsun bir sayfa daha oluşturalım new file dedim burada da dersler nojs isimli ikinci bir sayfam oluşmuş olsun ana sayfaya
10:56 gelelim bir eklenti yüklemiştik geçen dersimizde extensions'tan Reactnative eklentisini yüklemiştik bu eklentiyi yükleyenler RNFS yazıp enter'a basarak burayı oluşturabilir hazır bir şekilde ve CtrlS diyerek kaydediyorum aynı işlemi dersler için de yapıyorum arkadaşlar rnf enter ve kayıt kayıtsız herhangi bir şeyim kalmadı şimdi ana sayfamı dersler sayfamı oluşturdum appjs sayfamda artık arkadaşlar şunu kapatayım RN projeninmiş appjs sayfamda artık bu sayfaları tanımlayarak bu sayfalara yönlendirme işlemlerini gerçekleştirmek istiyorum dolayısıyla buradaki function home screen' artık ihtiyacım yok çünkü home screen'imi ben kendim oluşturdum yani ana sayfamı kendim oluşturdum ve
11:43 buraya değil aynı sayfa içerisinde değil farklı bir sayfaya yönlendirme yapmasını istiyorum orayı sildim gördüğünüz gibi kaydettim muhtemelen hata verecek evet çünkü ne var home screen diye bir şeyimiz mevcut değil şuradaki isimleri biz belirliyoruz arkadaşlar home yani ben anlaşılır olsun diye Türkçe yazacağım sizin için normalde İngilizce ifadeler daha fazla tercih ediliyor yani ana sayfa yazabilirim mesela buraya da yine arkadaşlar eee şurada bakın burada ve burada fonksiyon isimlerimiz var bakın ana sayfa veya işte dersler buradaki fonksiyon isimleri nasıl görünüyorsa buraya da onu yazmakla yükümlüyüz siliyorum buradaki ifadeyi ve ana sayfa yazarken bana bir öneride
12:28 bulunuyor elinizle yazarsanız veya işte buradan yazarsanız bir farklılık doğuyor şuradan ana sayfayı seçersem ben buraya importu kendisi getiriyor arkadaşlar lakin ben kendim elimle yazmaya devam etseydim bu import seçeneğini de yine elimle yazmam gerekecekti unutmayın arkadaşlar ne diyor peki sc'nin içerisinde Screens'in içerisindeki ana sayfadan bu ana sayfa fonksiyonunu buraya dahil et bu sayfaya dahil et diyor sonra ana sayfa yerine ben de bunu sen ana olarak ifadelendir diyorum ana sayfa ifadesi yerine ana olarak kullan diyorum peki bunun aynısını tekrar yazmam gerekiyor şimdi kopyaladım bu satırı ve alt satıra geçtim buraya da diyorum ki
13:13 ders ders ler olsun sayfamızın adıyla aynı olsun aynı aynı olmasının herhangi bir şey herhangi bir farklılık doğurmayacağını da görmüş olalım buraya da ders yazdığımda bakın dersler önerisi geldi ben bunu elimle şöyle yazarsam importu da yine gelip böyle import dersler diyerek tamamlamam gerekiyor ya da arkadaşlar doğrudan buraya dersler yazarken çıkan öneriden seçersiniz ve buraya işlemi gerçekleştirir peki şu an yaptığım işlemden sonra ne gerekecek şu an yaptığım işlemden sonra arkadaşlar burası artık ana sayfaya yönlenecek yani nereye işte buraya bakın ortasında bir ana sayfa yazısı olan eee daha doğrusu sayfasının ekranında bir ana sayfa
14:00 yazısı olan bir sayfa açılacak ve gördüğümüz gibi de açıldı şurada ana sayfa yazıyor bakın şuradaki isim ise benim burada verdiğim isim arkadaşlar bu nedenle şuraya da ana sayfa diyeyim daha anlaşılır görünsün bu üstte görünen ana sayfa yazısı buradan geliyor name'den geliyor arkadaşlar evet sayfalar arası yönlendirmenin ana şeyi bu şimdi eee bu bizim danışma merkezimizde apps ve apps en üstteki sayfayı ana sayfa olarak algılıyor ve proje yüklendiğinde ilk olarak en üstteki sayfaya gönderiyor e biz bunun yerine kendimiz bir başka bir sayfayı başlangıç sayfası olarak belirleyebiliriz bunun için de navigatörün içerisine initial root name ifadesini koyuyoruz ve şuradaki isimlerden hangisi bizim ilk sayfamız
14:46 ise onu yazıyoruz mesela dersler ilk sayfamız olsun dediğimiz zaman bakın eee bunu kaydettim burada bir yenileme olmadı şundan diyorum ki yeniden yükle yeniden yüklendiğinde şu an dersler sayfasının gelmesi gerekiyor ki geldi eee R'ye basarak yeniden yükledim bu arada arkadaşlar dersler benim ana sayfam olsun yani başlangıç sayfam olsun ifadesi olmuş oldu ama biz yine ana sayfa yazalım arkadaşlar kaydedelim ana sayfa bizim başlangıç sayfamız olsun yeniden yükle diyelim ve açıldığında yine ana sayfa buraya gelsin bazen bu expo üzerinden gerçekleştiği için donmalar yapabiliyor
15:31 arkadaşlar herhangi bir problem yok isterseniz şöyle web'de de W'ya basarak ön izleme yapabilirsiniz bakın ana sayfa ön izlemesi gerçekleşiyor gördüğünüz gibi burası da açık kalsın bazen buradan da ön izleme yapabiliriz telefonumuzda böyle sıkıntılar yaşadığımızda peki burası ilk sayfayı yönlendirmesini gerçekleştirdi ve sayfaları tanımlama işlemini de gerçekleştirdik sayfalar arasında dolaşımı nasıl yapacağız buna bakalım ana sayfada bir tane buton koymak istiyorum arkadaşlar buraya şöyle textin içerisine diyelim ki menü ya da seçenekler seçenekler ifadesi olsun bu arada biçimlendirme ile alakalı işlemler de gerçekleştirelim süslü parantez içerisinde
16:18 stylus nokta baslik yazayım arkadaşlar şurada da gelelim basliyi tanımlayalım bu basliğin font sizeı yani yazı büyüklüğü 30 olsun align item 2 no center olsun ortaya hizalanmış olsun arkadaşlar bakalım şöyle bir tabii burada göremiyoruz tekrar şurayı da bir yenileyelim evet bakın seçenekler büyüdü 30 büyüklüğüne geldi virgül justify content 2 center diyerek
17:03 de ortaya almaya çalışalım bunu e tabii şöyle bir şey var align item center ve justify content center'ı aslında yanlış yere yazdım şöyle yapalım bunu arkadaşlar şunu da hatta keseyim bu sadece büyüklük olarak kalsın view'e vermem gerekiyor aslında bunu style eş stylis nokta başlık alanı alanı şeklinde olsun arkadaşlar şurada da virgül basik alanı ve aline item center ifadesini buraya yazıyorum ve sayfamı yeniliyorum bakın
17:50 ortaya geldi align item center x ekseni üzerinde yani yatayda bir ortalama işlemi gerçekleştiriyor tamam seçenekler böyle kalsın justify content ise y ekseni üzerinde bir ortalama gerçekleştirecekti renk de verebiliriz tabii onu unutmayalım color red şeklinde şu virgüllere dikkat edelim arkadaşlar yenilemeyi tekrar gerçekleştirdim tamam güzel şimdi bunun içerisinde yukarıya textimin altına butonlar koymak istiyorum bu arada buton kullanımını da ilk defa görmüş olacağız arkadaşlar buton buradan butonu öneriden siz kendiniz seçerseniz şuraya import buton seçeneği gelecek arkadaşlar lakin
18:38 eğer biz bunu seçmemiş olsaydık şöyle yapmamız gerekecekti şuraya buton yazmamız lazımdı ve buraya gelip bundan sonra buton demem gerekiyordu peki butonumu oluşturdum butonumun içerisinde bir yazı görünsün title dersler listesi yani buna tıklandığında dersler listesine geçiş yapsın istiyorum şimdi şöyle bir bakalım nasıl görünüyor evet gördüğünüz gibi dersler listesi diye bir buton geldi şu an için herhangi bir işlem gerçekleştirmiyor arkadaşlar bakın herhangi bir süreci yok eee şimdi ne yapacağız biz buna diyeceğiz ki on press yani
19:24 tıklandığında Hım tıklandığında ne yapsın tıklandığında dersler sayfasına gitsin ve dersler sayfasını açsın istiyorum peki dersler sayfasını açmak için öncelikle şöyle bir şey yapıyoruz arkadaşlar yapmamız gereken işlem şuraya navigation propsunu yazmak peki bundan sonraki süreç ne olacak arkadaşlar tıklanıldığında şöyle dedikten sonra navigation nokta navigate peki nereye navigate etsin arkadaşlar sayfamızın adını buraya
20:09 yazmamız gerekiyor peki bu isim nereden geliyor bu isim işte appjsde şurada verdiğimiz isimler burada verdiğimiz isimler yazdık kaydettik herhangi bir hata var mı görelim bir denemesini yapalım eksiğimiz varsa düzeltiriz dersler sitesine tıkladığımda gördüğünüz gibi dersler sayfasına geçiş yaptı geri diyorum bakın dersler geçiş yaptı geri tekrar diyorum dersler sayfasına git dedik peki dersler sayfasından şu an için ön izlememizi gördüğümüzde şöyle bir şey var burada bir geri gelme butonu çıkıyor geri gelme işlemini böyle gerçekleştiriyoruz bir de ne yapalım arkadaşlar geri gelmek için buton
20:55 koyalım dersler sayfasından da geri gelme işlemini de bir butonla gerçekleştirelim dersler sayfasını açtık dersler diye bu kalsın şimdilik amacımıza yönelik hizmet edelim arkadaşlar şuraya ne yapıyorduk butonumuzu bir öncelikle ekliyoruz ımport ediyoruz sonra da buton slash ve kapatıyoruz peki title 2 nokta şöyle pardon boşluk title geri dön peki on basıldığında h ne yapacaktık arkadaşlar şuraya süslü parantez içerisinde navigation tamam buraya da bir arrow function
21:43 yazarak şöyle diyoruz ki navigation nokta nav hatta navigate değil geri dön ha şöyle de yapabilirdik navigation navigate ana sayfa yani e ismini de verebilirdik bir önce bunu deneyelim arkadaşlar evet şimdi geri geldim dersler listesi dedim şöyle sayfamı bir yenileyeyim öncelikle dersler listesi geri dön bakın gördüğünüz gibi geri dön butonum çalışıyor bunun yerine şunu da yazabilirdik tabii hemen onu da bir göstereyim navigason.navigate şuraya da gelip
22:29 parantez içerisinde ana sayfa diyebilirdik aynı işlemi yapacaktı arkadaşlar bu sayfalar arası geçişte sayfa ismini vererek yapılan bir işlemdi bu ise direkt geri dönmeyi sağlıyor evet geri dön işlemini de gösterdik sayfalar arası geçişte peki sayfalar arası geçişte bir de veri taşıma işlemine bir giriş yapalım arkadaşlar buraya geliyorum buradan dersleri sayfasına giderken bir bilgi götürmesini istiyorum dersler sayfasına bunun için ne yazmamız gerekiyor bir görelim evet burada dersler sayfasına geçiş yaparken virgül işaretini koyuyoruz arkadaşlar ve diyoruz ki sen dersler sayfasına geçiş yaparken şu bilgileri de götür bir süslü parantez açtım ve bu süslü parantez içerisinde göndermesi
23:15 gereken bilgileri yazacağım arkadaşlar yani ders isimlerini göndermek istiyorum diyelim ders 1 iki noktamı koydum ve ders adını yazıyorum dersimin biri nedir mobil uygulamalar ve programlama peki bir gün bir ders daha gönderelim ders 2 bunun adı da ne olsun python yanlış yazdım programlama peki bunları karşı tarafa gönderdik peki ne yapacağız arkadaşlar diğer tarafta da
24:00 karşı tarafta da karşılayarak bunları göstermem lazım bir şekilde karşılama işlemine de bir bakalım arkadaşlar dersler sayfasına geldim bu karşılama işlemi için navigation'ın yanında bir de root eee parametresine ihtiyacımız var propsona ihtiyacımız var rootsunu alı yazdıktan sonra burada const diyoruz ve arkadaşlar oradaki isimleri yazmam gerekiyor ders 1 ders 2 peki bunları da belirttikten sonra ah eş root params diyorum ve noktalı virgülümü koyuyorum arkadaşlar peki bunları artık gösterebilir miyim bakalım gösterebilecek miyiz dersler isimli bir
24:47 başlığımız var bunun altında da bir texti şuradan kopyalayayım dersler yerine ders 1 şurayı da dersleri siliyorum ve ders 2'yi göster yani diğer sayfadan gelen ders 1 ders 2'yi burada göster diyorum kaydettim bir ön izleme işlemine bakalım şimdi arkadaşlar sayfamı yeniledim dersler listesi bakın gördüğünüz gibi burada gördük arkadaşlar şimdi şöyle yapalım biraz da burayı güzelleştirelim sonra dersimizi bitirelim dersler
25:35 listesi style nokta pardon style eşittir bunu inline özel biçimlendirme olarak yazalım font size font size 2.24 olsun arkadaşlar virgül color 2 no red tamam şimdi şunları da inline değil de bunlar ortak olduğu için arkadaşlar style eşittir açtığımız parantezimi styles nokta dersler dersler ismini verdim şuraya geliyorum dersler 2 nokta
26:24 açtım font family de değiştirebiliriz evet ama şu an için renk onu giriş yapmadık font size üsttekini 24 demiştik 18 olsun rengi de arkadaşlar gri olsun kaydettim evet ana sayfaya yenilediğimde dersler listesi he peki bakın Python programlamada görünmedi python programlamada görünmesi için ne yapmam lazım arkadaşlar şunu alıp buradaki Python
27:12 programıma text bileşenime de bunu ne yapmam lazım eklemem lazım gördüğünüz gibi geri dönde çalışıyor dersler listesi butonumuz çalışıyor bu bir başlık olarak kaldı başlığımızı ortaya almak istersek son olarak bunu da gerçekleştirelim bu dersimiz burada tamamlanmış olsun şu başlığımızdı bunu ayrı bir viv içine alarak bu işlemi gerçekleştirebiliriz arkadaşlar kapattım ve şuradaki textimi kesip buraya koydum şuraya da diyorum ki style
27:57 eş align items 2 nokta center ortalı olsun evet gördüğünüz gibi birbirine çok yakın olduğunu düşünüyorsak bazı şeyler değiştirebiliriz ne gibi virgül margin 2.5 margin 2.5 diyebilirim arkadaşlar bir daha bakalım şimdi web sayfamızı bir yenileyelim gördüğünüz gibi 5px'lik bir mesafe oldu burada geri dön butonumuz da çalışıyor sayfalar arası gezilme ve
28:42 sayfalar arası veri taşınma işlemimiz bu kadardı arkadaşlar bundan sonraki konumuzda diğer örneklerimizle devam edeceğiz görüşmek üzere kolay gelsin
