Sekarang tentu saja di sini saya menggunakan tampilan gulir dan Anda mengetahui bahwa FlatList lebih baik jika Anda memiliki daftar
di mana Anda tidak tahu berapa banyak barang yang akan Anda miliki di sana.
Sekarang untuk permainan kami, tampilan gulir sebenarnya akan baik-baik saja karena ya, kami tidak tahu berapa
banyak item dan secara teoritis, karena menebak dengan sangat buruk, kami akan memiliki sekitar 100 item di sana tetapi itu akan
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
besar tidak akan pernah menyebabkan masalah kinerja bagi kita dan menggunakan
tampilan gulir di sini benar-benar baik-baik saja karena ya, itu adalah daftar yang menampung banyak item, yang akan
melampaui batas layar kami tetapi jarang akan ada daftar dengan banyak item, itu tidak akan pernah menjadi daftar
dengan lebih dari 100 item karena cara permainan kami bekerja.
Jadi tampilan gulir akan baik-baik saja di sini tetapi jika Anda masih ingin menggunakan FlatList, izinkan saya menunjukkan
ini kepada Anda juga.
Untuk itu, kita dapat menambahkan FlatList di sini dan itu tentu saja berarti bahwa kita perlu
mengimpor
FlatList dari React Native, jadi di sini, saya akan mengimpor FlatList
seperti ini dan dengan FlatList yang diimpor, Anda mengetahui bahwa FlatList mengambil data prop yang menunjuk pada data yang
ingin Anda beri makan dan dalam kasus kami di
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
data yang Anda makan, jadi output komponen untuk setiap item dalam data dan di sini saya
dapat menunjuk
item render list yang harus dipanggil. Sekarang ini tidak
akan berhasil karena beberapa alasan. Pertama, item daftar render mengharapkan dua nilai
tetapi item render di sini di FlatList hanya akan meneruskan satu item dan itu adalah data item yang
menyimpan informasi tentang indeks dan tentang item yang akan kami cetak.
Hal lain yang akan menyebabkan masalah adalah kuncinya.
Anda mungkin ingat bahwa FlatList mengharapkan untuk mendapatkan objek dalam array yang Anda lewati di mana setiap objek memiliki
properti kunci yang dapat diekstrak dan digunakan sebagai kunci untuk rendering ulang yang efisien.
Sekarang kita tidak memiliki array objek di sini, kita memiliki array angka dan itu tidak akan berfungsi.
Sekarang kita dapat menambahkan extractor kunci di sini ke FlatList untuk mengesampingkan default-nya, extractor kunci mengambil fungsi yang mendapatkan item
kita pada akhirnya dan kemudian kita harus memberi tahu FlatList di mana menemukan kunci kita dan secara default, ia
mencari item. kunci atau untuk item. id, di
sini kami ingin mengatakan bahwa barang itu sendiri adalah kuncinya.
Namun FlatList menginginkan kunci yang berupa string dan bukan angka, jika tidak
maka akan mendapat peringatan.
Jadi hal berikutnya yang harus kita lakukan adalah tebakan masa lalu yang kita kelola harus berupa string dan itu tidak
masalah karena kita hanya menggunakannya untuk mencetaknya ke layar, jadi kita tidak benar-benar peduli
apakah itu secara teknis disimpan sebagai angka atau sebagai string dan karenanya di sini ketika kita
menambahkan tebakan baru, kita dapat memanggil toString yang merupakan metode Javascript bawaan pada angka untuk mengubahnya menjadi tipe string
dan melakukan hal yang sama untuk nilai awal tentu saja Di sini di mana saya menambahkan tebakan awal saya, panggil
toString di sana juga dan sekarang kami
memiliki string dan karena itu mereka dapat digunakan sebagai angka. Sekarang seperti yang saya katakan, daftar item render mengharapkan
argumen yang salah, numOfRound tidak akan berfungsi seperti ini, nilainya juga tidak akan berfungsi seperti ini,
alih-alih kami mendapatkan data item
dan kami masih dapat mengharapkan argumen tambahan, Namun ini kemudian harus diharapkan sebagai argumen pertama karena kita sekarang dapat dengan mudah
pergi ke render item di sini di FlatList dan ikat argumen yang harus diteruskan, sehingga kita dapat menambahkan
argumen tambahan selain argumen default yang akan diteruskan. Sekarang bind mengharapkan ini sebagai argumen pertama sehingga kita mengatur apa
yang seharusnya merujuk pada fungsi yang kita panggil, kita tidak peduli di sini jadi saya hanya akan menambahkannya
ke ini,
Anda juga dapat mengaturnya menjadi nol, itu tidak masalah.
Argumen kedua yang kita tambahkan di sini kemudian akan menjadi argumen pertama yang diterima
oleh fungsi itu dan itu harus menjadi angka bulat
kita yang harus pastGuesses. panjangnya. Sebelumnya, saya mengurangi indeks di sini tapi itu tidak
berfungsi lagi karena saya tidak memiliki akses ke
indeks lagi, kami tidak memetakan secara manual. Jadi saya hanya akan melewati
panjang di sana dan hal baiknya adalah saya bisa mendapatkan indeks di dalam item render dari data item.
Argumen default ini juga akan diteruskan oleh Bereaksi dan argumen default secara otomatis diteruskan ke
argumen terakhir.
Jadi argumen pertama adalah argumen yang Anda atur
dalam bind, dalam hal
ini, itu hanya satu argumen, jumlah ronde kami atau panjang array kami dan kemudian argumen default yang akan
dilewati secara normal akan ditambahkan sebagai argumen tambahan di akhir daftar argumen Anda di sini.
Sekarang di sini, jumlah putaran juga
bukan nama yang cocok lagi, melainkan panjang daftar, yang terdengar seperti nama yang lebih baik
karena itulah yang kita dapatkan tetapi kemudian di sini kita dapat menghitung jumlah putaran kita dengan
menggunakan panjang daftar dan kemudian dengan mengurangi itemData. indeks karena data item yang Anda peroleh secara otomatis oleh React Native adalah objek
yang juga memiliki properti indeks yang merupakan indeks dari item yang Anda hasilkan dan Anda juga mendapatkan itemData. item dan itu item itu
sendiri yang dalam kasus kami adalah dugaan.
Kami sekarang juga tidak lagi harus menambahkan kunci di sini karena kunci itu akan dilakukan
oleh React Native berkat FlatList. Jadi itu banyak pekerjaan, sekarang
kita harus dapat menampilkan daftar lagi.
Jadi mari kita simpan ini dan mari kita
coba di sini dan itu
sepertinya berhasil, namun tentu saja kita kehilangan positioning sekarang. Sebelumnya yang kami lakukan adalah menambahkan gaya wadah konten,
daftar gaya di sini ke tampilan gulir,
hal baiknya adalah Anda dapat melakukannya di FlatList juga. Meskipun Anda dapat menambahkan gaya seperti pada tampilan gulir,
gaya ini memungkinkan Anda misalnya untuk menambahkan margin di sekitar daftar tetapi tidak memungkinkan Anda untuk menyelaraskan konten di
dalam daftar. Untuk itu sebagai
gantinya, gunakan gaya wadah konten yang didukung oleh FlatList juga dan oleh karena itu
di sini, kami juga dapat menunjuk pada daftar gaya dan karenanya ini seharusnya hanya berfungsi seperti yang
dilakukan tampilan gulir kami sebelumnya.
Jadi mari kita coba ini dan Anda akan melihat kita mulai dari bawah di sini dan sekarang kita dapat mulai menambahkan item.
Sekarang mari kita lihat apakah scrolling juga berfungsi
sebagaimana mestinya, ya itu terjadi dan kita dapat melihat item terbaru dan item tertua
dan ya ada sesuatu yang salah dengan posisi item dalam daftar item
dan saya akan kembali ke sini tetapi umumnya ini berfungsi. Mari kita juga mengujinya di Android, jadi
mari kita mulai
menebak dan berharap kita tidak menyelesaikan ini terlalu dini, tidak, itu bekerja
dan di
sini, kita juga dapat menggulir seperti yang Anda lihat. Jadi itu bekerja dengan FlatList
juga, sekarang bagaimana dengan distribusi konten aneh ini di daftar item kami?
Baik Anda akan melihat bahwa item daftar itu sendiri lebih besar dari sebelumnya.
Konten didistribusikan seolah-olah item daftar akan berakhir di sini dan memang itulah masalahnya.
Kami memiliki lebar 60% dari item daftar dan konten kami menghargai ini tetapi anehnya
batas kami tidak.
Untuk memperbaiki perilaku FlatList yang aneh ini, apa yang dapat Anda lakukan adalah Anda dapat pergi ke
daftar kontainer Anda yang menyimpan daftar keseluruhan dan mengatur lebar di sana untuk lebar daftar yang Anda inginkan di
akhir, seperti katakanlah 60% dan berikan item daftar Anda lebar 100%.
Jadi sekarang daftar kontainer secara keseluruhan lebih kecil, kurang lebar dan oleh karena itu item daftar mengasumsikan lebar itu dan memiliki lebar
yang sama dan karena
Anda jarang harus menggunakan case di mana kontainer daftar Anda harus lebih luas daripada daftar item
karena apa lagi yang akan menjadi di sana dalam daftar kontainer, itu harus menjadi solusi yang bagus.
Sekarang jika Anda melakukannya, Anda akan melihat bahwa lebarnya terlihat lebih baik tetapi sebenarnya, penentuan posisi sekarang merupakan masalah.
Nah karena sekarang kita memiliki lebar yang dikontrol pada wadah daftar luar, kita dapat menyingkirkan
menyelaraskan pusat item di sini pada daftar itu
sendiri, jadi daftar, jangan lupa, adalah gaya yang ditambahkan ke gaya wadah konten.
Kami mempertahankan gaya di sana tetapi saya menghapus selaraskan pusat item karena tidak ada
yang perlu ditengahkan sekarang, kami memiliki lebar yang ditetapkan pada wadah
daftar bukan pada item daftar, jadi berkat mereka memiliki 100%, mereka terpusat secara otomatis karena mereka mengambil lanjutkan dengan
lebar penuh dan oleh karena itu sekarang
jika kita mencoba ini lagi, ini tampaknya bekerja jauh lebih baik dan daftar item sebenarnya ditata dengan cara yang seharusnya.
Jadi jika kita memiliki yang lain di sini yang mungkin membutuhkan waktu lebih lama, ya, terlihat bagus, maka
di sini kita dapat melihat kita mendapatkan perilaku yang sama seperti sebelumnya, kita mendapatkan gaya yang bagus dan kita juga bekerja di
sekitar perilaku yang berbeda yang diberikan FlatList kepada kita. Mari kita juga mencoba ini di Android di sini dan
memulai permainan baru di
sana, oh ini tidak akan menjadi
permainan yang panjang,
cukup lama, jadi di sana juga, semuanya berjalan sebagaimana mestinya.
Dan ini adalah bagaimana Anda bisa melakukan ini dengan FlatList, seperti yang Anda lihat bekerja sedikit berbeda,
kita harus mengatasi perilaku yang berbeda
di sana ketika datang untuk menyesuaikan lebar item daftar tetapi pada akhirnya, akhirnya ini sekarang juga berfungsi dan
oleh karena itu Anda sekarang belajar cara menata barang-barang Anda dengan FlatList, dengan tampilan gulir, apa yang istimewa tentang
tampilan daftar ini atau tampilan yang dapat digulir secara umum dan bagaimana Anda masih bisa menata barang-barang Anda seperti yang
Anda inginkan.