Jadi mari kita gaya komponen ini di sana dan untuk itu, kami ingin menerapkan gaya ke komponen teks.
Komponen teks memang mendukung properti style karena Anda dapat memverifikasi
dalam dokumen resmi tetapi komponen teks sebenarnya mendukung lebih sedikit fitur penataan daripada yang dilihat dan oleh karena itu, saya
akan membungkus
ini menjadi komponen tampilan lain dan itu hanya komponen tampilan yang kami mengimpor dari React
Native, itu juga bagian yang saya maksud dengan Anda hanya punya beberapa komponen dasar tetapi mereka
akan membuat Anda sangat jauh karena Anda bekerja dengan pandangan dan tombol dan teks sepanjang waktu.
Jadi di sini saya akan membungkus teks ini dengan komponen tampilan pembukaan dan penutupan di sini dan sekarang di sini, kami memiliki
lebih banyak opsi gaya.
Sekarang lagi, saya tidak akan menggunakan gaya inline di sini
tetapi menambahkan gaya ke stylesheet, misalnya
kita bisa memberi nama item daftar ini tetapi nama terserah Anda dan katakanlah di sini kami ingin memiliki padding 10, mari
kita mungkin memberikan itu warna latar belakang kode hex abu-abu ini di sini, berikan warna perbatasan hitam dan juga lebar perbatasan satu dan sekarang mari kita tetapkan item daftar sebagai
gaya untuk tampilan ini dengan merujuk ke gaya. listItem di sini dan dengan itu jika
kita menyimpan ini, sekarang item daftar kita akan terlihat sedikit lebih baik, pelajari Bereaksi
Asli, beginilah tampilannya. Sekarang beberapa jarak mungkin juga akan menyenangkan,
kita dapat mencapainya dengan margin, padding adalah jarak antara perbatasan dan konten, margin adalah jarak antara perbatasan dan konten sekitarnya,
sehingga elemen lain di sekitarnya
dan di sana, kita dapat menambahkan margin 10 untuk menambahkan margin ke semua arah, kita juga
bisa menambahkan margin ke atas atau ke bawah atau dan itu
adalah sesuatu yang tidak ada di CSS, Anda dapat menambahkan margin vertikal 10 untuk memiliki margin di atas
dan bawah tetapi tidak kiri dan kanan
dan itu adalah contoh bagaimana ini didasarkan pada CSS tapi itu tidak sama karena margin vertikal tidak akan menjadi properti
yang Anda miliki di CSS, Anda memilikinya di React Native. Jadi jika sekarang kita simpan itu
dan kita tambahkan pelajari React Native di sini, sekarang Anda melihat ada
beberapa jarak antara item-item itu dan tentu saja juga di iOS jika kita melakukannya di sana.
Jadi ini sekarang menambahkan barang-barang kami dan sementara kami mungkin masih belum memenangkan penghargaan kecantikan, ini adalah awal yang baik setidaknya dan kami akan menyelam lebih
dalam ke gaya dan semua yang dapat Anda lakukan di sana nanti dalam kursus ini,
kami hanya harus mendapatkan tentu saja selangkah demi selangkah.
Sekarang satu hal yang harus kita sesuaikan sekarang, kuncinya di sini harus selalu berada pada elemen root dalam daftar Anda, jadi
elemen yang
Anda ulangi dan kami tidak hanya mengulangi teks lagi, sebaliknya kami sekarang ulangi
seluruh tampilan, jadi kunci
harus ditambahkan ke tampilan di sini, bukan ke teks dalam tampilan. Itu sebabnya saya mendapat peringatan ini, kesalahan ini lagi,
sekarang dengan
kunci dipindahkan ke tampilan alih-alih teks, ini harus hilang.