Ders4 RN Buton Türleri ve Listeleme

Kısa Özet

Bu video, React Native'de buton türleri ve listeleme işlemlerinin nasıl yapılacağını gösteriyor. Video, React Navigation'ı kullanarak sayfalar arası geçiş işlemini nasıl gerçekleştireceğinizi, farklı buton türlerini nasıl kullanacağınızı ve Flat List bileşenini kullanarak listeleme işlemini nasıl yapacağınızı açıklıyor.

  • React Navigation'ı kullanarak sayfalar arası geçiş işlemi
  • Farklı buton türleri: Touchable Highlight, Touchable Opacity, Touchable Without Feedback
  • Flat List bileşenini kullanarak listeleme işlemi

React Navigation ile Sayfalar Arası Geçiş

Bu bölümde, React Navigation'ı kullanarak sayfalar arası geçiş işlemini nasıl gerçekleştireceğinizi gösteriyor. React Navigation'ı projenize eklemek için Reactnavigation.org sitesinden gerekli bileşenleri kopyalayıp projenize dahil ediyorsunuz. Daha sonra, App.js dosyasında ana sayfanızı tanımlayıp React Navigation'ı kullanarak diğer sayfalara yönlendirme işlemini gerçekleştiriyorsunuz.

Buton Türleri

Bu bölümde, React Native'de kullanılabilen farklı buton türlerini ele alıyor. Touchable Highlight, Touchable Opacity, Touchable Without Feedback gibi buton türlerini gösteriyor ve her birinin nasıl kullanılacağını açıklıyor. Touchable Highlight, butona basıldığında bir vurgulama efekti oluştururken, Touchable Opacity, butona basıldığında opaklığı değiştirir. Touchable Without Feedback ise herhangi bir geri bildirim animasyonu sağlamaz.

Listeleme İşlemi

Bu bölümde, Flat List bileşenini kullanarak listeleme işlemini nasıl yapacağınızı gösteriyor. Flat List, büyük veri kümelerini verimli bir şekilde listelemek için kullanılır. Video, Flat List'i kullanarak bir ders listesi oluşturma örneğini gösteriyor. Ayrıca, Flat List'in nasıl biçimlendirileceğini ve özelleştirileceğini de açıklıyor.

Summarize any YouTube video in seconds

Get summaries like this one for any video, in your language, with the free Summ app.

Download on the Apple Store
Get it on Google Play

Transkript

YouTube Transcript Generator

0:02 merhaba arkadaşlar 4 dersimizde yeni bir proje oluşturdum RN button and list Bu dersimizin konusu Refive'de kullanılabilecek buton türleri ve listeleme işleminin nasıl yapılacağını göstermek Eee ismi bu yüzden RNO button and list arkadaşlar Butonlar ve listelerden bahsedeceğiz E öncelikle projeme geçiş yapıyorum proje klasörüme geçiş yaptım Şimdi e bir önceki dersi de tekrar etmek adına hızlı bir şekilde bu projeme eee sayfalar arası dolaşım işlemi için gerekli işlemleri gerçekleştireceğim arkadaşlar Bunun için ne yapıyor iddik reactive navigation eee Reactnavigation.org sitesine geçiş yapıyoruz arkadaşlar

0:48 Burada getting starteda ya da işte dokümantasyonun ilk sayfasına öyle söyleyelim Geri geliyoruz Burada kopyalayıp almamız gereken birkaç tane ne vardı arkadaşlar bileşen vardı Şöyle yaptım Reddox dedim Hemen aşağıya geliyorum Evet bir tanesi buydu Bunu kopyalıyoruz ve projemizin içerisine dahil ediyoruz Birincisi İkincisi expa kullanıyoruz biz Expo kullandığımız için bu ikinci seçeneği de bakın kopyalıyoruz Tekrar projemizi dahil ediyoruz Ve devamında Expo kullananlar ne diyor buradan Hello R navigation sayfasına gitsin diyor Hello React Navigation'a geçiyorum ve şuradaki ifadeyi de kopyalıyorum projeme arkadaşlar Bunu da dahil

1:36 ediyorum Sonra da diyor ki arkadaşlar appjs'ye bunu al Bakın appjs'ye bunu al Appjs sayfamı buradan açıyorum Projenin içerisinden hepsini sildim ve oradan kopyaladığım alanı buraya yapıştırdım Eee bizim ana sayfamız bu değildi arkadaşlar biliyorsunuz Dolayısıyla burayı siliyoruz ve kaydediyoruz Şimdi hemen yeni bir ana sayfa oluşturalım kendimize New folder SC SC'nin içerisine bir new folder daha Screens Screens'in içerisine de sağ tıklayıp new file deyip ana sayfa FS diyoruz Buna da RNFS enter diyerek ana

2:21 sayfamızı oluşturuyorik Peki ana sayfamız şu an hazır EPPJS'miz ne yapacaktı arkadaşlar yönlendirme yapacaktı Evet Hemen hatırlamak adına şurada gördüğümüz ismi şu alana yazmamız gerekiyordu arkadaşlar Komponent alanına Ana sayfa yazarken bana öneri veriyor Öneriyi kabul ettiğimde import kısmını kendisi ekliyor idi Şuradaki de bizim verdiğimiz bir isimdi Bu sefer home olarak kalsın E şu an tek sayfayla çalışacağım Daha sonra liste sayfasını da oluşturacağım arkadaşlar Buraya initial root name home diyerek başlangıç sayfasının da home yani ana sayfa olduğunu belirtiyorum Peki şu ana kadar herhangi bir şey var mı yok Bir projemizi ön izleyerek ana sayfamız açılıyor mu yani ekranda şu ana sayfa yazısını

3:06 görebiliyor muyuz buna bir bakalım Arkadaşlar projemizi ön izlemek için Expo pardon NPX Expo Start diyor idik Devamında ön izleme seçenekleri geliyordu bizim için arkadaşlar Bir önce Android stüdyomuzu da görüntüleyebiliyor muyuz bir deneyelim Mevcutta açık şu an Android stüdyomuz Bakalım bir görüntüleyebiliyor muyuz android Studio yani eee pardon Android Stü demişim Android emülatörümüzü de görüntüleyebiliyor muyuz doğru ifade bu olacak Android emülatör bazen donuyor arkadaşlar Bu yüzden tarayıcıda da deneyebiliyoruz Bir önceki dersimizde yaptığımız gibi Bakalım Evet ana sayfa yazısı geldi Yani şuradaki yazıyı görebildik Dolayısıyla hpps çalışıyor Burası da

3:51 çalışıyor Peki ana sayfamda neyi göstermek istiyordum buton türlerini Güzel Buton türlerinden bahsedeceğiz Buton türlerini nereden görebiliriz buraya geliyorum tekrar Google'a Google'a React Native yazıp arkadaşlar ilk çıkan sitelerden biri olan Reactnative Dev yani buru açıyoruz Burada React Native'in dokümantasyonu var burada arkadaşlar Ben dokümantasyonu get startedla açab kendim inceleyebileceğim gibi şurada search bölümüne ne arıyorsanız bunu da yazabilirsiniz Mesela buton yazdım ve butonla alakalı kısımları görmek istiyorum Eee aslında butonumuzun bir tanesini bir önceki dersimizde yaptık bildiğiniz üzere arkadaşlar Burada buton seçenekleri var Bakın buraya bir buton konulmuş arkadaşlar buton parametresi Peki bunu

4:37 kopyalıyorum Geliyorum Diyorum ki burada bir butonum var Böyle bir buton Şöyle sağ tıklayıp format doküment diyerek görünümünü de biraz iyileştirelim Daha anlaşılır bir görünüm olsun Peki şimdi bakın muhtemelen hata verecek Neden çünkü property buton does not doesn't doesn't exist diyor Yani mevcut değil diyor Ne için diyor şurası için söylüyor arkadaşlar Siz diyor bunu import etmemişsiniz Import ettik kaydettim Ve şuradan bir yeniden bir gönderelim projemizi İnşallah hata donmadan açar

5:24 bunu Donarsa yine web'e döneceğim arkadaşlar Açılmayacak gibi Şuradan bir web'e göndermek isteyeyim Şunu verecek bize Kopyaladık CtrlC ile sunucuyu durdurdum Kopyaladığım özelliği yapıştırdım ve ekledim Eklenti olarak Eklenti olarak ekledim Şimdi tekrar ön izlemeyi başlatıyorum W'ya basarak web'de açılmasını sağlıyorum İsmimiz buraya geldi Proje ismimiz Ekranda görmeyi beklediğimiz şey ne arkadaşlar learn More yazısı Bakalım Bir buton ve learn more yazısını

6:09 görmek istemiştik Şu an için görüntüleyemedik Bir bakalım neden Önce şu color parametresini bir silelim Kaydediyorum çünkü E tamam Tekrar yenileyeceğim şimdi sayfayı Yine görüntüleyemedik hemen şuraya projemize geliyoruz Heh Evet arkadaşlar bunu görüntüleyememe sebebimiz sebebimiz şu Onpress yani butona tıklandığında bu fonksiyonu çağır Yani onpress learn morn diye bir şey işleminin gerçekleşmesini istiyor Ama böyle bir işlem henüz mevcut değil Dolayısıyla şöyle yapalım Şunun içini bir boş

6:55 bırakarak basıldığında ne olacak eee hata verebilir Yine bir daha deneyelim yenileyelim Evet E butonu en azından görebilmek adına şunu şimdilik boş bırakıyorum Sonrasında bunun içerisine başka bir şey yazacağım arkadaşlar Birlikte göreceğiz zaten Evet bakın learn more butonumuz çalıştı Peki buradaki learn more nereden geliyor buradan geliyor arkadaşlar Buna diyoruz ki daha fazlası için tıkla Kaydettim Yeniliyorum Daha fazlası için tıkla Bakın gördüğünüz gibi Ve butonumuzun da bir eee neyi var animasyonu mevcut Peki

7:44 şu alttakini siliyorum Şimdi kullanmıyoruz bunu Kullanmayacağız Biz de uygulamalarımızda bir açıklama metni olarak yer alıyor Peki onpress ne iş yapıyordu peki burada onpress tıklanıldığında ne olacağını belirtiyor Burada tıklanıldığında bir önceki dersimizde gördük İşte bir sayfayı aç başka bir sayfaya yönlendir gibi işlemler yapabiliriz Ya da bir popup uyarı verebiliriz Ha bu esnada popup uyarıyı nasıl verebiliriz bunu görelim Hemen alert Açtım parantezi Popup versin Detay sayfasına yönlendiriliyorsunuz gibi bir uyarı vermiş olsun Yani daha fazlası için

8:30 tıkladığında tabii bir yönlendirme işlemimiz gerçekleşmeyecek Şu an öyle bir amacımız yok Sadece uyarı verdireceğiz arkadaşlar Geldik Yeniledim sayfayı Bakın detay sayfasına yönlendiriliyorsunuz dedi Tıkladım Gördüğünüz gibi detay sayfasına yönlendiriliyorsunuz İşlemi geliyor arkadaşlar Peki burada beklemediğimiz bir şey oldu Hemen bir bakalım Butona tıklayınca değil de eee sayfamız yüklenince gerçekleşti Düzeltelim hatamızı Buradaki hatamız çok bariz arkadaşlar Biz direkt alert vermişiz Yani bu sayfa yüklendiğinde bir alert çalışıyor Uyarı papup açılıyor Burada arrow function'a ihtiyacımız var Yani tıklanıldığında ne olması gerektiğini söylememiz gerekiyor Onpress Bunu

9:16 unutmuyoruz Eee süslü parantezimizi açıyoruz ve tıklanıldığında yapılacak işlemi belirtmek için bunu buraya ekliyoruz arkadaşlar başa Sonrasında popup uyarımızı gösteriyoruz Popup yapmak için alert detay sayfasına yönlendiriliyorsunuz ifadesini yazıyoruz Alert popup menü Papup bildirimi açıyor Menü değil ama bildirim açıyor arkadaşlar Bir sayfamızı yenileyerek bakalım Şimdi şu gitsin Evet gördüğünüz gibi bir uyarı popup'ı geldi arkadaşlar Birinci butonumuz buydu Peki diğer butonlarımıza geçelim Şimdi neredeydi burada arkadaşlar bakın şunlarının her biri bir buton Touchable highlight touchable opacity touchable without fitbank T birbirlerinin hepsinin farkını görmüş olalım Touchable highlight'a tıklıyorum

10:04 Önce bir sayfamı yenileyeyim Evet Touchable Highlight'a tıkladığımızda bakın şurada bir örnek var E hemen burayı bir açıklayayım Bir buton olmuş Bir opacity vermiş Görünürlükle alakalı bir şey arkadaşlar Arka plandaki renkle alakalı bir underlay gölgelendirme gibi düşünebiliriz bir renk vermiş ve basıldığında basıldı butona tıklandı gibi bir uyarı verdirmiş Aynı zamanda da my component'i çağırmış Peki my component nereden çağrılmış işte burada şu function Bu ne yapmış peki ekrana my componenti yazdırmış Şöyle yapalım Kopyalayalım bunu arkadaşlar Ve

10:53 projemizi şuraya dahil edelim Peki burada unutmamamız gereken bir şey var Function burada olmayacak arkadaşlar Function'ı siliyorum O nedenle function return'ün üstünde şurada bir fonksiyon olarak yer alacak arkadaşlar Fonksiyona henüz ihtiyacımız yok aslında Bunu tamamen alayım Bana benim için şu an buton yeterli Buton nasıl bir buton oluyor bunu görmemiz gerekli Evet Touchable highlight Buraya ikinci bir buton olarak ekledim arkadaşlar Touchable highlight'ı Şu my component yok artık Yukarıdan sildik Çağırmayacak bu nedenle bu fonksiyonu Şuraya da şöyle bir alet vermiş ve buna ben de şöyle yazayım Bu sefer butona tıkladınız Böyle bir bildirimde bulunsun arkadaşlar Peki şu

11:41 an için ekranda bir hatamız görünmüyor Sayfamızı şuraya gelip projemizi bir yenileyelim Butonumuzu yine göremedik Bir bakalım eksiğimiz ne oldu Evet Eee butonumuzun içeriğini eklemedik arkadaşlar Yani neresi bunun metni buraya bir metin ihtiyacımız var Dolayısıyla buraya bir ne yapıyoruz text ekliyoruz ve eee butona tıkla Böyle bir metin olsun Format dokümanı yaptım Tekrar arkadaşlar bir bakalım yenileyelim Yine görüntüleyemedik Tekrar

12:27 bakıyoruz başka ne eksiğimiz var diye Evet E eksiğimiz yine çok bariz Biz kopyala yapıştırılı aldığımız için yukarıya import etmemiz gerekiyor bunu Touchable highlight'ı arkadaşlar import etmediğimiz için de görünürlüğü olmuyor Tabii biz bu arada e tarayıcıda görüntülediğimiz için hataları göremiyoruz ama mesela şöyle bakalım Kaydettim Bunu bir hata var aslında şu an Tarayıcı bunu ne yapıyor arkadaşlar böyle boş çıkartıyor Eee ama biz bunu burada görüntülemek istediğimizde yani emülatörde açtığımızda bakın emülatörde diyor ki zaten mevcut değil diyor Yani touchable highlight'ı eklememişsiniz diyor Dolayısıyla hatamızı aslında söylüyor Hatamızı biraz bulmaktı Bu yüzden bazen emülatörü doğrudan kullanmadığımız için sıkıntı

13:12 yaşayabiliyoruz Ya da Android cihazımızda da görüntüleyebilirdik bunu Ekledim Peki emülatörümüz madem çalışıyor bakın daha fazlası için tıkla Detay sayfasına yönlendiriyorsunuz Butona tıkla İşte gördüğünüz gibi bakın Butona tıkla diyorum ve butona tıkladınız diyor Peki buradaki nedir şunlar arkadaşlar Opasity mesela 0.9 diyerek deneyelim Bakın animasyonun şeklini görüyorsunuz arkadaşlar Bunlar üzerinde kendiniz değişiklikler yapabilirsiniz Peki bu ikinci butonu kullanımımızdı Diğerlerine

13:58 de bir bakalım hızlı bir şekilde [Müzik] Eee evet bakın arkasında bir gri bir alanda geliyor Peki 3ün butonumuz arkadaşlar touchable opacity Touchable opacity geldik Bakın sadece şurayı alarak devam edeceğim Taşabil opacity Yukarıdaki kısımları şu an almıyorum Taşıabil opacity sadece şu kısım bir buton oluştursun diye bunu aldım İkinci butonumun altına şuraya ekledim bunu da arkadaşlar Bu da 3üncü butonumuz oldu Bir styles vermiş bu arada touchable highlight'a da styles verebiliriz Yalnız butonda farklı parametreler var Color

14:45 parametresi gibi Style stale de kendi parametreleriyle yapılıyor Bu nedenle şu butonları kullanmak biçimlendirme açısından daha iyi arkadaşlar Buton 3e tıkla dedim burada metin olarak E şuraya da bir format dokümant diyelim Tekrar basıldığında ise ne yapsın arkadaşlar şuradaki işi yapsın Kopyala Buton 3'e tıkladınız diye uyarı versin Peki styles buton bir styles verelim buna Bunu da görmüş olalım Şöyle şuraya

15:30 geldim Button muydu bakalım Button Evet buton 2 nokta açtım arkadaşlar Diyorum ki font size 2 14 color 2 Blue virgül e font weight 2 nokta işte kalınlığını seçmek için bir parametre Eee bir de margin verelim Üsttekinden biraz daha uzaklaşsın Hatta margin tab diyerek

16:16 5 Neden böyle oldu şöyle bir şey olacak çünkü Target up dedik Bakalım Hım Touchable opacity mevcut değil dedi Bakın bu sefer direkt görüntüledik Eee buradan bakmış olsak yine göremeyeceğiz arkadaşlar Yine hatadan dolayı hiçbir şey ne yapacak çıkmayacak Hemen şuraya geliyoruz virgül hangisini kullanırsak buraya bunu eklemek durumundayız arkadaşlar Çatı taşı opasity ekledim ve bakın buton 3'e tıkla Buton 3'e tıkladınız şeklinde biraz daha arayı açarak bir ne yapmış durumda buton yapılmış durumda 4üncü ve son butonumuzdan da bahsedelim arkadaşlar Şuraya geldik Touchable without feedback

17:03 Birbirleri arasındaki farklara inceleyebilirsiniz Hemen touchable without videout feedback Bakın açma kapama ibaresiyle şuradan kopyalıyorum Siz isterseniz ekrandan da yazabilirsiniz arkadaşlar Ben kopyala yapıştırla devam ettim ve şuraya yapıştırdım Basıldığında yine şöyle bir bildirim gerçekleşsin Buton 4 olsun Bu da buton 4'e tıkladınız Buton 4'e tıkla Peki yine bunda da buton parametreleri bakın buton stylar geçerli O zaman şunu da şöyle yazayım Buton 2'ye 2'ye

17:50 tıkla Buton 2'ye tıkladınız Böyle olsun bu da arkadaşlar Peki şu da buton 4'e tıkla Bakın herhangi bir şey yok Kopya yapıştırla direkt aldım E touchable without feedback Herhangi bir geri bildirim olmaması demek Yani bu animasyonla alakalı bir şey aslında Olmamasını anlatıyor Önce web'de bir ön izleme yapalım Hım Neden olmadı artık biliyoruz değil mi hemen yukarı geleceğiz Touchable without feedback'i şuraya ne yapacağız arkadaşlar touchable without feedback'i buraya ekleyeceğiz Eksik olduğunu biliyoruz Burada bakın buton filan böyle üstüne geldiğimde böyle el işareti vesairesi çıkmıyor ama bu buton ve tıkladığımda çalışıyor Hemen buraya

18:36 bakalım Gördüğünüz gibi diğer butonlara tıklıyorum Bu da çalışıyor Buna tıklıyorum Bu da çalışıyor Burada bunlara tıkladığımda bir soluklaşma arka planda bir değişiklik meydana gelirken bunda herhangi bir şey yok Butonum doğrudan çalışıyor Herhangi bir geri bildirim animasyonu gibi bir işlem yok Ve butonumuz bu şekilde gerçekleşti arkadaşlar D tane buton kullanımını böylelikle görmüş olduk Peki şimdi bir de bir sayfa daha oluşturayım Burada da liste örneğini yapalım arkadaşlar Sağ tıklıyorum New file ders listesi dedim Ders listesi

19:21 dersler JS Peki RnFS güzel Ne yapacaktık bunu öncelikle şurada tanımlamamız gerekiyor Yapıştırdım Şuraya diyorum ki dersler Buraya da diyorum ki dersler Kendisi import etti Güzel Şu ilk butonumu tıklanıldığında dersler sayfasına gidecek şekilde yapılandırayım arkadaşlar E onpress Evet Şurası Ne yapacağız navigation navigation nokta nokta navigate Açtık parantezimizi

20:06 ve dersler sayfasına git Bu yeterli olacak mı hayır Şuraya da gelip navigation yazarak bunu eklememiz lazım Şuraya da açıklamamızı yazalım Dersler sayfası bakalım Evet dersler sayfası Gördüğünüz gibi dersler sayfasına gidiyor Dersler sayfasına da arkadaşlar bir liste oluşturacağız Şimdi buraya geldim ve dersler listesi diye bir başlık atayım Önce şuraya gelip arkadaşlar burada derslerimi tanımlamak istiyorum const

20:53 dersler dedim ve derslerimi tanımlama işlemime pardon bu değildi arkadaşlar başladım Şimdi ne yapacağım burada bir liste oluşturmak istiyorum arkadaşlar Eşittir köşeli parantezimi açtım Süslü parantezimi açtım ve artık derslerimi oluşturuyorum ID 2.1 ve name 2 no Python diyelim Güzel Burayı şuraya bir virgül koyayım Bunu daha sonrasında kopyalıyorum Kopyaladım 5 tane dersimiz olsun Hemen düzenleyelim bunları 2 2

21:40 3 4 5 Bu react olsun React native olsun Java diyelim arkadaşlar Bunlar sizi rastgele bir şeyler diğer derslere yazabilirsiniz Diğeri de C# olsun Aklıma hızlıca gelenler Bir ders listesi oluşturduk şu an Şu an bu listeyi aşağıda nasıl kullanabiliriz bundan bahsedeceğiz arkadaşlar Yanlışlıkla bastım Bunu liste yapabilmek için kullanacağımız e bileşen ise flat list arkadaşlar Reactnative.dev dokümantasyonundan yine bakabileceğimiz gibi flat list diyerek

22:26 bir arama yaptırıyorum burada Flat list ve çıkan sayfaya tıklıyorum Bakın burada flat list kullanımını göreceğiz Zaten eee şuradaki kod kısmını biraz aşağı indirmem lazım Şurası bakın flat list Flat list için gerekli olan kısım sadece burası arkadaşlar Yani yukarıda birçok şey var Altta da biçimlendirme kısmı var Gördüğünüz gibi biçimlendirmeyi de biz kendimiz yaparız birazdan arkadaşlar Flat list için bunu alıyorum Ne yapacağız geleceğiz eee kod

23:13 bölümümüzde şuraya dersler listesi yazısının altına yapıştırıyorum Peki burada değiştirmemiz gereken şeyler ne data nereden gelsin data şuradaki derslerden gelsin Derslerden O zaman datayı şurayı siliyorum ve diyorum ki burası dersler olacak Güzel Peki item Ayırsın Ekrana da neyi bassın arkadaşlar eee item Name'i bassın Peki buradan ben küçük bir değişiklik yapmak istiyorum Render item kısmında E render item olarak basması yerine arkadaşlar item'dan sonra bakın değiştirdiğim kısım sadece şurası olacak Hemen bakalım Şu item kısmını siliyorum

24:01 Arkadaşlar buraya ben bir text oluşturmak yani burada bir text göstermek istiyorum arkadaşlar Bunun için de bir süslü parantez açıyorum ve süslü parantezimin içerisine return yazarak return yazıyorum Şimdi de text ekliyorum buraya Hatta bunu alt satır alayım Şöyle biraz daha anlaşılısı olsun Text Tamam Bu teksimin içerisinde de ne olacak ne olacak arkadaşlar eee item nokta name Sadece isimleri göstermek istiyorsak item Name olacak Tabii buna style verebiliriz Şuradan şu an style

24:46 olmadan bir görüntülemeyi deneyelim Eee tabii şöyle bir durum var Şu yukarı gelip flat list'imizi de bir ekleyelim buraya Fat list kopyala yapıştırı yaptığımız için almama ihtimali vardı Dersler sayfası diyorum Evet gördüğünüz gibi dersler listesi karşımıza geldi arkadaşlar Peki eee bir iki biçimlendirme işlemi yaparak bu dersimizi tamamlayalım Style eşittir pardon direkt şunu yapayım Arkadaşlar style eşittir açtım parantezimizi Bir süslü daha açayım buraya sadece font size 2.24 diyerek

25:34 bunu bir biraz büyütmek istiyorum Şuraya da geliyorum Style 2 nokta pardon eşittir açtık süslü parantezimizi eee align items 2 no center Peki bu viwin içerisindeki her şey ortalansın dedim Her şey ortalandı gördüğünüz gibi Eee dersler listesini ortalamış olalım Şuraya bir view daha ekleyeyim arkadaşlar Peki bu vivimi de kestim ve şuraya yapıştırdım Kaydettik Buze de diyelim

26:22 ki [Müzik] kopyaladım ve align item flex start yani başa koy bakalım Evet ya sola hizalı koy anlamına geldi Sola hizaladı Biraz önce ortalıydı Güzel Her şey şu ortaya al diyor Bu da başa al diyor tabii ki H Güzel Şimdi ne yapalım arkadaşlar bir de burada şey de görünsün ID'si de görünsün item Ve bunların arasında bir tire olsun Daha iyi oldu Bu textimize de diyelim ki style

27:10 eşittir süslü parantezimizi açtık stylus no dersler Şuraya da dersleri biçimlendirmek istiyorum Font size 2 18 virgül color 2 no white virgül background color 2 no red margin 3 2.3 3 birbirinden de uzaklaşsın

27:56 biraz Böyle bir biçimlendirmemiz oldu Çok güzel görünmedi Şunu yapmak istiyorum Şununkini kaldırmak istiyorum arkadaşlar [Müzik] Şurayı sildim Hepsi en başa geldi Güzel

28:44 Böyle daha ideal sanki Hatta bunu sadece şurada tutarsak ve center dersek daha bir ideal olabilir mi [Müzik] olmadı Peki son bir şey Sadece başlığımızı bir Viv'in içerisine alalım ve başlığımızı ortalayalım arkadaşlar Şunu aldım ve başlığın altına yerleştirdim Ve en sona buna bir style eşittir align items 2 no

29:30 center format docum Tamam Başlığımı ortalı diğerleri sola hizalı olarak arkadaşlar yazmak istedim Tamam gayet de oldu Şu 3 biraz az gibi 5 olsun Hatta buna bir de sanki padding versek daha iyi olacak gibi Bu da 5 olsun Tamam bu daha ideal oldu Evet bu dersimizde de arkadaşlar buton türlerinden ve listelemenin nasıl yapılacağından bahsettik Listeleme için flat list kullandığımızı belirttik Butonlarımız için de 4 farklı buton türü

30:15 gördük arkadaşlar hep birlikte Bir sonraki dersimizde görüşmek üzere Başarılar diliyorum Kolay gelsin

Share

YouTube Video Özetleri