1
00:00:02,470 --> 00:00:09,580
Mari kita ganti kategori konten layar boneka di sini dengan kisi kategori karena memang itulah ide di

2
00:00:09,580 --> 00:00:13,090
balik layar ini. Sekarang untuk itu,

3
00:00:13,090 --> 00:00:18,140
kita dapat menggunakan komponen yang kita gunakan sebelumnya dan itulah FlatList.

4
00:00:18,160 --> 00:00:20,980
Sejauh ini, kami menggunakan itu untuk daftar normal,

5
00:00:20,980 --> 00:00:25,490
Anda sebenarnya dapat juga membuat kotak dengannya dan itulah yang akan kami lakukan di sini.

6
00:00:25,730 --> 00:00:34,960
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

7
00:00:34,960 --> 00:00:35,530
pada

8
00:00:35,530 --> 00:00:42,520
akhirnya dan saya akan mengatur kolom angka di sini yang merupakan properti baru yang belum pernah kita lihat sebelumnya ke 2 dan

9
00:00:42,520 --> 00:00:47,950
ini menentukan berapa banyak kolom yang ingin kita miliki. Standarnya adalah 1 yang merupakan daftar normal

10
00:00:47,950 --> 00:00:53,610
tetapi Anda dapat memiliki lebih dari satu kolom di sana dan ini memberi Anda kisi secara efektif.

11
00:00:53,620 --> 00:00:55,080
Sekarang dengan itu, kita dapat

12
00:00:55,090 --> 00:00:57,070
membuat kotak tetapi tentu saja kita memerlukan beberapa

13
00:00:57,070 --> 00:00:59,640
data untuk itu, kalau tidak sulit untuk membuat kotak, kan?

14
00:01:00,590 --> 00:01:06,290
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

15
00:01:06,290 --> 00:01:10,040
hanya beberapa data dummy yang saya berikan di sini,

16
00:01:10,040 --> 00:01:16,740
kami tidak memuat ini dari server atau hal seperti itu sekarang, hanya memuatnya seperti ini sebagai gantinya.

17
00:01:16,920 --> 00:01:23,340
Saya ingin memiliki banyak kategori di sana dan untuk ini, saya akan menambahkan folder lain yang saya beri nama

18
00:01:23,520 --> 00:01:29,550
model yang pada akhirnya folder di mana saya ingin mendefinisikan bagaimana data saya dibentuk dalam aplikasi ini, bagaimana

19
00:01:29,550 --> 00:01:30,440
tampilannya .

20
00:01:30,450 --> 00:01:36,810
Jadi di sana, kita bisa menambahkan kategori. js file misalnya dan dalam file ini, semua

21
00:01:36,840 --> 00:01:43,920
yang ingin saya miliki adalah kelas yang akan saya beri nama kategori dan kelas adalah fitur standar Javascript di

22
00:01:44,040 --> 00:01:52,800
Javascript modern yang saya ekspor dan di sana saya hanya akan menentukan bagaimana objek kategori dalam aplikasi saya akan terlihat suka, sehingga kita

23
00:01:52,920 --> 00:01:59,110
pada dasarnya memiliki cara yang lebih mudah untuk membuat objek-objek ini tanpa salah ketik dan sebagainya.

24
00:01:59,130 --> 00:02:05,670
Jadi di sini, kelas kategori ini akan mengambil konstruktor dan Anda dapat menggunakan konstruktor ini yang merupakan metode default

25
00:02:05,700 --> 00:02:06,610
yang dapat

26
00:02:06,630 --> 00:02:11,790
Anda tambahkan ke kelas apa pun di Javascript untuk menginisialisasi objek berdasarkan kelas ini.

27
00:02:12,000 --> 00:02:16,350
Anda melakukan ini dengan mengharapkan beberapa argumen di sini di konstruktor dan untuk kategori, saya ingin

28
00:02:16,350 --> 00:02:22,200
mendapatkan ID untuk kategori, judul dan warna yang akan saya gunakan sebagai warna latar belakang di kisi untuk item kisi ini untuk

29
00:02:22,200 --> 00:02:23,880
kategori ini dan saya akan menyimpan

30
00:02:24,060 --> 00:02:29,460
semua data ini di properti dengan bantuan kata kunci ini. Dalam hal ini benar-benar baru

31
00:02:29,460 --> 00:02:35,670
bagi Anda, pasti menyelam ke beberapa kursus Javascript atau sumber daya terlebih dahulu karena

32
00:02:35,670 --> 00:02:38,550
ini tidak ada hubungannya dengan navigasi Bereaksi

33
00:02:38,580 --> 00:02:42,470
atau dengan Bereaksi Asli, ini adalah Javascript vanilla modern.

34
00:02:42,480 --> 00:02:44,470
Sekarang mengapa saya membuat ini?

35
00:02:44,490 --> 00:02:52,650
Karena sekarang saya dapat mengimpor kelas kategori saya dari folder model, dari kategori. File js ke dalam file data dummy dan

36
00:02:52,650 --> 00:02:56,460
kemudian menggunakannya untuk membuat beberapa data dummy.

37
00:02:56,460 --> 00:03:04,650
Sekarang Anda menemukan bahwa data dummy terlampir, terlampir Anda menemukan file Javascript dengan kategori dummy ini yang saya simpan di sebuah

38
00:03:04,860 --> 00:03:09,070
konstanta yang kemudian saya ekspor sebagai ekspor bernama di sini.

39
00:03:09,240 --> 00:03:14,200
Ini adalah beberapa data kategori boneka untuk kategori di aplikasi ini, dalam kategori ini yang

40
00:03:14,520 --> 00:03:19,290
ingin saya miliki di aplikasi ini. Ini adalah kategori yang akan saya gunakan

41
00:03:19,290 --> 00:03:25,590
dalam aplikasi ini dan ini adalah kategori yang sekarang dapat kita gunakan di dalam layar kita, di layar kategori tepatnya.

42
00:03:26,540 --> 00:03:37,110
Jadi di sana, saya ingin menambahkan kategori impor dan impor dari data / dummy-data, jadi itu mengimpor yang bernama

43
00:03:37,120 --> 00:03:40,640
konstan kita mengekspor di sana.

44
00:03:40,660 --> 00:03:44,020
Sekarang ini adalah array objek Javascript pada akhirnya, kan?

45
00:03:44,050 --> 00:03:45,610
Itulah yang kami simpan di

46
00:03:45,640 --> 00:03:51,850
sana, itu hanya sebuah array objek Javascript yang sekarang dapat kita gunakan untuk merender daftar kami atau tepatnya, kisi

47
00:03:51,850 --> 00:03:53,090
kami di sini.

48
00:03:53,170 --> 00:04:01,240
Jadi data untuk FlatList ini hanyalah array kategori saya, jadi saya hanya akan menunjuk pada kategori dan tentu

49
00:04:01,240 --> 00:04:08,510
saja kita sekarang juga perlu me-render item untuk mendefinisikan bagaimana item grid tunggal harus di-render,

50
00:04:08,510 --> 00:04:15,380
komponen mana yang harus di-render di sana. Untuk ini, saya akan menambahkan fungsi baru di sini,

51
00:04:15,380 --> 00:04:22,580
render item grid yang merupakan fungsi yang akan menerima beberapa data item pada akhirnya di sini dan yang akan mengembalikan

52
00:04:22,580 --> 00:04:25,460
elemen jsx, harus mengembalikan beberapa komponen Bereaksi

53
00:04:25,460 --> 00:04:33,950
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

54
00:04:33,950 --> 00:04:40,160
dengan teks di sana dan dalam teks itu, saya ingin membuat itemData.

55
00:04:40,160 --> 00:04:42,400
item, itulah yang kami miliki

56
00:04:42,410 --> 00:04:48,250
di FlatList jika Anda ingat modul sebelumnya, objek data item di sini memiliki properti item,

57
00:04:48,250 --> 00:04:55,520
React Native FlatList memberi Anda properti ini dan di sana, kami akan memiliki properti judul karena item kami mendapatkan

58
00:04:55,520 --> 00:05:01,940
di sini hanyalah kategori yang kami dapatkan dari data yang kami masukkan ke FlatList, jadi kami akan

59
00:05:01,970 --> 00:05:05,490
memiliki objek Javascript sebagai item di sana dan objek

60
00:05:05,630 --> 00:05:12,000
Javascript ini didasarkan pada model kami di sana-sini kami menyiapkan judul, warna dan properti ID, maka kita

61
00:05:12,040 --> 00:05:12,820
memiliki

62
00:05:12,980 --> 00:05:19,160
properti judul, maka kita dapat mengekstrak judul di sini seperti ini, kita akan menggunakan warna nanti.

63
00:05:20,250 --> 00:05:22,010
Jadi itu

64
00:05:22,080 --> 00:05:26,850
yang pertama, ini harus berhasil. Sekarang di React Native

65
00:05:26,850 --> 00:05:35,340
versi baru, Anda juga tidak perlu memberi tahu React Native bahwa ID Anda tidak bernama kunci tetapi sebenarnya

66
00:05:35,400 --> 00:05:42,270
bernama ID karena React Native versi baru menerima ID sebagai ID pada data daftar juga.

67
00:05:42,270 --> 00:05:48,300
Jika Anda akan mengikuti di versi yang lebih lama, Anda perlu menambahkan ekstraktor kunci di sini yang merupakan fungsi

68
00:05:48,630 --> 00:05:54,660
yang mendapatkan item dan indeks dan perlu mengembalikan nilai yang harus digunakan sebagai kunci, jadi dalam hal ini yang

69
00:05:54,720 --> 00:05:56,980
akan menjadi barang. id, lagi versi

70
00:05:57,030 --> 00:06:03,030
React Native yang lebih baru tidak memerlukan ini tetapi hanya untuk referensi dan untuk versi yang lebih lama, saya

71
00:06:03,030 --> 00:06:05,150
masih akan menambahkan ini di sini.

72
00:06:05,160 --> 00:06:08,610
Jadi sekarang kita kembalikan FlatList kami di sini dengan data kami.

73
00:06:08,610 --> 00:06:11,930
Jika sekarang kita menyimpan ini, kita seharusnya sudah melihat

74
00:06:11,940 --> 00:06:15,320
data kita di sini, tentu saja tidak benar-benar indah tetapi

75
00:06:15,330 --> 00:06:16,960
sebuah grid, kita memiliki

76
00:06:17,040 --> 00:06:20,000
Italia, di sebelahnya hamburger cepat dan mudah, di

77
00:06:20,130 --> 00:06:23,690
sebelahnya Jerman, itu hanya tidak terlihat seperti kotak tetapi secara teknis.

78
00:06:24,030 --> 00:06:32,250
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

79
00:06:32,250 --> 00:06:33,080
grid

80
00:06:33,090 --> 00:06:40,830
kami di sini, ke item grid tunggal dan menambahkan gaya prop di sini dan menambahkan gaya item grid atau apa pun

81
00:06:40,830 --> 00:06:42,620
yang Anda ingin beri nama

82
00:06:43,430 --> 00:06:50,700
dan kemudian di sana, saya akan menambahkan item grid ke stylesheet saya dan memberikan properti ini flex, kami ingin mengambil

83
00:06:50,700 --> 00:06:52,250
ruang sebanyak yang bisa

84
00:06:53,390 --> 00:06:57,530
didapat, simpan ini, sekarang ini sudah terlihat sedikit lebih seperti grid.

85
00:06:57,530 --> 00:07:00,640
Sekarang beberapa margin di sekitar setiap item juga akan

86
00:07:00,650 --> 00:07:08,450
bagus, jadi untuk itu kita bisa menambahkan margin dan mungkin menambahkan 15 sebagai margin di sekitar setiap item, sehingga kita memiliki lebih banyak

87
00:07:08,450 --> 00:07:10,070
jarak di semua arah dan

88
00:07:10,070 --> 00:07:12,500
dengan itu, itu tidak terlalu buruk, tentu

89
00:07:12,500 --> 00:07:18,080
saja kita sekarang juga dapat mengubah tampilan umum dan misalnya memberikan setiap item ketinggian katakanlah 150 dan

90
00:07:18,080 --> 00:07:24,230
itu sepenuhnya terserah Anda yang mana nilai yang Anda pilih di sana tetapi saya akan mengatakan dengan itu,

91
00:07:24,230 --> 00:07:25,610
itu adalah grid yang

92
00:07:25,610 --> 00:07:26,400
cukup

93
00:07:26,450 --> 00:07:31,310
bagus, tentu saja tidak menang penghargaan gaya namun kita akan ke arah yang benar.

94
00:07:32,920 --> 00:07:38,830
Sekarang sebelum kita menyelesaikan styling ini dan kita pasti memiliki beberapa pekerjaan yang harus dilakukan untuk itu, mari kita

95
00:07:38,830 --> 00:07:44,950
pastikan bahwa kita dapat mengetuk item ini dan kemudian kita pergi ke layar detail untuk item tertentu lagi, karena itu

96
00:07:45,090 --> 00:07:50,770
mari kita juga melihat bagaimana kita dapat sebenarnya menetapkan judul di tajuk sehingga kami memiliki gagasan yang lebih

97
00:07:50,770 --> 00:07:52,780
baik tentang tempat kami saat ini.