0:02 merhaba arkadaşlar bugün Reagnative'de flex yapısından ve props kullanımından bahsedeceğiz arkadaşlar bunun için bir yeni bir proje oluşturdum rn Flex and Props isimli gördüğünüz gibi bu proje klasörüne yerleştim ve e React Native TV Navigation Reactnavigation.org org sayfasından eee sayfalar arası dolaşımla ilgili gerekli olan if ayarlamaları gerçekleştirdim gördüğünüz gibi 3 tane eklenti yüklüyorduk onları yükledim devamında da arkadaşlar burada yönlendirmelerimi yaptım bir prop sayfası bir de flex sayfası oluşturdum şöyle görüyorsunuz rnfs ile bu şekilde
0:48 getiriyorduk kaydediyoruz kayt ettikten sonra da arkadaşlar burada eee yönlendirme işlemlerimizi yapacağımız bu appjs'yi danışma olarak e ayarlıyor idik burada yönlendirme işlemlerimizi gerçekleştirdik bildiğiniz üzere paging RN paging konusunu anlatırken eee sefer arası dolaşım ve veri taşıma konusunu anlatırken bunlardan bahsetmiştik bir önceki örneğimizde de tekrar etmiştik buraya şimdilik hızlı geçtim o yüzden yapmamız gereken yapmak istediğimiz asıl konu flex yapısı şimdi burada biz ne yaptık arkadaşlar flex sayfasını yönlendir bu sayfanın adı ana sayfa olsun şeklinde söyledik peki flex yapısı neydi bir bakalım hep birlikte şimdi biraz açıklamaya çalışalım şöyle
1:34 ki React Native'de sayfadaki yer alan kutuların eee işte web tasarımındaki eee HTML'deki divlerin karşılığı burada v'di biliyorsunuz kutuların büyüklüklerini birbirine göre oranlarını ayarlamamızı sağlayan bir özellik arkadaşlar şöyle tarayıcı üzerinden bakabiliriz mesela bakın burada gördüğünüz işte yan yana iki kutu olunacaksa bu kutuğun yüzde kaç olacak ekrana göre yüzdeliği büyüklüğü küçüklüğü diğer kutuya göre büyüklüğü küçüklüğü veya bu örneğe de bakabiliriz mesela bakın bir dışta bir tek kutumuz var sonra bunun içerisinde %50 %50 bölünmüş bir kutumuz var sonra üst tarafta ise sanki 2'ye bir yani yü eee üçte turuncu 1/3te'i kırmızı olacak
2:20 şekilde bir kutumuz daha mevcut gibi yani kutuların birbirine göre oranlarını büyüklüklerini küçüklerini küçüklüklerini ayarlamaya yarayan bir özellik diyebiliriz arkadaşlar buna e ben kutu şeklinde söylüyorum daha anlaşılır olsun diye box zaten hani o şekilde de geçiyor eee şimdi bunların nasıl gerçekleştirildiğine yönelik bir örnek gerçekleştireceğiz bir örnek yapacağız arkadaşlar hep birlikte sizlerle şimdi şu flex sayfamdı şuradaki text ifadesini öncelikle bir siliyorum en dışta bir vivim var şunu söylemiştik zaten şunu hatırlıyoruz eee her türlü eee bir Reactnative projesinde arkadaşlar ne olması gerekiyordu en dışta bir tane kapsayıcının olması gerekiyor idi bu kapsayıcı view olabilir boş bir kapsayıcı
3:06 olabilir scroll vi olabilir yani farklı alternatifleri var scroll VI'i de biraz sonra props konusunda göstereceğiz zaten şu ana kadar hep vi yaptık burada da view yapıyoruz şöyle öncelikli olarak arkadaşlar bu view e en kapsayıcı view'me bir style vermek istiyorum eşittir süslü parantez içerisinde yazıyor biliyorsunuz styless nokta kapsayı bütün kutular bunun içinde olacağı için buna boxes ismini veriyorum peki bu kutumun içerisine arkadaşlar bu kutumun içerisine yeni bir view daha açabilirim peki burada da şöyle hemen buna da yeni bir style tanımlayalım
3:52 şurayı kopyalayayım arkadaşlar sadece en sondaki ismini değiştirerek devam edeceğim boxes değil box 1 olsun bu da hatta bir genel bir özellik kapsasın box diye birden çok stil yazılabiliyordu bunu söylemiştik onu da şöyle yapalım styles no box 1 olsun yani hem boxın hem de box 1'in özelliklerini içinde barındırsın diyorum süslü parantezimizi e unutmadan ha tabii birden çok e şimdi altını çizdi gördüğünüz gibi birden çok stil verdiğimizde buna bir süslü parantez haricinde bir de köşeli parantez yani bir dize eylemini göstermemiz gerekiyor arkadaşlar peki boxin içerisinde ne
4:37 yazsın arkadaşlar şöyle bir text ekleyelim buna kutu 1 yazsın bunun bittiği yere bir kutu daha oluşturmak istiyorum vıp şuradan alayım bunun aynısı olsun arkadaşlar eee yalnız box'ın özelliklerini barındırsın ve box 2 olsun yani box 2'nin özelliklerini de kapsasın diyoruz peki daha birkaç tane daha kutumuz olacak tabii ki devamında ise arkadaşlar box 2'nin bittiği yerde içinde değil de neresi şurada şuraya bir tabii kutu 2 diye yazayım bir
5:24 görünür hale getirmiş olalım kutu 2 e şimdi bunlar alt alta kutular oldu gördüğünüz gibi ya da yan yana bu tabii birazön biraz sonrale stille bunu biçimlendirebiliriz iç içte iç içe de kutuya kutular oluşturabiliyoruz şimdi bir de iç içe iki tane kutu oluşturmuş olalım arkadaşlar eee burada da style eşittir stylus nobx 3 sadece box 3 olsun ve box 3'ü aşağıya indirdim box 3'ün içerisine box 4 ve box 5 eklemek istiyorum e box 3'ün içerisinde bir kutu daha mesela şöyle kopyaladım burayı bunun içerisine
6:09 yapıştırdım ve dedim ki sen box 4 ol tamam box 4'ün bittiği yere de yani kutu 4'ün bittiği yere de bir kutu 5 eklemiş olalım şunun içerisine de kutu 4 şunun içerisine de kutu 5 şeklinde yazılarımızı yazmış olalım arkadaşlar iç içe kutular yapabiliyoruz tabii bunun içerisine bir kutu daha ekleyebiliriz açıkçası eee şimdi gelelim bu kutularımızı biçimlendirmeye arkadaşlar kutularımızı ayarladık peki ne yapacağız arkadaşlar mesela en dıştaki kutumuzdan başlayalım en dıştaki kutumuz ne boxes h boxes
6:56 nedir en dıştaki kapsayıcı şöyle bunu bir uygulamayı bir göndereyim bir çalıştıralım arkadaşlar bir dakika oradan anlatarak gitmeye çalışalım ne yazıyorduk mpx Expo Start nerede ön izleme yapacağımıza göre burada basacağımız tuş değişiyor idi web'de yapacaksak W e Android 1 cihazsa A harfi ve telefonda yapacaksak zaten yukarıda kare kod veriyor idi ben A harfine bastım şimdi şu Android cihazımıza yüklenmesini bekliyorum direkt bu sayfanın aşılmasını bekliyoruz çünkü e appjs bu sayfaya yönlendirme yapması gerekiyor arkadaşlar hata varsa da verecektir ona göre bakacağız evet bakın kutu 1 kutu 2 kutu
7:42 4 kutu 6 diye şey kutu 5 diye peş peşe yazılmış durumda kutu 3'ümüz yok şuraya bir de kutu 3 koyalım mı kutu 3 peki kaydettim eee nereye koyduk he boxa koyduk yanlış oldu eee bunu nereye koyacaktık arkadaşlar kutu 3 şuraya koyacaktık peki şimdi bakın nasıl görünüyor kutu 1 kutu 2 hepsi alt alta burada görebiliyoruz ama tabii bunların birbirine göre şimdi oranları büyüklükleri küçüklükleri bunlar nerede belirleyeceğimiz şeyler burada peki en dışta ne var demiştik boxes öncelikle boxes'tan başlayalım arkadaşlar baksız şimdi bunların hepsini kapsayan tam ekranı kapsayan şu kutu böyle düşünelim
8:29 çünkü en yukarıda başlıyor bakın en aşağıda bitiyor hepsini kapsadığı için ekranın tamamını kapatacak bu yüzden boxıa şöyle diyoruz diyoruz ki arkadaşlar sen boxsın ve arkadaşlar senin flex özelliğin 1 virgül bir daha arka plan verelim görelim background color ne olsun şimdi bir red diyeyim devamında da değiştireceğim arkadaşlar gördüğünüz gibi hani görünür olsun diye kırmızı yazdım bütün hepsini kapsayan bütün ekranı kapsayan bir kutu oldu peki buraya 1 yazdık bu neyi anlatıyor arkadaşlar 1 buradaki 1 aslında aynı özelliğe sahip bir kutu
9:15 daha yoksa içinde bulunduğu karenin ekranın ya da içinde bulunduğu kutunun tamamını kapsa anlamına geliyor flex1 bir tane daha aynı özellikle flexi olsaydı mesela bir altında daha olsaydı %50 %50 paylaşacakı arkadaşlar peki devam edelim ne var bunun haricinde burada hem box hem de box 1 var burada da box 2 var box ikisini de kapsıyor ortak bir özellikmiş o zaman bir öncelikle box'ı yazalım şuraya virgül dedik box 2 nokta süslü parantezimizi açtık arkadaşlar ne yapalım burada bunda flex yapısı vermeye gerek yok ortak bir özellik veriyoruz burada padding olsun padding 20 virgül margin verelim
10:02 arkadaşlar home eee ve bunun içerisindeki her şey ne yapsın arkadaşlar dikeyde de ortalansın aynı şekilde eee align items yazacaktık ıtems 2 nokta center diyerek ortalayalım peki bakalım nasıl bir şey oldu bir değişiklik var mı bakın kutu 1 ve kutu 2 yazısı ortalık hale geldi peki ama renklerinde arka planda bir değişiklik yok gördüğünüz gibi niye ortalı hale geldi çünkü ikisinde de box özelliği var henüz box 1 ve box 2'ye herhangi bir şey yazmadık box özelliğiyle biz dedik ki sizin birbirinizden eee uzaklığınız 10
10:48 birim olsun 10 piksel olsun paddinginiz e 20 olsun ve hem x hem y ekseninde hem de x eksen x ekseninde ortalanmış durumda olun dedik arkadaşlar peki Box 1'e geçelim box 1'e geçelim box 1de süslü parantezimizi açtık diyorum ki Box 1'e "Sen flex 1'sin." Flex 1sin pardon ve senin arka plan rengin düzgün yazamadık background color blue kaydettim bakıyorum şimdi hım flex
11:35 1 kocaman bir kutu çıktı buraya arka plandaki kırmızı biliyorsunuz Boxes'tan geliyor eee neden böyle oldu şimdi buraya baktığımızda daha küçük bir alan kaldı bize neden çünkü bütün kutuları itti ve orayı kapsadı şimdi box 2'ye de aynısını dediğimde ne olacak buna da bir bakalım box 2'yi direkt şöyle kopyalayabilirim arkadaşlar kopyaladım enter'a bastım sen box 2 ol dedim sadece rengini değiştireceğim dikkat ediyor musunuz ne hale geldi arka plandaki kırmızıyı kaldırabilirim şimdi artık beyaz yani direkt arka planı beyaz da yapabiliriz ama anlaşılır olsun diye bakın kutu 1 ve
12:21 kutu 2'nin büyüklükleri aynı neden çünkü kutu 1 ve kutu 2 neyin içerisinde arkadaşlar box'ın içerisinde ve büyüklükleri aynı neden ikisi de flex 1 ikisin ikisine şunu söyledik aslında biz siz içinde bulunduğunuz kutunun %50'si biriniz olun %50'si de biriniz olun bunu nasıl hesaplıyoruz basit aynı kutu içerisinde bulundukları için flex kaç 1 buradaki kaç 1 1 daha 2 e 1 biri senin senin olacak ikide biri de senin olacak çok basit bir mantık biri box 2'ye ait bu kutunun bu kutunun aynı kutunun iç aynı kutunun içinde bunlar aynı kutunun 1ide bir de box 1'e ait yani kutu 1'e
13:07 ait eide ne demek arkadaşlar %50'si bu nedenle bakın bunlar şu içinde bulundukları kutunun %50'si kutu 1 %50'si de kutu 2 oldu peki biz şimdi ne yapacağız arkadaşlar daha diğerlerini de verdikçe bu kutuların boyutlarının değiştiğini göreceksiniz çünkü eee ana kutumuz boxes box'ın içerisinde box 1 var box 2 var box 3 var box'ın içerisinde de box 4ile box 5 var doğal olarak arkadaşlar bunların da belli bir boyutları olacak şu an box 3 box 4 box 5 sadece şöyle baktığınızda birer satırlık bir alan kaplıyor şimdi ben box 3'e de şunu deseydim ne olacaktı peki copy deyip şuraya da box 3 deseydik ve grey değil de bu da white olsun beyaz
13:54 olsun bakın ne oldu şimdi arkadaşlar şu kutunun gördüğünüz kutunun arkadaşlar 1/3te'i kutu 1,3te'si kutu 2 3üçte 3'ü de pardon 1/3te biri'i de 1/3te biri bu yanlış söyledim düzeltiyorum 1/3te biri kutu 1çte biri kutu 2 1/3te biri de arkadaşlar kutu 3 oldu nasıl hesapladık 1 1 3 toplam 3 sen 3'ün birisin 3'ün 1/3te birisin sen de 1/3te birisin sen de 1/3te birisin şeklinde söylüyor hepsi aynı peki şimdi bakın şurada farklı bir durum olacak şu kutuyu gördüğünüz 3üncü kutuyu 3üncü kutunun içerisinde iki tane daha kutu var artık bu kutu 4 ve kutu 5 ne yapacak arkadaşlar sadece şu alanı
14:39 kullanacak kutu 3'ün alanını kullanacak bunları da yazalım arkadaşlar bunlar Bunları da yazalım box 4 diyelim ki box 4'e box 4'e şurayı kopyalıyorum yapıştırdım hatta burayı da şöyle alalım sadece renkleri değiştireceğim tekrar sen de box 5 ol senin rengin green olsun senin rengin purple olsun tamam bakalım hım gördük mü
15:25 arkadaşlar şimdi kutu 3 neresi kutu 3 şu üstteki kutu 2'nin bittiği yer yani şuradan başlıyor bu şekilde tamamen kutu 3 ve biz bir kutu 3'e dedik ki şuradaki yazının böyle beyaz kalmış olmasına bakmayın yazı olduğundan böyle kutu 3 yazısını kaldırırsam kutu 3'e beyazsın dedik çünkü şu yazıyı kaldırdığımda zaten o da gidecek arkadaşlar eee ve biz dedik ki senin içerisinde kutu 3'ün içerisinde bakın şurada kutu 3'ün içerisinde kutu 4 ve kutu 5 var yani iki tane kutu var ve bu iki kutuya dedik ki sizin ikiniz de flex 1'siniz yani flex 1 ne demek toplamda 2 box 4'e ait 2ide biri box 5'e ait yani %50'si box 4'ün %50'si ise box 5'in arkadaşlar kutu 3 içerisinde bunlara kalan alanın alanı
16:11 %50 %50 paylaşmış oldular gördüğünüz gibi peki burada bir şey daha söylememiz gerekiyor tabii bunları bu şekilde paylaşıyorlar ama neyi söylemeliyiz biz hep alt alta kutu yaptık e peki biz istediğimiz zaman yan yana kutu koymak istersek ne yapacağız mesela şunu demek istiyorum kutu 3'ün içerisindeki kutu 4 ve kutu 5 yan yana olsun alt alta deyile bu alanı dikeyde yan yana paylaşmasını istersek nasıl bir yol izleyeceğiz işte orada kutu 3'ün içerisine yönünü belirtmemiz gerekiyor arkadaşlar flex direction diye bir özellik var ve diyoruz ki senin yönün yani yan yana olsun senin içerisin içerindeki kutular bakın hım bakın bu sefer kutu 3 yazısı da yana geldi şu
16:56 kutu 3 yazısını bir kaldırayım her şeyi sanki sıkıştırıyormuş gibi oluyor ve böylelikle daha net görebilelim arkadaşlar bakın kutu 4 kutu 5 ve x'in de büyüklüğü nedir %50 %50 şeklinde gerçekleşiyor arkadaşlar neden çünkü ikisi de flex 1 şeklinde peki kutu 5'e flex 2 dersem ne olacak evet gördüğünüz gibi ekranın /3te'sini bu kaplayacak 1/çte birini de bu kapsayacak yani ekranın değil e kutu 3'ün içerisinde /3te'sini kutu 5 1/3te birini de kutu 4 kapladı e ben buraya 2 dersem ne olacak peki ne olacak tabii ki tekrar %50 %50'ye gelecek neden toplamda 4 yapıyor
17:42 bu kutunun içerisindeki fleksler e 4'ün 4te 2'si bu 4te bu ne demek %50'si bu %50'si bu demek 1000 de yazsanız aynısı olacak 500'e 1000 yazsanız 2'ye 1 yazmış gibi olacaksınız arkadaşlar oranaına göre çalışan bir yapısı var bunun bunların arkadaşlar peki bakın böyle yaptığımızda ise tam tersi bir durumla karşılaşacağız gördüğünüz gibi şu en başta bir boxesımız var gördüğünüz gibi şöyle bir şey yapalım bir padding 0 demek istiyorum aslında şu margin ondan kaynaklı bir durum gerçi şunlar arkadaşlar buna padding 0 değil
18:28 de şu margini bir kaldıralım ve kaydedelim şimdi baktığımızda evet daha net anlaşılır duruma geldi şu arkadaki kısım kayboldu gördüğünüz gibi eee ya da daha anlaşılır hal yani ya da bunu kaldıralım ne yaptım bunu tekrar geri getirelim arkadaşlar ve bu özelliği buraya da yazayım böylelikle tüm her taraf kırmızı arka plana sahip olsun hatta bu kırmızıyı da kırmızı olmasın white beyaz arka plana sahip olsun evet flex yapısı bu şekilde gerçekleşiyor
19:13 arkadaşlar gördüğünüz üzere şimdi ben şu kutubunun içerisine bir link koymayı planlıyorum ya da kutunun linkinin içerisine bu linke tıkladığımızda da yeni bir sayfa açılacak e detay sayfası veya dersler sayfası dersler sayfasına yeni bir component üzerinden props yoluyla verileri göstermeye çalışacağız bu örneğimizin diğer kısmında bu kon bu örneğimizde ne vardı bu uygulamamızda hem flex yapısı hem de props yapısı vardı gördüğünüz gibi gerçi props sayfamız var e bileşenini oluşturarak e props aktarmayı göreceğiz şimdi arkadaşlar peki ne demek istiyorum bir bakalım arkadaşlar şöyle eee öncelikle yapmamız
19:59 gereken bir şey var yapmamız gereken şey şu arkadaşlar bizim bilgilerimizi göstereceğimiz sayfayı oluşturmamız gerekiyor bunun için de şuraya proje klasörüme sağ tıklıyorum ve new folder diyerek component components diye bir klasör oluşturuyorum bu componentsin içerisine bilgiler diye bir veya dersler diye bir yeni bir bileşen oluşturuyorum dersler yanlış yazdım arkadaşlar şurayı hemen düzeltelim evet rnfs diyerek
20:44 RNFS enter diyerek tamamlamasını sağlıyorum şimdi burası bizim neyimiz olacak arkadaşlar burası bizim verilerimizin nasıl gösterileceğinin belirlendiği kısmı olacak yani bizim verilerimiz birazdan diğer ekranda göstermek istediğimiz verilerin eee nasıl gösterileceğini bu sayfadan belirleyeceğiz peki bu sayfaya aktarım nasıl gerçekleşecek profslar yoluyla gerçekleşecek profsler nasıl kullanılıyor hep birlikte göreceğiz arkadaşlar şimdi öncelikli olarak bu sayfamda ne yapmak istiyorum bunu anlatayım bu sayfanın eee derslerin detaylı olarak görüntülemek istiyorum diyelim ki dersin adı dersin fotoğrafı altında da dersin bir açıklaması ya da fotoğrafı açıklaması vesairesi yani sıralaması değişebilir şimdi bu viv'in
21:31 içerisinde şu texti bir sildim arkadaşlar ve bir tane resim olsun bunun içerisinde image hem böylelikle resim eklemeyi de ilk defa galiba görüyoruz style eşittir açtım parantezimi buna da bir şey vereyim stil vereyim stylus img dedim arkadaşlar eee tabii bunun bir de kaynağı olması gerekiyor source bu resim nereden görüntülenecek buna da pardon tekrar süslü parantezimizi img SRC diye bir isim veriyorum arkadaşlar böylelikle şunu diyoruz benim görüntülenecek olan özelliklerimin arasında resimler var peki güzel bu resimlerin altında bir view daha
22:19 olsun ve bu viv'in içerisinde de arkadaşlar bir text yer alsın eee bu textime de şöyle bir bileşen vermek ve başlık demek istiyorum başlık arkadaşlar e peki güzel şurası neydi bu props bu diğer sayfadan gelecek özellik işte arkadaşlar propslar yoluyla gelecek özellik buraya da eee diğerini yazıyorum başlık tamam bundan bir tane daha yazmak istiyorum şimdi arkadaşlar bu da açıklama olsun ve açıklama güzel şuradaki içerikler bakın
23:05 şuradaki süslü parantezin içindekiler dışarıdan başka bir sayfadan buraya gönderilecek başka bir sayfadan gönderilecek ve buradaki istediğim şekilde görüntülenecek arkadaşlar gönderecek olan sayfamızda props propsları orası gönderecek burası karşılayacak karşılayarak ekranda o özellikleri göstermeyi sağlayacak yani bu bilgiler şu an yok mesela burada bir resim olduğunu biliyoruz resim görüntüleyecek ama resmin kaynağı neresi belli değil bir metin var metnin içerisinde ne yazacağı belli değil e yine bir metin var bunun içerisinde de bir açıklama yaracakmış ama açıklamanın ne olduğu belli değil işte bunlar diğer sayfamızdan buraya propslar yoluyla gönderilecek arkadaşlar şimdi bunların bir de biçimlendirmesini gerçekleştirelim resmimizden başlayalım
23:50 ımg 2 nokta resmimizin genişliği arkadaşlar %100 olsun %100 ekranı tamamen kaplasın tamam yüksekliği ise bunu biraz sabit vermek istiyorum tüm fotoğraflar eee aşağı yukarı aynı görüntülensin istiyorum çünkü arkadaşlar yüksekliğine de 300 diyelim peki resmimiz için şu an iki özellik yeterli olacak indik aşağıya başka neyimiz vardı başlığımız var bir tane başlık iki nokta açtık süslü parantezimizi başlığımız nasıl olsun arkadaşlar eee ortalı olsun değil mi yani bir şekilde ortaya görünmesi gerekiyor ha bu arada tabii şöyle bir
24:37 şey de var eee bunun yatayda ortalayabilmek için şuradaki Viv'e de bir style vermem gerekiyor style eşittir stylus nokta metinler diyeyim buna bir de güzel şimdi başlıktan bahsediyoruz arkadaşlar başlığımız sadece büyüklük versek de olur buna zaten hepsi ortalı görünecek artık çünkü ne yapacağım şuradaki metinleri ortalayacağım ben peki geldim buraya ve diyorum ki senin font size 2 nokta senin font size 30 olsun başlıksın sen güzel şuraya sırasıyla yazmış gibi olalım metinler 2 nokta eee metinlerin bir peding koyalım
25:24 resme çok yapışmasın arkadaşlar diyelim ki senin paddingin 10 ve align items 2 no center güzel hatta şu paddingi bir sileyim görüntüye göre değiştiririz bunu arkadaşlar şuraya bir virgül unutmuyoruz ve son olarak da açıklama açıklama buna da sadece büyüklük vermeyi düşünüyoruz fot biraz zaman kazanalım f size 20 peki şimdi bakın bunlar herhangi bir şey göstermeyecek burada da herhangi bir değişiklik olmayacak çünkü arkadaşlar ne var eee gördüğünüz
26:10 üzere sadece bir özellik belirledim burada özellikleri belirledim nasıl görüneceklerini belirledim ama içerikler belli değil bunlar başka yerden gelecek peki nereden gelecek props sayfasından yollayacağız arkadaşlar prof sayfasından bunları yollayacağız şimdi yollama işlemini görelim işte hep birlikte eee Prof sayfasında şu texti sildim bu arada Scroll View'den de bahsetmiş olacağız şunu da siliyorum arkadaşlar ve diyorum ki burada bir scroll view var scroll view'ile view'in farkı view tam ekran yaparken scroll vi kaydırmalı ekran yapmamızı sağlıyor arkadaşlar işte burada şimdi açacağımız şey belirlediğimiz özelliklerini belirlediğimiz e nedir
26:55 arkadaşlar bileşenimiz bileşenimizi özelliklerini belirlemiştik bunu bir şöyle kapatayım şu aşağıdaki kırmızılık gitsin bunun içerisine şimdi o propslarımızı parametre olarak ekleyeceğiz arkadaşlar neydi ımg sdi değil mi bakalım bir tanesine evet img SRC peki img SRC'mizi yollayacağız eşittir dedik arkadaşlar basitüstlü parantez içerisinde eee bir resim için resmi yerini belirlemek için kullanılan bir özelliğimiz require peki nerede 2 slash [Müzik] h./h resmimiz nerede şimdi resimleri eklemedik değil mi o zaman şöyle yapalım
27:42 ya burada image diye bir klasör oluşturalım ya da sesin içine atalım ben şöyle yapmak istiyorum image diye bir klasör oluşturdum bunun içerisine resimlerimi atmak istiyorum ben resimleri önceden masaüstüne şöyle indirmiştim 3 tane dersin bunları sürükle bırak yoluyla şu image'in içerisine bırakıyorum arkadaşlar gördüğünüz gibi üçü de buraya ne yaptı geldi güzel ü tane şeyimiz geldi birinci dersimiz ne olsun reactnative'den bahsediyoruz o zaman reaknative olsun tabii şuraya yazıyorum şimdi şu slash'ı görünce artık buraya imagein geldiğini göreceksiniz arkadaşlar slash he göstermiyor burada artık elimizle yazmamız gerekiyor rn.jipekmiş bakın burada uzantıları tam yazmaya dikkat edin arkadaşlar güzel
28:29 resmimin aslında yolunu ne yaptım şu an verdim birinci özelliğimiz bitmiş oldu başka neyi var başlık vardı değil mi başlık başlık eşittir bir metin göndermek istiyorum buradan react native kurs dersi dersleri dersleri yazdım peki bir de açıklamamız vardı bunu da yine çift tırnak içerisinde gönderiyorum detaylı React native native kurslarımıza kursu içeriği şöyle yazalım kursu kursları
29:17 oldu değil mi kursu içeri güzel biraz zor yazdım evet bak bir tanesi buydu arkadaşlar bizim göndereceklerimizden peki şimdi bu ekranda artık görünür duruma gelecek hatta üçü diğer üçe çıkmadan bunu bir görüntüleyerek bakalım değil mi eee nasıl göreceğiz peki bunu herhangi bir şey yok hiçbir değişiklik yok diğer yerleri yaptık ama bu ekranda görebilmemiz için ne yapacağız arkadaşlar şurada flex yapısında bir şeyimiz vardı kutumuz vardı şurada text kutu 1 filan yazıyordu buraya bir hem de diğer konuyu hatırlamış olalım arkadaşlar bir yönlendirme işlemi gerçekleştirelim nasıl yani bir buton koyalım eee bu butonumuz da şey olsun touchable highlight olsun touchable highlight kapattım touchable
30:04 highlight da arkadaşlar on yapıldığında ne yapsın on yapıldığında bunu gönderebilmek için şöyle bir şeye ihtiyacımız vardı navigation navigate navigation değil mi tamam [Müzik] navigation navigate peki açtık hangi sayfaya gidecek arkadaşlar props sayfasına gidecek güzel bakalım ekranda görünüyor mu h dedi ki şu eksik he taşı aynen tamam şurada metin eksik diyor arkadaşlar buraya bir metin ekleyelim şimdi text
30:51 dersleri görüntülemek için tıklayınız böyle bir şey yazım h bakın burada bir neyimiz var artık butonumuz mevcut arkadaşlar navigate nerede nerede nerede neyimiz eksikmiş şurada bir açıklama var hım diğer tarafta karşılama kısmında bir eksiklik varmış hemen düzeltiyoruz evet arkadaşlar burada eksiğimiz ne eksiğimiz eksiğimiz değil yanlışımız props yazmışım props değil bizim neydi dersler gördüğünüz gibi dersler yazmamız gerekiyordu ben orada
31:37 bir yanlışım olmuş durumda hemen ne yapıyorum arkadaşlar şuraya dersler diyerek düzeltiyorum peki şimdi deneyelim evet sayfamıza gidiyor he image mevcut değil dedi bu sefer tamam güzel eee image nerede mevcut değil şurada değil işte arkadaşlar bakın buraya image ekli değil demişti bir daha tıklıyorum şimdi de img Src evet şimdi de sıkıntımız şu eee bunlar nereden geleceğini belirtmedik gördüğünüz gibi bunları nasıl belirtiyoruz peki bunları da şuradaki eee parantez içerisine süslü parantez içerisinde yazarak belirteceğiz arkadaşlar şimdi buraya geliyoruz süslü parantez
32:25 içerisinde img SRC virgül başlık virgül açıklama diyoruz ve kaydediyoruz buradaki isimlerle bu burada gönderdiğimiz isimlerin aynı olmasına özen gösterin arkadaşlar şimdi tekrar deniyorum evet gördüğünüz gibi resim gelmiş durumda ve altında bir başlık altında da bir açıklama yazısı gelmiş durumda şimdi tekrar ne yapıyoruz arkadaşlar diğer derslerimizi de ekleyelim diğer derslerimizi nasıl ekleyeceğiz props kısmına geleceğiz şunu alıyoruz kopyaladım altına yapıştırdım peki diğer resmim neydi resmin adını değiştireceğim sadece arkadaşlar AN no png Angler dersleri detaylı Angler ders
33:13 içeriği güzel bundan bir tane daha diğer resmim neymiş arkadaşlar py vbp açmazsa resmi değiştiririz python dersleri detaylı python tusu içeriği bakalım evet gördüğünüz gibi kaydırmalı bir resim resmin altında bir yazı yazının altında ve başlık daha doğrusu başlığın altında da bir açıklama olacak şekilde gösterdi peki biz bunları burada mı gösterdik tek hayır biz arkadaşlar dersler sayfasını oluşturduk burada bileşen olarak plant nasıl görüneneceğini vesaire burada belirledik arkadaşlar gördüğünüz gibi daha sonra da
33:59 bunun kaynaklarını buradan yolladık neyle propslar yoluyla props kullanımı da bu şekilde idi arkadaşlar şimdi bu uygulamamıza en baştan şöyle bir bakalım son kez geliyorum bakın ana sayfamız bu açıldığında burada flex yapısını gördük şurada bir dersleri görüntülemek için tıklayız yazısı var tıklayına tıkladığımda dersler sayfasına kaydırmalız kaydırmayı sağlayan buradaki profil sayfasındaki scroll view arkadaşlar kaydırmalı bir ekran ve derslerin resimleri altında başlıkları altında açıklamalar olacak şekilde gördük bunlara da yine tıklanabilir özellik vererek ne yapabilirsiniz başka bir sayfada detaylı içeriği görüntülenmesini sağlayabilirsiniz arkadaşlar şurada bir değişiklik yapmak istiyorum bir de şuradaki yazım çok
34:45 siyah ve görünmez halde kalmış şuraya geliyorum bu yüzden arkadaşlar bir stil verelim style bunu da inline inline yani yerel CSS gibi düşünelim böyle verelim ve bu uygulamamızı kapatalım eşittir çift süslü parantez yapıyor idik bunda font size 2.24 color 2 white diyerek iki tane özellik vermiş olayım h gördüğünüz gibi oldu yalnız ekrana sığmadı sığacak şekle kadar küçültelim ve gördüğünüz gibi çalışıyor evet bugünkü uygulamamızda iki tane özellikten bahsettik arkadaşlar bunlardan bir tanesi flex yapısıydı flex
35:31 yapısından gördüğünüz gibi ekranda kutuların birbirine göre nasıl duyurulacağını iç içe kutuların nasıl görüneceğini oran orantı olayını bahsettik bir diğeri de profsların kullanımıydı profslar kullanımını da gösterdik bir sonraki konumuzda görüşmek üzere kolay gelsin başarılar diliyorum
