Ketika datang untuk menata daftar, kita tentu saja dapat menata item daftar dan juga daftar itu
sendiri.
Jadi mari kita mulai dengan item
dan di sini saya akan benar-benar memotong tanda itu di sini sehingga untuk mengatakan, sehingga kode jsx untuk item dan saya akan
menambahkan fungsi baru di luar fungsi komponen karena kita tidak benar-benar membutuhkan apa pun dari di
dalam komponen dan saya hanya akan memberi nama item daftar render ini, nama terserah Anda.
Ini adalah fungsi dan fungsi ini pada akhirnya harus mengembalikan beberapa kode jsx di sini,
jadi itu harus mengembalikan kode jsx ini di sini dan berfungsi dengan benar, tentu saja perlu mendapatkan katakanlah
nilai kita yang ingin kita hasilkan.
Jadi di sini, saya kemudian akan menggunakan nilai sebagai nilai kunci dan output di sini di antara tag teks dan
sekarang kita dapat menggunakan render daftar item di sana
di mana kita memanggil peta dan di sini, di sana saya hanya ingin menjalankan render daftar item untuk setiap item yang kita Sedang
memetakan dan saya meneruskan menebaknya sebagai nilai dalam item daftar render.
Sekarang jika kita melakukan itu, kita harus melihat hasil yang sama
seperti sebelumnya, jadi tidak ada yang terlalu mewah di sini tapi sekarang kita memiliki markup lebih ramping di sana,
kode jsx lebih ramping di sana dan memiliki kode jsx item daftar kami di sini.
Sekarang kita dapat mendesain ini dan tentu saja saya ingin gaya tampilan saya di sini, untuk ini saya
akan menambahkan gaya di sini dari stylesheet yang akan saya beri nama daftar dan
di sana, saya sebenarnya sekarang ingin memiliki dua item teks dan satu harus menjadi jumlah
putaran dan yang
kedua harus nilainya, jadi di sini saya perlu argumen tambahan, saya perlu nilai tetapi juga jumlah putaran atau numOfRound seperti yang saya
sebutkan di
sini dan saya ingin menampilkan ini secara dinamis
di sini, mungkin dengan simbol hash di depannya hanya untuk alasan gaya.
Jadi sekarang kita memiliki dua teks ini dalam daftar ini di sini
dan di sana, saya sebenarnya tidak ingin menggunakan teks tetapi teks tubuh sehingga saya memiliki styling teks standar saya.
Jadi untuk itu, mari kita mengimpor teks isi dari teks isi komponen dan menggunakan teks isi alih-alih teks normal
di sini dalam item daftar kami. Dengan itu, kita menggunakan font yang
tepat dan sekarang mari kita tambahkan objek daftar itu ke stylesheet kita sehingga kita bisa mendesain item daftar, sebenarnya ini
harus disebut item daftar karena itu dan bukan daftar.
Jadi mari kita tambahkan item daftar ke stylesheet sekarang,
seperti ini dan sekarang tentu saja kita bisa gaya ini
dengan cara apa pun yang Anda inginkan, saya akan gaya itu dengan cara yang relatif mudah di sini, cukup beri warna perbatasan
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
memiliki beberapa jarak antara item daftar
dan mereka tidak duduk tepat di samping satu sama lain. Warna latar belakang putih mungkin dan tentu
saja Anda dapat
menggunakan warna yang berbeda di sini jika Anda mau.
Nah, itu permulaan, sekarang ketika
kita menetapkan warna perbatasan, kita juga perlu mengatur lebar perbatasan di sini meskipun
jika
tidak kita tidak akan melihat perbatasan dan saya akan mengatur ini menjadi satu dan sangat penting, saya ingin memiliki
ini dua komponen teks dalam pandangan saya duduk bersebelahan dan tidak di atas satu sama lain
yang akan menjadi default karena tampilan menggunakan flexbox dan menggunakan arah lengkung kolom default agar item
duduk bersebelahan di sumbu horizontal, kami menambahkan baris arah fleksibel di sini seperti ini.
Dan dengan itu jika kita menyimpan ini dan aplikasi membangun kembali, mari kita coba dan lihat bagaimana
kelihatannya, ya itu terlihat baik-baik saja tetapi masih ada ruang untuk perbaikan.
Sebagai contoh, saya ingin menetapkan lebar pada item daftar itu untuk memastikan bahwa itu tidak
hanya selebar kontennya diperlukan tetapi selebar yang kita katakan. Sekarang untuk menambahkan lebar, Anda dapat menambahkan lebar di sini untuk daftar item
tetapi
jika kita melakukan itu dan mengatur ini untuk katakanlah 80%, Anda benar-benar akan melihat bahwa ini berperilaku tidak dengan cara
yang Anda inginkan berperilaku benar, jadi
ini tidak tidak terlihat
benar, sekarang kontennya entah bagaimana dipindahkan tetapi item itu sendiri tentu tidak lebih luas. Untuk menata daftar dengan benar, cara terbaik
adalah dengan membungkusnya menjadi tampilan dan kemudian gaya tampilan ini.
Jadi di sini,
kita dapat menambahkan tampilan, memberikan gaya
katakanlah daftar, jadi di sini saya merujuk ke daftar gaya dan menambahkan objek daftar ini ke stylesheet kita sekarang,
seperti ini dan pada daftar ini, kita sekarang dapat menetapkan lebar 80% dan singkirkan lebar di sini pada daftar item.
Jika kami melakukan ini dengan tampilan pembungkus ini, Anda sekarang melihat item daftar memiliki tampilan yang benar dan itu
hanya sesuatu yang harus diperhatikan.
Jika Anda ingin mengontrol ketinggian atau lebar daftar Anda, dari tampilan gulir Anda, maka jangan menambahkan gaya ke
item daftar, juga
jangan menambahkannya secara langsung ke tampilan gulir karena bagaimana ini bekerja secara internal tetapi alih-alih
hanya membungkus tampilan di sekitar tampilan gulir tempat Anda mengatur lebar dan tinggi yang diinginkan.
Sekarang yang akan Anda perhatikan adalah bahwa pada item daftar, alangkah baiknya jika kita memiliki angka
bulat yang dihasilkan di sana dan kemudian memiliki jarak antara angka bulat dan tebakan kita yang sebenarnya
dan untuk mencapai ini, untuk itu kita perlu
mengatur gaya di sini pada daftar item, kita dapat mengatur justifyContent yang mengontrol bagaimana konten tampilan ini diletakkan di sepanjang sumbu utama
yang mencerminkan arah sebagai sumbu horizontal dan di sana, saya akan menggunakan ruang sekitar untuk mendistribusikan ruang kosong
yang tersedia di sekitar kita item teks di sini dan sekarang untuk juga menampilkan jumlah putaran yang kita harapkan
sebagai argumen di sini dalam item render list, kita bisa turun ke fungsi peta kita dan di sana, kita benar-benar mendapatkan argumen
kedua dalam fungsi ini yang memetakan panggilan secara otomatis dan itu adalah indeks dari item yang kami
hasilkan, sehingga
kami dapat meneruskan indeks itu di sini untuk merender item daftar atau indeks plus 1 karena itu akan mulai dari
0 dan kami mungkin ingin mencetak satu untuk putaran pertama alih-alih 0.
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
ruang ke ruang antara, saya pikir itu terlihat lebih baik tetapi sebelum saya menyimpan ini dan memperbarui
ini, Anda akan juga perhatikan bahwa satu masalah yang Anda miliki dengan itu adalah bahwa angka bulat sebenarnya tidak
benar.
Babak pertama adalah babak paling bawah karena kami menambahkan babak baru di awal daftar, oleh
karena itu indeks bukan ukuran yang tepat untuk nomor rute karena indeks selalu 0 atau jika kita menambahkan 1,
itu 1, untuk daftar pertama item tetapi item daftar
pertama sebenarnya bukan babak pertama kami, alih-alih karena kami
menambahkan putaran baru sebagai item daftar pertama, item daftar pertama adalah putaran terbaru kami dan tentu
saja bukan yang pertama.
Jadi untuk memperbaikinya, apa yang bisa kita lakukan adalah di sini dalam render daftar item, daripada menggunakan indeks, kita tentu saja dapat menggunakan
daftar tebakan masa lalu kita di sini dan mendapatkan panjang daftar itu dan kemudian mengurangi indeks dari itu dan yang memberi kita
sebenarnya angka bulat yang benar untuk item daftar yang diberikan.
Jadi sekarang jika kita melakukan itu dan kita restart ini, sekarang kita melihat putaran nomor satu adalah tebakan tujuh dan itu tetap
nomor satu jika kita menambahkan
tebakan lain dan sekarang ini tampaknya berfungsi dengan baik di sini.
Anda juga akan melihat bahwa begitu kita melampaui batas-batas kita di sini, tentu saja kita dapat menggulir
daftar dan itu juga berfungsi seperti seharusnya.
Mari kita juga mencoba ini di Android di sini, mari kita mulai permainan baru di sana dan mari kita berharap kita tidak
menang terlalu dini, ya itu tampaknya
berhasil tetapi di sana, saya sebenarnya tidak dapat menggulir.
Jadi pada Android, ini sebenarnya tidak berfungsi dengan benar, daftar
ini tidak dapat digulir di sana.
Jadi apa yang salah di Android?
Sekarang sementara ia menggulir dengan baik di iOS,
untuk tampilan gulir yang bersarang dalam tampilan untuk menggulir juga di Android, pastikan bahwa tampilan di sekitarnya benar-benar menggunakan
flex, jadi tambahkan ini ke
gaya daftar di sini yang merupakan gaya yang diterapkan untuk tampilan yang melilit
tampilan gulir.
Dengan itu ditambahkan, jika kita sekarang mencoba ini lagi di
Android, Anda sekarang akan melihat bahwa sekarang ini dapat digulir segera setelah Anda melampaui batas layar dan di
iOS, itu masih akan berfungsi seperti sebelumnya
dan itu menjadi iOS, kita bisa bahkan menggulir tanpa melampaui
batas, itu hanya perilaku iOS default yang dapat Anda sedikit menyeimbangkan daftar tersebut.
Jadi sekarang kita memiliki daftar yang dapat digulir di sini dengan tampilan dan peta gulir dan berfungsi pada Android dan
iOS.