1
00:00:02,250 --> 00:00:07,650
Kami mengekstraksi kategori kami di sini di komponen kami karena kami mendapatkan parameter kami di sana dengan

2
00:00:07,650 --> 00:00:09,130
bantuan alat peraga navigasi.

3
00:00:09,150 --> 00:00:12,980
Sekarang sebenarnya, saya ingin menampilkan judul di header saya.

4
00:00:13,050 --> 00:00:18,520
Sekarang Anda telah belajar bagaimana Anda dapat mengkonfigurasi tajuk itu dengan bantuan opsi navigasi, jadi

5
00:00:18,630 --> 00:00:25,170
pada komponen layar makan kategori dan oleh karena itu, ini adalah fungsi karena itu, ini adalah sebuah objek,

6
00:00:25,530 --> 00:00:30,300
kami dapat menambahkan opsi navigasi dan Anda mengetahui bahwa ini adalah Objek

7
00:00:30,300 --> 00:00:35,670
Javascript tempat Anda dapat mengatur judul header dan judul header sekarang harus nama kategori saya.

8
00:00:35,700 --> 00:00:43,910
Masalahnya di sini adalah bahwa di sini, kategori yang dipilih tersedia tetapi itu di dalam fungsi komponen.

9
00:00:43,910 --> 00:00:49,670
Itu tentu saja di sisi lain bukanlah sesuatu yang dapat kita akses di sini karena ini terjadi

10
00:00:49,670 --> 00:00:50,990
setelah definisi fungsi.

11
00:00:51,350 --> 00:00:55,150
Jadi kami tidak memiliki akses ke kategori yang kami identifikasi

12
00:00:55,220 --> 00:00:56,920
di sana, itu masalah.

13
00:00:56,930 --> 00:01:04,390
Hal yang baik adalah, opsi navigasi dapat menjadi objek jika Anda memiliki nilai konfigurasi hardcoded statis tetapi juga

14
00:01:05,000 --> 00:01:11,990
dapat berfungsi jika Anda memerlukan konfigurasi dinamis yang tergantung pada perubahan data dan tentu saja data yang

15
00:01:12,020 --> 00:01:17,300
kami andalkan di sini berubah karena kami menggunakan satu dan layar yang sama

16
00:01:17,300 --> 00:01:22,820
untuk berbagai kategori dan karenanya, ID dan judul kategori berubah setiap kali kita

17
00:01:22,820 --> 00:01:26,140
menggunakan layar itu. Suatu kali kita menggunakannya

18
00:01:26,140 --> 00:01:32,360
untuk kategori Italia, kali berikutnya kita menggunakannya untuk kategori eksotis. Fungsi ini yang juga dapat Anda gunakan, ini

19
00:01:32,360 --> 00:01:34,700
tentu saja didukung oleh React navigation

20
00:01:34,700 --> 00:01:40,220
dan jika ini adalah sebuah fungsi, apa yang Anda lewati untuk opsi navigasi, React navigation

21
00:01:40,220 --> 00:01:48,740
akan memanggilnya untuk Anda dan akan mengirimkan beberapa data navigasi, sehingga akan mengirimkan objek dengan beberapa data yang akan membantu Anda, kami akan

22
00:01:48,740 --> 00:01:54,800
melihat apa yang ada di sana dalam sedetik karena kami dapat dengan mudah mencatat data navigasi ini

23
00:01:54,800 --> 00:01:55,850
di sini.

24
00:01:55,970 --> 00:01:57,610
Mari kita mulai dengan itu, mari

25
00:01:57,710 --> 00:02:01,210
sekarang pergi ke halaman ini dan mari kita lihat apa yang ada di sana.

26
00:02:01,310 --> 00:02:05,850
Jika saya memperluas ini di sini, ini adalah log yang saya dapatkan

27
00:02:05,850 --> 00:02:14,570
dan Anda lihat kami punya alat navigasi lain dalam data navigasi. Di sana kami memiliki tindakan, kami menavigasi pop, push, jadi

28
00:02:14,580 --> 00:02:15,390
pada

29
00:02:15,390 --> 00:02:20,010
dasarnya apa yang kami tahu. Kami juga memiliki getParam

30
00:02:20,010 --> 00:02:28,050
di sana dan itu harus berguna karena ini akan memungkinkan kami untuk mengekstrak data di sini di

31
00:02:28,110 --> 00:02:36,880
dalam opsi navigasi kami pada akhirnya yang seharusnya sangat membantu. Jadi pada akhirnya, kita mendapatkan prop navigasi yang sama dengan props komponen kita.

32
00:02:37,040 --> 00:02:48,110
Jadi di sini, sekarang kita dapat menggunakan data navigasi. navigasi. getParam untuk mendapatkan ID kategori saya, persis

33
00:02:48,110 --> 00:02:54,660
seperti yang kami lakukan dalam komponen. Jadi kita dapat mengulang kode yang kita miliki dalam komponen

34
00:02:54,660 --> 00:03:02,020
dan mendapatkan kategori yang dipilih, tidak hanya dalam komponen tetapi sekarang juga dalam fungsi ini yang kita gunakan untuk mengatur opsi navigasi kita.

35
00:03:02,040 --> 00:03:08,130
Jadi sekarang di sini, kami juga mendapatkan akses ke kategori yang dipilih dan sekarang, opsi navigasi, fungsi

36
00:03:08,220 --> 00:03:13,460
ini, jika ini adalah fungsi, tentu saja harus mengembalikan objek dengan opsi navigasi Anda.

37
00:03:13,470 --> 00:03:19,860
Jadi apa yang sebelumnya kita tetapkan secara langsung sebagai opsi navigasi ketika kita hanya memiliki nilai-nilai hardcoded sekarang harus

38
00:03:19,860 --> 00:03:20,550
dikembalikan

39
00:03:20,610 --> 00:03:26,950
tetapi sekarang dapat menggunakan data yang diturunkan secara dinamis ini atau informasi yang diturunkan secara dinamis di sini.

40
00:03:26,970 --> 00:03:33,600
Jadi sekarang kita masih dapat mengatur judul tajuk di sini dan judul tajuk sekarang dapat

41
00:03:33,720 --> 00:03:35,450
dipilihKategori. judul.

42
00:03:35,510 --> 00:03:41,300
Ini adalah bagaimana kita dapat menurunkan ini secara dinamis dan oleh karena itu sekarang jika Anda kembali,

43
00:03:41,300 --> 00:03:47,420
Anda melihat Italia di sini, Anda melihat cepat dan mudah di sini, Anda melihat Jerman di sini dan itu berfungsi.

44
00:03:47,420 --> 00:03:55,280
Harap dicatat bahwa Anda juga secara default mendapatkan teks tombol kembali yang merupakan judul layar sebelumnya, itu

45
00:03:55,280 --> 00:04:01,130
fitur lain yang diberikan navigasi React. Kita melihat kembali kategori makanan di sini karena

46
00:04:01,130 --> 00:04:05,720
kita berasal dari kategori makanan. Hanya dengan cepat dan mudah di mana

47
00:04:05,720 --> 00:04:13,010
ini akan terlalu lama di sebelah judul yang sedikit lebih lama ini, itu akan kembali dan default untuk kembali, yang merupakan perilaku default yang

48
00:04:13,010 --> 00:04:19,400
baik yang bisa Anda timpa tetapi saya senang dengan di sini. Di Android, kami tidak memiliki teks kembali tetapi tentu

49
00:04:19,400 --> 00:04:25,340
saja kami memiliki tombol kembali dan di sana, tajuk juga diisi dengan benar untuk layar yang dimuat.

50
00:04:26,240 --> 00:04:32,030
Sehingga kita juga bisa mendapatkan data secara dinamis di sini di opsi navigasi. Satu masalah yang mungkin Anda perhatikan, yang paling terlihat

51
00:04:32,030 --> 00:04:37,430
di sini di Android adalah bahwa tajuk pada layar baru yang kami muat tidak memiliki gaya yang sama

52
00:04:37,700 --> 00:04:44,450
dengan tajuk kami di sini, tidak memiliki warna latar belakang yaitu. Sekarang tentu saja, itu mudah diperbaiki karena pada

53
00:04:44,480 --> 00:04:51,620
opsi navigasi dari makanan kategori, kita bisa membawa gaya header dan warna warna header yang kita atur

54
00:04:51,620 --> 00:04:58,250
di sini di layar lain juga. Jadi kita dapat menyalinnya di sini dan

55
00:04:58,250 --> 00:05:06,200
itu berarti kita harus mengimpor platform API dan tentu saja, warna konstan kita, jadi impor warna dari konstanta

56
00:05:06,550 --> 00:05:18,730
/ Warna seperti ini dan ketika kita melakukan itu, kita akan melihat bahwa jika kita pergi ke sana , kami sekarang memiliki gaya tajuk yang sama untuk halaman baru

57
00:05:18,730 --> 00:05:25,570
ini yang tentu saja apa yang Anda inginkan. Apa yang biasanya tidak Anda inginkan adalah bahwa Anda

58
00:05:25,600 --> 00:05:31,300
harus menyalin konfigurasi yang sama ke setiap layar karena di aplikasi ini, kami tidak memiliki banyak layar,

59
00:05:31,300 --> 00:05:36,070
kami tentu bisa melakukan itu tetapi dalam aplikasi yang lebih besar di mana Anda

60
00:05:36,070 --> 00:05:42,520
memiliki lebih banyak layar, yang akan menjadi sangat menjengkelkan dan super rumit, jadi jelas bukan cara untuk pergi ke sana.

61
00:05:42,520 --> 00:05:44,740
Jadi mari kita lihat alternatif dalam kuliah berikutnya.