1 00:00:02,180 --> 00:00:06,770 Sekarang tentu saja di sini saya menggunakan tampilan gulir dan Anda mengetahui bahwa FlatList lebih baik jika Anda memiliki daftar 2 00:00:06,770 --> 00:00:10,160 di mana Anda tidak tahu berapa banyak barang yang akan Anda miliki di sana. 3 00:00:10,190 --> 00:00:16,490 Sekarang untuk permainan kami, tampilan gulir sebenarnya akan baik-baik saja karena ya, kami tidak tahu berapa 4 00:00:16,490 --> 00:00:24,320 banyak item dan secara teoritis, karena menebak dengan sangat buruk, kami akan memiliki sekitar 100 item di sana tetapi itu akan 5 00:00:24,380 --> 00:00:34,020 terjadi hampir tidak pernah dan oleh karena itu biasanya daftar ini tidak akan menampung lebih dari 10, 15, 20 paling banyak, item dan karenanya ini kemungkinan 6 00:00:34,110 --> 00:00:38,480 besar tidak akan pernah menyebabkan masalah kinerja bagi kita dan menggunakan 7 00:00:38,520 --> 00:00:45,210 tampilan gulir di sini benar-benar baik-baik saja karena ya, itu adalah daftar yang menampung banyak item, yang akan 8 00:00:45,450 --> 00:00:52,140 melampaui batas layar kami tetapi jarang akan ada daftar dengan banyak item, itu tidak akan pernah menjadi daftar 9 00:00:52,140 --> 00:00:56,370 dengan lebih dari 100 item karena cara permainan kami bekerja. 10 00:00:56,370 --> 00:01:01,770 Jadi tampilan gulir akan baik-baik saja di sini tetapi jika Anda masih ingin menggunakan FlatList, izinkan saya menunjukkan 11 00:01:01,800 --> 00:01:03,050 ini kepada Anda juga. 12 00:01:03,060 --> 00:01:08,460 Untuk itu, kita dapat menambahkan FlatList di sini dan itu tentu saja berarti bahwa kita perlu 13 00:01:08,460 --> 00:01:08,910 mengimpor 14 00:01:09,390 --> 00:01:13,020 FlatList dari React Native, jadi di sini, saya akan mengimpor FlatList 15 00:01:13,020 --> 00:01:19,590 seperti ini dan dengan FlatList yang diimpor, Anda mengetahui bahwa FlatList mengambil data prop yang menunjuk pada data yang 16 00:01:19,670 --> 00:01:22,630 ingin Anda beri makan dan dalam kasus kami di 17 00:01:22,680 --> 00:01:31,710 sini, itu akan menjadi array dugaan kami di masa lalu dan Anda kemudian memiliki render item render yang memungkinkan Anda untuk menampilkan item untuk setiap item dalam 18 00:01:31,860 --> 00:01:37,350 data yang Anda makan, jadi output komponen untuk setiap item dalam data dan di sini saya 19 00:01:37,350 --> 00:01:38,250 dapat menunjuk 20 00:01:38,250 --> 00:01:42,870 item render list yang harus dipanggil. Sekarang ini tidak 21 00:01:42,870 --> 00:01:48,390 akan berhasil karena beberapa alasan. Pertama, item daftar render mengharapkan dua nilai 22 00:01:48,750 --> 00:01:55,620 tetapi item render di sini di FlatList hanya akan meneruskan satu item dan itu adalah data item yang 23 00:01:55,620 --> 00:01:59,950 menyimpan informasi tentang indeks dan tentang item yang akan kami cetak. 24 00:01:59,970 --> 00:02:03,510 Hal lain yang akan menyebabkan masalah adalah kuncinya. 25 00:02:03,540 --> 00:02:10,710 Anda mungkin ingat bahwa FlatList mengharapkan untuk mendapatkan objek dalam array yang Anda lewati di mana setiap objek memiliki 26 00:02:10,740 --> 00:02:16,130 properti kunci yang dapat diekstrak dan digunakan sebagai kunci untuk rendering ulang yang efisien. 27 00:02:16,140 --> 00:02:21,880 Sekarang kita tidak memiliki array objek di sini, kita memiliki array angka dan itu tidak akan berfungsi. 28 00:02:21,960 --> 00:02:28,680 Sekarang kita dapat menambahkan extractor kunci di sini ke FlatList untuk mengesampingkan default-nya, extractor kunci mengambil fungsi yang mendapatkan item 29 00:02:28,770 --> 00:02:35,070 kita pada akhirnya dan kemudian kita harus memberi tahu FlatList di mana menemukan kunci kita dan secara default, ia 30 00:02:35,070 --> 00:02:38,170 mencari item. kunci atau untuk item. id, di 31 00:02:38,280 --> 00:02:41,860 sini kami ingin mengatakan bahwa barang itu sendiri adalah kuncinya. 32 00:02:42,090 --> 00:02:46,580 Namun FlatList menginginkan kunci yang berupa string dan bukan angka, jika tidak 33 00:02:46,590 --> 00:02:48,510 maka akan mendapat peringatan. 34 00:02:48,510 --> 00:02:54,480 Jadi hal berikutnya yang harus kita lakukan adalah tebakan masa lalu yang kita kelola harus berupa string dan itu tidak 35 00:02:54,480 --> 00:02:58,800 masalah karena kita hanya menggunakannya untuk mencetaknya ke layar, jadi kita tidak benar-benar peduli 36 00:02:58,800 --> 00:03:03,750 apakah itu secara teknis disimpan sebagai angka atau sebagai string dan karenanya di sini ketika kita 37 00:03:03,750 --> 00:03:09,630 menambahkan tebakan baru, kita dapat memanggil toString yang merupakan metode Javascript bawaan pada angka untuk mengubahnya menjadi tipe string 38 00:03:09,630 --> 00:03:16,490 dan melakukan hal yang sama untuk nilai awal tentu saja Di sini di mana saya menambahkan tebakan awal saya, panggil 39 00:03:16,500 --> 00:03:19,140 toString di sana juga dan sekarang kami 40 00:03:19,140 --> 00:03:26,030 memiliki string dan karena itu mereka dapat digunakan sebagai angka. Sekarang seperti yang saya katakan, daftar item render mengharapkan 41 00:03:26,030 --> 00:03:31,940 argumen yang salah, numOfRound tidak akan berfungsi seperti ini, nilainya juga tidak akan berfungsi seperti ini, 42 00:03:31,940 --> 00:03:34,430 alih-alih kami mendapatkan data item 43 00:03:34,550 --> 00:03:42,440 dan kami masih dapat mengharapkan argumen tambahan, Namun ini kemudian harus diharapkan sebagai argumen pertama karena kita sekarang dapat dengan mudah 44 00:03:42,740 --> 00:03:49,280 pergi ke render item di sini di FlatList dan ikat argumen yang harus diteruskan, sehingga kita dapat menambahkan 45 00:03:49,460 --> 00:03:55,330 argumen tambahan selain argumen default yang akan diteruskan. Sekarang bind mengharapkan ini sebagai argumen pertama sehingga kita mengatur apa 46 00:03:55,350 --> 00:04:00,210 yang seharusnya merujuk pada fungsi yang kita panggil, kita tidak peduli di sini jadi saya hanya akan menambahkannya 47 00:04:00,210 --> 00:04:00,920 ke ini, 48 00:04:00,920 --> 00:04:03,720 Anda juga dapat mengaturnya menjadi nol, itu tidak masalah. 49 00:04:03,750 --> 00:04:10,350 Argumen kedua yang kita tambahkan di sini kemudian akan menjadi argumen pertama yang diterima 50 00:04:10,350 --> 00:04:14,830 oleh fungsi itu dan itu harus menjadi angka bulat 51 00:04:14,860 --> 00:04:21,510 kita yang harus pastGuesses. panjangnya. Sebelumnya, saya mengurangi indeks di sini tapi itu tidak 52 00:04:21,510 --> 00:04:23,640 berfungsi lagi karena saya tidak memiliki akses ke 53 00:04:23,640 --> 00:04:27,430 indeks lagi, kami tidak memetakan secara manual. Jadi saya hanya akan melewati 54 00:04:27,700 --> 00:04:34,170 panjang di sana dan hal baiknya adalah saya bisa mendapatkan indeks di dalam item render dari data item. 55 00:04:34,170 --> 00:04:39,780 Argumen default ini juga akan diteruskan oleh Bereaksi dan argumen default secara otomatis diteruskan ke 56 00:04:39,840 --> 00:04:40,960 argumen terakhir. 57 00:04:41,010 --> 00:04:43,890 Jadi argumen pertama adalah argumen yang Anda atur 58 00:04:43,890 --> 00:04:45,840 dalam bind, dalam hal 59 00:04:45,830 --> 00:04:52,620 ini, itu hanya satu argumen, jumlah ronde kami atau panjang array kami dan kemudian argumen default yang akan 60 00:04:52,620 --> 00:04:58,500 dilewati secara normal akan ditambahkan sebagai argumen tambahan di akhir daftar argumen Anda di sini. 61 00:04:58,500 --> 00:05:01,500 Sekarang di sini, jumlah putaran juga 62 00:05:01,500 --> 00:05:07,530 bukan nama yang cocok lagi, melainkan panjang daftar, yang terdengar seperti nama yang lebih baik 63 00:05:07,580 --> 00:05:13,970 karena itulah yang kita dapatkan tetapi kemudian di sini kita dapat menghitung jumlah putaran kita dengan 64 00:05:13,970 --> 00:05:20,120 menggunakan panjang daftar dan kemudian dengan mengurangi itemData. indeks karena data item yang Anda peroleh secara otomatis oleh React Native adalah objek 65 00:05:20,120 --> 00:05:27,440 yang juga memiliki properti indeks yang merupakan indeks dari item yang Anda hasilkan dan Anda juga mendapatkan itemData. item dan itu item itu 66 00:05:27,920 --> 00:05:31,740 sendiri yang dalam kasus kami adalah dugaan. 67 00:05:32,000 --> 00:05:37,700 Kami sekarang juga tidak lagi harus menambahkan kunci di sini karena kunci itu akan dilakukan 68 00:05:37,700 --> 00:05:41,740 oleh React Native berkat FlatList. Jadi itu banyak pekerjaan, sekarang 69 00:05:41,750 --> 00:05:43,940 kita harus dapat menampilkan daftar lagi. 70 00:05:43,940 --> 00:05:46,590 Jadi mari kita simpan ini dan mari kita 71 00:05:46,590 --> 00:05:48,860 coba di sini dan itu 72 00:05:49,320 --> 00:05:55,440 sepertinya berhasil, namun tentu saja kita kehilangan positioning sekarang. Sebelumnya yang kami lakukan adalah menambahkan gaya wadah konten, 73 00:05:55,440 --> 00:05:58,300 daftar gaya di sini ke tampilan gulir, 74 00:05:58,320 --> 00:06:04,200 hal baiknya adalah Anda dapat melakukannya di FlatList juga. Meskipun Anda dapat menambahkan gaya seperti pada tampilan gulir, 75 00:06:04,200 --> 00:06:10,320 gaya ini memungkinkan Anda misalnya untuk menambahkan margin di sekitar daftar tetapi tidak memungkinkan Anda untuk menyelaraskan konten di 76 00:06:10,320 --> 00:06:12,510 dalam daftar. Untuk itu sebagai 77 00:06:12,510 --> 00:06:16,900 gantinya, gunakan gaya wadah konten yang didukung oleh FlatList juga dan oleh karena itu 78 00:06:16,980 --> 00:06:22,200 di sini, kami juga dapat menunjuk pada daftar gaya dan karenanya ini seharusnya hanya berfungsi seperti yang 79 00:06:22,200 --> 00:06:23,750 dilakukan tampilan gulir kami sebelumnya. 80 00:06:23,760 --> 00:06:32,650 Jadi mari kita coba ini dan Anda akan melihat kita mulai dari bawah di sini dan sekarang kita dapat mulai menambahkan item. 81 00:06:32,650 --> 00:06:35,390 Sekarang mari kita lihat apakah scrolling juga berfungsi 82 00:06:36,050 --> 00:06:39,820 sebagaimana mestinya, ya itu terjadi dan kita dapat melihat item terbaru dan item tertua 83 00:06:39,950 --> 00:06:43,400 dan ya ada sesuatu yang salah dengan posisi item dalam daftar item 84 00:06:43,420 --> 00:06:49,010 dan saya akan kembali ke sini tetapi umumnya ini berfungsi. Mari kita juga mengujinya di Android, jadi 85 00:06:49,010 --> 00:06:50,130 mari kita mulai 86 00:06:50,150 --> 00:06:54,610 menebak dan berharap kita tidak menyelesaikan ini terlalu dini, tidak, itu bekerja 87 00:06:54,630 --> 00:06:55,740 dan di 88 00:06:55,740 --> 00:07:02,200 sini, kita juga dapat menggulir seperti yang Anda lihat. Jadi itu bekerja dengan FlatList 89 00:07:02,200 --> 00:07:08,160 juga, sekarang bagaimana dengan distribusi konten aneh ini di daftar item kami? 90 00:07:08,170 --> 00:07:15,070 Baik Anda akan melihat bahwa item daftar itu sendiri lebih besar dari sebelumnya. 91 00:07:15,160 --> 00:07:21,010 Konten didistribusikan seolah-olah item daftar akan berakhir di sini dan memang itulah masalahnya. 92 00:07:21,010 --> 00:07:27,910 Kami memiliki lebar 60% dari item daftar dan konten kami menghargai ini tetapi anehnya 93 00:07:27,910 --> 00:07:29,510 batas kami tidak. 94 00:07:29,590 --> 00:07:34,870 Untuk memperbaiki perilaku FlatList yang aneh ini, apa yang dapat Anda lakukan adalah Anda dapat pergi ke 95 00:07:34,870 --> 00:07:41,110 daftar kontainer Anda yang menyimpan daftar keseluruhan dan mengatur lebar di sana untuk lebar daftar yang Anda inginkan di 96 00:07:41,860 --> 00:07:45,810 akhir, seperti katakanlah 60% dan berikan item daftar Anda lebar 100%. 97 00:07:45,820 --> 00:07:52,300 Jadi sekarang daftar kontainer secara keseluruhan lebih kecil, kurang lebar dan oleh karena itu item daftar mengasumsikan lebar itu dan memiliki lebar 98 00:07:52,300 --> 00:07:53,850 yang sama dan karena 99 00:07:53,950 --> 00:07:58,840 Anda jarang harus menggunakan case di mana kontainer daftar Anda harus lebih luas daripada daftar item 100 00:07:59,230 --> 00:08:04,150 karena apa lagi yang akan menjadi di sana dalam daftar kontainer, itu harus menjadi solusi yang bagus. 101 00:08:04,180 --> 00:08:11,300 Sekarang jika Anda melakukannya, Anda akan melihat bahwa lebarnya terlihat lebih baik tetapi sebenarnya, penentuan posisi sekarang merupakan masalah. 102 00:08:11,320 --> 00:08:17,080 Nah karena sekarang kita memiliki lebar yang dikontrol pada wadah daftar luar, kita dapat menyingkirkan 103 00:08:17,080 --> 00:08:20,740 menyelaraskan pusat item di sini pada daftar itu 104 00:08:20,740 --> 00:08:25,760 sendiri, jadi daftar, jangan lupa, adalah gaya yang ditambahkan ke gaya wadah konten. 105 00:08:25,810 --> 00:08:30,810 Kami mempertahankan gaya di sana tetapi saya menghapus selaraskan pusat item karena tidak ada 106 00:08:31,060 --> 00:08:35,050 yang perlu ditengahkan sekarang, kami memiliki lebar yang ditetapkan pada wadah 107 00:08:35,050 --> 00:08:41,890 daftar bukan pada item daftar, jadi berkat mereka memiliki 100%, mereka terpusat secara otomatis karena mereka mengambil lanjutkan dengan 108 00:08:41,890 --> 00:08:45,070 lebar penuh dan oleh karena itu sekarang 109 00:08:45,070 --> 00:08:52,420 jika kita mencoba ini lagi, ini tampaknya bekerja jauh lebih baik dan daftar item sebenarnya ditata dengan cara yang seharusnya. 110 00:08:52,420 --> 00:08:57,940 Jadi jika kita memiliki yang lain di sini yang mungkin membutuhkan waktu lebih lama, ya, terlihat bagus, maka 111 00:08:57,940 --> 00:09:04,230 di sini kita dapat melihat kita mendapatkan perilaku yang sama seperti sebelumnya, kita mendapatkan gaya yang bagus dan kita juga bekerja di 112 00:09:04,240 --> 00:09:09,760 sekitar perilaku yang berbeda yang diberikan FlatList kepada kita. Mari kita juga mencoba ini di Android di sini dan 113 00:09:09,760 --> 00:09:10,930 memulai permainan baru di 114 00:09:12,670 --> 00:09:14,290 sana, oh ini tidak akan menjadi 115 00:09:16,120 --> 00:09:17,020 permainan yang panjang, 116 00:09:17,020 --> 00:09:19,800 cukup lama, jadi di sana juga, semuanya berjalan sebagaimana mestinya. 117 00:09:19,960 --> 00:09:25,780 Dan ini adalah bagaimana Anda bisa melakukan ini dengan FlatList, seperti yang Anda lihat bekerja sedikit berbeda, 118 00:09:25,780 --> 00:09:27,600 kita harus mengatasi perilaku yang berbeda 119 00:09:27,610 --> 00:09:33,550 di sana ketika datang untuk menyesuaikan lebar item daftar tetapi pada akhirnya, akhirnya ini sekarang juga berfungsi dan 120 00:09:34,090 --> 00:09:40,330 oleh karena itu Anda sekarang belajar cara menata barang-barang Anda dengan FlatList, dengan tampilan gulir, apa yang istimewa tentang 121 00:09:40,330 --> 00:09:46,990 tampilan daftar ini atau tampilan yang dapat digulir secara umum dan bagaimana Anda masih bisa menata barang-barang Anda seperti yang 122 00:09:46,990 --> 00:09:47,970 Anda inginkan.