1 00:00:02,320 --> 00:00:08,260 Ketika datang untuk menata daftar, kita tentu saja dapat menata item daftar dan juga daftar itu 2 00:00:08,260 --> 00:00:08,810 sendiri. 3 00:00:08,840 --> 00:00:10,830 Jadi mari kita mulai dengan item 4 00:00:10,840 --> 00:00:17,440 dan di sini saya akan benar-benar memotong tanda itu di sini sehingga untuk mengatakan, sehingga kode jsx untuk item dan saya akan 5 00:00:17,440 --> 00:00:22,420 menambahkan fungsi baru di luar fungsi komponen karena kita tidak benar-benar membutuhkan apa pun dari di 6 00:00:22,420 --> 00:00:27,380 dalam komponen dan saya hanya akan memberi nama item daftar render ini, nama terserah Anda. 7 00:00:27,490 --> 00:00:33,850 Ini adalah fungsi dan fungsi ini pada akhirnya harus mengembalikan beberapa kode jsx di sini, 8 00:00:33,850 --> 00:00:41,320 jadi itu harus mengembalikan kode jsx ini di sini dan berfungsi dengan benar, tentu saja perlu mendapatkan katakanlah 9 00:00:41,690 --> 00:00:44,320 nilai kita yang ingin kita hasilkan. 10 00:00:44,320 --> 00:00:50,950 Jadi di sini, saya kemudian akan menggunakan nilai sebagai nilai kunci dan output di sini di antara tag teks dan 11 00:00:50,950 --> 00:00:54,240 sekarang kita dapat menggunakan render daftar item di sana 12 00:00:54,250 --> 00:01:01,850 di mana kita memanggil peta dan di sini, di sana saya hanya ingin menjalankan render daftar item untuk setiap item yang kita Sedang 13 00:01:01,880 --> 00:01:05,410 memetakan dan saya meneruskan menebaknya sebagai nilai dalam item daftar render. 14 00:01:05,440 --> 00:01:08,620 Sekarang jika kita melakukan itu, kita harus melihat hasil yang sama 15 00:01:08,630 --> 00:01:13,720 seperti sebelumnya, jadi tidak ada yang terlalu mewah di sini tapi sekarang kita memiliki markup lebih ramping di sana, 16 00:01:13,730 --> 00:01:17,690 kode jsx lebih ramping di sana dan memiliki kode jsx item daftar kami di sini. 17 00:01:17,870 --> 00:01:23,930 Sekarang kita dapat mendesain ini dan tentu saja saya ingin gaya tampilan saya di sini, untuk ini saya 18 00:01:23,930 --> 00:01:28,640 akan menambahkan gaya di sini dari stylesheet yang akan saya beri nama daftar dan 19 00:01:28,650 --> 00:01:33,600 di sana, saya sebenarnya sekarang ingin memiliki dua item teks dan satu harus menjadi jumlah 20 00:01:33,600 --> 00:01:34,710 putaran dan yang 21 00:01:34,710 --> 00:01:41,940 kedua harus nilainya, jadi di sini saya perlu argumen tambahan, saya perlu nilai tetapi juga jumlah putaran atau numOfRound seperti yang saya 22 00:01:41,940 --> 00:01:42,980 sebutkan di 23 00:01:43,080 --> 00:01:45,640 sini dan saya ingin menampilkan ini secara dinamis 24 00:01:45,720 --> 00:01:49,800 di sini, mungkin dengan simbol hash di depannya hanya untuk alasan gaya. 25 00:01:50,250 --> 00:01:54,030 Jadi sekarang kita memiliki dua teks ini dalam daftar ini di sini 26 00:01:54,030 --> 00:01:59,350 dan di sana, saya sebenarnya tidak ingin menggunakan teks tetapi teks tubuh sehingga saya memiliki styling teks standar saya. 27 00:01:59,370 --> 00:02:06,030 Jadi untuk itu, mari kita mengimpor teks isi dari teks isi komponen dan menggunakan teks isi alih-alih teks normal 28 00:02:06,030 --> 00:02:10,860 di sini dalam item daftar kami. Dengan itu, kita menggunakan font yang 29 00:02:10,860 --> 00:02:17,730 tepat dan sekarang mari kita tambahkan objek daftar itu ke stylesheet kita sehingga kita bisa mendesain item daftar, sebenarnya ini 30 00:02:17,730 --> 00:02:21,040 harus disebut item daftar karena itu dan bukan daftar. 31 00:02:21,040 --> 00:02:25,030 Jadi mari kita tambahkan item daftar ke stylesheet sekarang, 32 00:02:25,390 --> 00:02:29,490 seperti ini dan sekarang tentu saja kita bisa gaya ini 33 00:02:29,860 --> 00:02:38,800 dengan cara apa pun yang Anda inginkan, saya akan gaya itu dengan cara yang relatif mudah di sini, cukup beri warna perbatasan 34 00:02:38,800 --> 00:02:47,080 katakanlah hitam atau mungkin ini warna sedikit keabu-abuan di sini. Padding di semua arah katakanlah 15 memiliki spasi, margin pada sumbu vertikal 10 sehingga kita 35 00:02:47,500 --> 00:02:49,360 memiliki beberapa jarak antara item daftar 36 00:02:49,360 --> 00:02:55,480 dan mereka tidak duduk tepat di samping satu sama lain. Warna latar belakang putih mungkin dan tentu 37 00:02:55,480 --> 00:02:57,280 saja Anda dapat 38 00:02:57,280 --> 00:03:01,210 menggunakan warna yang berbeda di sini jika Anda mau. 39 00:03:01,290 --> 00:03:03,060 Nah, itu permulaan, sekarang ketika 40 00:03:03,060 --> 00:03:07,650 kita menetapkan warna perbatasan, kita juga perlu mengatur lebar perbatasan di sini meskipun 41 00:03:07,650 --> 00:03:08,370 jika 42 00:03:08,370 --> 00:03:14,850 tidak kita tidak akan melihat perbatasan dan saya akan mengatur ini menjadi satu dan sangat penting, saya ingin memiliki 43 00:03:14,850 --> 00:03:20,220 ini dua komponen teks dalam pandangan saya duduk bersebelahan dan tidak di atas satu sama lain 44 00:03:20,430 --> 00:03:25,830 yang akan menjadi default karena tampilan menggunakan flexbox dan menggunakan arah lengkung kolom default agar item 45 00:03:25,830 --> 00:03:30,540 duduk bersebelahan di sumbu horizontal, kami menambahkan baris arah fleksibel di sini seperti ini. 46 00:03:30,540 --> 00:03:35,990 Dan dengan itu jika kita menyimpan ini dan aplikasi membangun kembali, mari kita coba dan lihat bagaimana 47 00:03:36,030 --> 00:03:40,320 kelihatannya, ya itu terlihat baik-baik saja tetapi masih ada ruang untuk perbaikan. 48 00:03:40,320 --> 00:03:46,320 Sebagai contoh, saya ingin menetapkan lebar pada item daftar itu untuk memastikan bahwa itu tidak 49 00:03:46,350 --> 00:03:54,360 hanya selebar kontennya diperlukan tetapi selebar yang kita katakan. Sekarang untuk menambahkan lebar, Anda dapat menambahkan lebar di sini untuk daftar item 50 00:03:54,420 --> 00:03:54,940 tetapi 51 00:03:55,020 --> 00:04:01,200 jika kita melakukan itu dan mengatur ini untuk katakanlah 80%, Anda benar-benar akan melihat bahwa ini berperilaku tidak dengan cara 52 00:04:01,200 --> 00:04:03,110 yang Anda inginkan berperilaku benar, jadi 53 00:04:03,110 --> 00:04:04,570 ini tidak tidak terlihat 54 00:04:04,680 --> 00:04:13,260 benar, sekarang kontennya entah bagaimana dipindahkan tetapi item itu sendiri tentu tidak lebih luas. Untuk menata daftar dengan benar, cara terbaik 55 00:04:13,260 --> 00:04:18,510 adalah dengan membungkusnya menjadi tampilan dan kemudian gaya tampilan ini. 56 00:04:18,510 --> 00:04:20,000 Jadi di sini, 57 00:04:20,010 --> 00:04:22,290 kita dapat menambahkan tampilan, memberikan gaya 58 00:04:22,290 --> 00:04:29,130 katakanlah daftar, jadi di sini saya merujuk ke daftar gaya dan menambahkan objek daftar ini ke stylesheet kita sekarang, 59 00:04:29,130 --> 00:04:36,240 seperti ini dan pada daftar ini, kita sekarang dapat menetapkan lebar 80% dan singkirkan lebar di sini pada daftar item. 60 00:04:36,240 --> 00:04:41,880 Jika kami melakukan ini dengan tampilan pembungkus ini, Anda sekarang melihat item daftar memiliki tampilan yang benar dan itu 61 00:04:41,880 --> 00:04:43,620 hanya sesuatu yang harus diperhatikan. 62 00:04:43,740 --> 00:04:50,430 Jika Anda ingin mengontrol ketinggian atau lebar daftar Anda, dari tampilan gulir Anda, maka jangan menambahkan gaya ke 63 00:04:50,430 --> 00:04:51,650 item daftar, juga 64 00:04:51,690 --> 00:04:57,450 jangan menambahkannya secara langsung ke tampilan gulir karena bagaimana ini bekerja secara internal tetapi alih-alih 65 00:04:57,450 --> 00:05:03,250 hanya membungkus tampilan di sekitar tampilan gulir tempat Anda mengatur lebar dan tinggi yang diinginkan. 66 00:05:03,290 --> 00:05:09,320 Sekarang yang akan Anda perhatikan adalah bahwa pada item daftar, alangkah baiknya jika kita memiliki angka 67 00:05:09,360 --> 00:05:15,630 bulat yang dihasilkan di sana dan kemudian memiliki jarak antara angka bulat dan tebakan kita yang sebenarnya 68 00:05:15,630 --> 00:05:18,590 dan untuk mencapai ini, untuk itu kita perlu 69 00:05:18,720 --> 00:05:26,670 mengatur gaya di sini pada daftar item, kita dapat mengatur justifyContent yang mengontrol bagaimana konten tampilan ini diletakkan di sepanjang sumbu utama 70 00:05:26,670 --> 00:05:33,070 yang mencerminkan arah sebagai sumbu horizontal dan di sana, saya akan menggunakan ruang sekitar untuk mendistribusikan ruang kosong 71 00:05:33,210 --> 00:05:40,260 yang tersedia di sekitar kita item teks di sini dan sekarang untuk juga menampilkan jumlah putaran yang kita harapkan 72 00:05:40,260 --> 00:05:48,360 sebagai argumen di sini dalam item render list, kita bisa turun ke fungsi peta kita dan di sana, kita benar-benar mendapatkan argumen 73 00:05:48,360 --> 00:05:54,510 kedua dalam fungsi ini yang memetakan panggilan secara otomatis dan itu adalah indeks dari item yang kami 74 00:05:54,510 --> 00:05:55,680 hasilkan, sehingga 75 00:05:55,680 --> 00:06:03,030 kami dapat meneruskan indeks itu di sini untuk merender item daftar atau indeks plus 1 karena itu akan mulai dari 76 00:06:03,030 --> 00:06:07,560 0 dan kami mungkin ingin mencetak satu untuk putaran pertama alih-alih 0. 77 00:06:07,560 --> 00:06:15,300 Sekarang dengan itu keluar dari jalan, jika kita menambahkan ini, sekarang ini terlihat sedikit lebih baik dan mungkin kita benar-benar beralih tampilan ini dari 78 00:06:15,300 --> 00:06:20,980 ruang ke ruang antara, saya pikir itu terlihat lebih baik tetapi sebelum saya menyimpan ini dan memperbarui 79 00:06:20,980 --> 00:06:27,390 ini, Anda akan juga perhatikan bahwa satu masalah yang Anda miliki dengan itu adalah bahwa angka bulat sebenarnya tidak 80 00:06:27,390 --> 00:06:27,970 benar. 81 00:06:28,020 --> 00:06:33,030 Babak pertama adalah babak paling bawah karena kami menambahkan babak baru di awal daftar, oleh 82 00:06:33,030 --> 00:06:39,390 karena itu indeks bukan ukuran yang tepat untuk nomor rute karena indeks selalu 0 atau jika kita menambahkan 1, 83 00:06:39,450 --> 00:06:42,620 itu 1, untuk daftar pertama item tetapi item daftar 84 00:06:42,650 --> 00:06:45,700 pertama sebenarnya bukan babak pertama kami, alih-alih karena kami 85 00:06:45,780 --> 00:06:51,330 menambahkan putaran baru sebagai item daftar pertama, item daftar pertama adalah putaran terbaru kami dan tentu 86 00:06:51,330 --> 00:06:52,940 saja bukan yang pertama. 87 00:06:52,980 --> 00:07:02,670 Jadi untuk memperbaikinya, apa yang bisa kita lakukan adalah di sini dalam render daftar item, daripada menggunakan indeks, kita tentu saja dapat menggunakan 88 00:07:02,880 --> 00:07:12,300 daftar tebakan masa lalu kita di sini dan mendapatkan panjang daftar itu dan kemudian mengurangi indeks dari itu dan yang memberi kita 89 00:07:12,370 --> 00:07:16,810 sebenarnya angka bulat yang benar untuk item daftar yang diberikan. 90 00:07:17,500 --> 00:07:24,310 Jadi sekarang jika kita melakukan itu dan kita restart ini, sekarang kita melihat putaran nomor satu adalah tebakan tujuh dan itu tetap 91 00:07:24,310 --> 00:07:26,230 nomor satu jika kita menambahkan 92 00:07:26,260 --> 00:07:29,520 tebakan lain dan sekarang ini tampaknya berfungsi dengan baik di sini. 93 00:07:29,560 --> 00:07:36,180 Anda juga akan melihat bahwa begitu kita melampaui batas-batas kita di sini, tentu saja kita dapat menggulir 94 00:07:36,310 --> 00:07:39,430 daftar dan itu juga berfungsi seperti seharusnya. 95 00:07:39,430 --> 00:07:48,280 Mari kita juga mencoba ini di Android di sini, mari kita mulai permainan baru di sana dan mari kita berharap kita tidak 96 00:07:48,280 --> 00:07:51,000 menang terlalu dini, ya itu tampaknya 97 00:07:51,010 --> 00:07:54,640 berhasil tetapi di sana, saya sebenarnya tidak dapat menggulir. 98 00:07:54,640 --> 00:07:57,820 Jadi pada Android, ini sebenarnya tidak berfungsi dengan benar, daftar 99 00:07:57,820 --> 00:07:59,850 ini tidak dapat digulir di sana. 100 00:07:59,860 --> 00:08:01,320 Jadi apa yang salah di Android? 101 00:08:01,510 --> 00:08:04,930 Sekarang sementara ia menggulir dengan baik di iOS, 102 00:08:04,930 --> 00:08:12,490 untuk tampilan gulir yang bersarang dalam tampilan untuk menggulir juga di Android, pastikan bahwa tampilan di sekitarnya benar-benar menggunakan 103 00:08:12,820 --> 00:08:15,080 flex, jadi tambahkan ini ke 104 00:08:15,100 --> 00:08:20,320 gaya daftar di sini yang merupakan gaya yang diterapkan untuk tampilan yang melilit 105 00:08:20,320 --> 00:08:21,570 tampilan gulir. 106 00:08:21,820 --> 00:08:25,120 Dengan itu ditambahkan, jika kita sekarang mencoba ini lagi di 107 00:08:28,940 --> 00:08:34,700 Android, Anda sekarang akan melihat bahwa sekarang ini dapat digulir segera setelah Anda melampaui batas layar dan di 108 00:08:34,700 --> 00:08:37,460 iOS, itu masih akan berfungsi seperti sebelumnya 109 00:08:37,580 --> 00:08:40,810 dan itu menjadi iOS, kita bisa bahkan menggulir tanpa melampaui 110 00:08:40,820 --> 00:08:45,090 batas, itu hanya perilaku iOS default yang dapat Anda sedikit menyeimbangkan daftar tersebut. 111 00:08:45,710 --> 00:08:51,800 Jadi sekarang kita memiliki daftar yang dapat digulir di sini dengan tampilan dan peta gulir dan berfungsi pada Android dan 112 00:08:51,800 --> 00:08:52,310 iOS.