1 00:00:02,310 --> 00:00:08,520 Jadi mari kita gaya komponen ini di sana dan untuk itu, kami ingin menerapkan gaya ke komponen teks. 2 00:00:09,120 --> 00:00:12,780 Komponen teks memang mendukung properti style karena Anda dapat memverifikasi 3 00:00:12,780 --> 00:00:19,680 dalam dokumen resmi tetapi komponen teks sebenarnya mendukung lebih sedikit fitur penataan daripada yang dilihat dan oleh karena itu, saya 4 00:00:19,710 --> 00:00:20,610 akan membungkus 5 00:00:20,970 --> 00:00:26,030 ini menjadi komponen tampilan lain dan itu hanya komponen tampilan yang kami mengimpor dari React 6 00:00:26,040 --> 00:00:31,560 Native, itu juga bagian yang saya maksud dengan Anda hanya punya beberapa komponen dasar tetapi mereka 7 00:00:31,560 --> 00:00:36,960 akan membuat Anda sangat jauh karena Anda bekerja dengan pandangan dan tombol dan teks sepanjang waktu. 8 00:00:37,530 --> 00:00:44,730 Jadi di sini saya akan membungkus teks ini dengan komponen tampilan pembukaan dan penutupan di sini dan sekarang di sini, kami memiliki 9 00:00:44,730 --> 00:00:46,090 lebih banyak opsi gaya. 10 00:00:46,290 --> 00:00:50,730 Sekarang lagi, saya tidak akan menggunakan gaya inline di sini 11 00:00:50,730 --> 00:00:54,000 tetapi menambahkan gaya ke stylesheet, misalnya 12 00:00:54,210 --> 00:01:03,810 kita bisa memberi nama item daftar ini tetapi nama terserah Anda dan katakanlah di sini kami ingin memiliki padding 10, mari 13 00:01:03,810 --> 00:01:17,750 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 14 00:01:17,880 --> 00:01:25,720 gaya untuk tampilan ini dengan merujuk ke gaya. listItem di sini dan dengan itu jika 15 00:01:25,770 --> 00:01:34,380 kita menyimpan ini, sekarang item daftar kita akan terlihat sedikit lebih baik, pelajari Bereaksi 16 00:01:34,610 --> 00:01:39,620 Asli, beginilah tampilannya. Sekarang beberapa jarak mungkin juga akan menyenangkan, 17 00:01:39,620 --> 00:01:46,850 kita dapat mencapainya dengan margin, padding adalah jarak antara perbatasan dan konten, margin adalah jarak antara perbatasan dan konten sekitarnya, 18 00:01:46,850 --> 00:01:49,270 sehingga elemen lain di sekitarnya 19 00:01:49,280 --> 00:01:55,130 dan di sana, kita dapat menambahkan margin 10 untuk menambahkan margin ke semua arah, kita juga 20 00:01:55,460 --> 00:01:59,600 bisa menambahkan margin ke atas atau ke bawah atau dan itu 21 00:01:59,720 --> 00:02:06,050 adalah sesuatu yang tidak ada di CSS, Anda dapat menambahkan margin vertikal 10 untuk memiliki margin di atas 22 00:02:06,050 --> 00:02:08,560 dan bawah tetapi tidak kiri dan kanan 23 00:02:08,720 --> 00:02:15,770 dan itu adalah contoh bagaimana ini didasarkan pada CSS tapi itu tidak sama karena margin vertikal tidak akan menjadi properti 24 00:02:15,860 --> 00:02:23,210 yang Anda miliki di CSS, Anda memilikinya di React Native. Jadi jika sekarang kita simpan itu 25 00:02:23,210 --> 00:02:29,840 dan kita tambahkan pelajari React Native di sini, sekarang Anda melihat ada 26 00:02:30,030 --> 00:02:38,430 beberapa jarak antara item-item itu dan tentu saja juga di iOS jika kita melakukannya di sana. 27 00:02:38,550 --> 00:02:46,440 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 28 00:02:46,440 --> 00:02:51,050 dalam ke gaya dan semua yang dapat Anda lakukan di sana nanti dalam kursus ini, 29 00:02:51,060 --> 00:02:54,090 kami hanya harus mendapatkan tentu saja selangkah demi selangkah. 30 00:02:54,090 --> 00:03:00,750 Sekarang satu hal yang harus kita sesuaikan sekarang, kuncinya di sini harus selalu berada pada elemen root dalam daftar Anda, jadi 31 00:03:00,750 --> 00:03:01,460 elemen yang 32 00:03:01,500 --> 00:03:05,730 Anda ulangi dan kami tidak hanya mengulangi teks lagi, sebaliknya kami sekarang ulangi 33 00:03:05,730 --> 00:03:07,020 seluruh tampilan, jadi kunci 34 00:03:07,320 --> 00:03:14,430 harus ditambahkan ke tampilan di sini, bukan ke teks dalam tampilan. Itu sebabnya saya mendapat peringatan ini, kesalahan ini lagi, 35 00:03:14,430 --> 00:03:15,520 sekarang dengan 36 00:03:15,600 --> 00:03:19,230 kunci dipindahkan ke tampilan alih-alih teks, ini harus hilang.