Mari kita ganti kategori konten layar boneka di sini dengan kisi kategori karena memang itulah ide di
balik layar ini. Sekarang untuk itu,
kita dapat menggunakan komponen yang kita gunakan sebelumnya dan itulah FlatList.
Sejauh ini, kami menggunakan itu untuk daftar normal,
Anda sebenarnya dapat juga membuat kotak dengannya dan itulah yang akan kami lakukan di sini.
Sekarang untuk itu di layar kategori ini, saya akan mengganti semuanya dengan FlatList di sini dan hanya menampilkan daftar datar saya di sini di layar ini yang saya kembalikan
pada
akhirnya dan saya akan mengatur kolom angka di sini yang merupakan properti baru yang belum pernah kita lihat sebelumnya ke 2 dan
ini menentukan berapa banyak kolom yang ingin kita miliki. Standarnya adalah 1 yang merupakan daftar normal
tetapi Anda dapat memiliki lebih dari satu kolom di sana dan ini memberi Anda kisi secara efektif.
Sekarang dengan itu, kita dapat
membuat kotak tetapi tentu saja kita memerlukan beberapa
data untuk itu, kalau tidak sulit untuk membuat kotak, kan?
Untuk itu, saya akan menambahkan folder baru yang akan saya beri nama data dan di sana, saya akan menambahkan data-dummy. File js karena pada akhirnya, itu
hanya beberapa data dummy yang saya berikan di sini,
kami tidak memuat ini dari server atau hal seperti itu sekarang, hanya memuatnya seperti ini sebagai gantinya.
Saya ingin memiliki banyak kategori di sana dan untuk ini, saya akan menambahkan folder lain yang saya beri nama
model yang pada akhirnya folder di mana saya ingin mendefinisikan bagaimana data saya dibentuk dalam aplikasi ini, bagaimana
tampilannya .
Jadi di sana, kita bisa menambahkan kategori. js file misalnya dan dalam file ini, semua
yang ingin saya miliki adalah kelas yang akan saya beri nama kategori dan kelas adalah fitur standar Javascript di
Javascript modern yang saya ekspor dan di sana saya hanya akan menentukan bagaimana objek kategori dalam aplikasi saya akan terlihat suka, sehingga kita
pada dasarnya memiliki cara yang lebih mudah untuk membuat objek-objek ini tanpa salah ketik dan sebagainya.
Jadi di sini, kelas kategori ini akan mengambil konstruktor dan Anda dapat menggunakan konstruktor ini yang merupakan metode default
yang dapat
Anda tambahkan ke kelas apa pun di Javascript untuk menginisialisasi objek berdasarkan kelas ini.
Anda melakukan ini dengan mengharapkan beberapa argumen di sini di konstruktor dan untuk kategori, saya ingin
mendapatkan ID untuk kategori, judul dan warna yang akan saya gunakan sebagai warna latar belakang di kisi untuk item kisi ini untuk
kategori ini dan saya akan menyimpan
semua data ini di properti dengan bantuan kata kunci ini. Dalam hal ini benar-benar baru
bagi Anda, pasti menyelam ke beberapa kursus Javascript atau sumber daya terlebih dahulu karena
ini tidak ada hubungannya dengan navigasi Bereaksi
atau dengan Bereaksi Asli, ini adalah Javascript vanilla modern.
Sekarang mengapa saya membuat ini?
Karena sekarang saya dapat mengimpor kelas kategori saya dari folder model, dari kategori. File js ke dalam file data dummy dan
kemudian menggunakannya untuk membuat beberapa data dummy.
Sekarang Anda menemukan bahwa data dummy terlampir, terlampir Anda menemukan file Javascript dengan kategori dummy ini yang saya simpan di sebuah
konstanta yang kemudian saya ekspor sebagai ekspor bernama di sini.
Ini adalah beberapa data kategori boneka untuk kategori di aplikasi ini, dalam kategori ini yang
ingin saya miliki di aplikasi ini. Ini adalah kategori yang akan saya gunakan
dalam aplikasi ini dan ini adalah kategori yang sekarang dapat kita gunakan di dalam layar kita, di layar kategori tepatnya.
Jadi di sana, saya ingin menambahkan kategori impor dan impor dari data / dummy-data, jadi itu mengimpor yang bernama
konstan kita mengekspor di sana.
Sekarang ini adalah array objek Javascript pada akhirnya, kan?
Itulah yang kami simpan di
sana, itu hanya sebuah array objek Javascript yang sekarang dapat kita gunakan untuk merender daftar kami atau tepatnya, kisi
kami di sini.
Jadi data untuk FlatList ini hanyalah array kategori saya, jadi saya hanya akan menunjuk pada kategori dan tentu
saja kita sekarang juga perlu me-render item untuk mendefinisikan bagaimana item grid tunggal harus di-render,
komponen mana yang harus di-render di sana. Untuk ini, saya akan menambahkan fungsi baru di sini,
render item grid yang merupakan fungsi yang akan menerima beberapa data item pada akhirnya di sini dan yang akan mengembalikan
elemen jsx, harus mengembalikan beberapa komponen Bereaksi
di sini dan saya akan menunjuk pada render grid item di sini. Sekarang di sana, saya akan membuat tampilan dan untuk menjaga hal-hal sederhana, karena sekarang ini akan menjadi tampilan
dengan teks di sana dan dalam teks itu, saya ingin membuat itemData.
item, itulah yang kami miliki
di FlatList jika Anda ingat modul sebelumnya, objek data item di sini memiliki properti item,
React Native FlatList memberi Anda properti ini dan di sana, kami akan memiliki properti judul karena item kami mendapatkan
di sini hanyalah kategori yang kami dapatkan dari data yang kami masukkan ke FlatList, jadi kami akan
memiliki objek Javascript sebagai item di sana dan objek
Javascript ini didasarkan pada model kami di sana-sini kami menyiapkan judul, warna dan properti ID, maka kita
memiliki
properti judul, maka kita dapat mengekstrak judul di sini seperti ini, kita akan menggunakan warna nanti.
Jadi itu
yang pertama, ini harus berhasil. Sekarang di React Native
versi baru, Anda juga tidak perlu memberi tahu React Native bahwa ID Anda tidak bernama kunci tetapi sebenarnya
bernama ID karena React Native versi baru menerima ID sebagai ID pada data daftar juga.
Jika Anda akan mengikuti di versi yang lebih lama, Anda perlu menambahkan ekstraktor kunci di sini yang merupakan fungsi
yang mendapatkan item dan indeks dan perlu mengembalikan nilai yang harus digunakan sebagai kunci, jadi dalam hal ini yang
akan menjadi barang. id, lagi versi
React Native yang lebih baru tidak memerlukan ini tetapi hanya untuk referensi dan untuk versi yang lebih lama, saya
masih akan menambahkan ini di sini.
Jadi sekarang kita kembalikan FlatList kami di sini dengan data kami.
Jika sekarang kita menyimpan ini, kita seharusnya sudah melihat
data kita di sini, tentu saja tidak benar-benar indah tetapi
sebuah grid, kita memiliki
Italia, di sebelahnya hamburger cepat dan mudah, di
sebelahnya Jerman, itu hanya tidak terlihat seperti kotak tetapi secara teknis.
Sekarang untuk membuatnya terlihat lebih seperti kotak, kita tentu saja perlu menambahkan lebih banyak gaya. Sekarang untuk mengubah sedikit gaya itu, kita bisa pergi ke item
grid
kami di sini, ke item grid tunggal dan menambahkan gaya prop di sini dan menambahkan gaya item grid atau apa pun
yang Anda ingin beri nama
dan kemudian di sana, saya akan menambahkan item grid ke stylesheet saya dan memberikan properti ini flex, kami ingin mengambil
ruang sebanyak yang bisa
didapat, simpan ini, sekarang ini sudah terlihat sedikit lebih seperti grid.
Sekarang beberapa margin di sekitar setiap item juga akan
bagus, jadi untuk itu kita bisa menambahkan margin dan mungkin menambahkan 15 sebagai margin di sekitar setiap item, sehingga kita memiliki lebih banyak
jarak di semua arah dan
dengan itu, itu tidak terlalu buruk, tentu
saja kita sekarang juga dapat mengubah tampilan umum dan misalnya memberikan setiap item ketinggian katakanlah 150 dan
itu sepenuhnya terserah Anda yang mana nilai yang Anda pilih di sana tetapi saya akan mengatakan dengan itu,
itu adalah grid yang
cukup
bagus, tentu saja tidak menang penghargaan gaya namun kita akan ke arah yang benar.
Sekarang sebelum kita menyelesaikan styling ini dan kita pasti memiliki beberapa pekerjaan yang harus dilakukan untuk itu, mari kita
pastikan bahwa kita dapat mengetuk item ini dan kemudian kita pergi ke layar detail untuk item tertentu lagi, karena itu
mari kita juga melihat bagaimana kita dapat sebenarnya menetapkan judul di tajuk sehingga kami memiliki gagasan yang lebih
baik tentang tempat kami saat ini.