1
00:00:02,530 --> 00:00:07,540
Nah untuk mencapai layar kita yang lain, kita perlu sesuatu yang bisa kita klik, yang bisa kita ketuk.

2
00:00:07,600 --> 00:00:12,130
Nanti kita akan memiliki kisi-kisi kategori di sini dan kita akan mengerjakan ini dalam modul

3
00:00:12,220 --> 00:00:15,990
ini juga, tetapi hanya untuk memulai dengan navigasi, saya akan menambahkan tombol,

4
00:00:16,030 --> 00:00:21,850
jadi pada layar kategori di mana saya memiliki teks ini, saya ingin menambahkan tombol yang dapat saya ketuk untuk

5
00:00:21,850 --> 00:00:23,510
pergi ke layar makanan kategori.

6
00:00:23,980 --> 00:00:34,440
Jadi di sini, saya akan menambahkan tombol Bereaksi Asli, yang bawaan dan menetapkan judul pergi ke makanan dan ketika kita

7
00:00:34,600 --> 00:00:41,630
menekan tombol ini, saya ingin memicu fungsi yang sebenarnya membawa saya ke layar

8
00:00:41,660 --> 00:00:42,890
kategori makanan.

9
00:00:42,890 --> 00:00:45,610
Sekarang kita mengatur layar makanan kategori

10
00:00:45,620 --> 00:00:53,040
di sini, tetapi bagaimana kita bisa sekarang pergi ke sana? Nah untuk ini, penting untuk mengetahui bahwa setiap komponen yang Anda

11
00:00:53,040 --> 00:01:00,360
muat dengan bantuan Bereaksi navigasi mendapat penyangga khusus yang diteruskan secara otomatis, sehingga komponen apa pun yang dipetakan ke salah satu pengidentifikasi

12
00:01:00,360 --> 00:01:02,550
layar Anda di sini, jadi

13
00:01:02,550 --> 00:01:09,390
dalam hal ini ketiga komponen ini, akan mendapatkan prop khusus. Komponen bersarang di sana tidak secara otomatis

14
00:01:09,390 --> 00:01:14,850
mendapatkannya, hanya komponen tingkat atas yang Anda petakan ke pengidentifikasi di navigator Anda.

15
00:01:14,850 --> 00:01:16,800
Jadi itu prop khusus yang saya bicarakan,

16
00:01:16,800 --> 00:01:17,810
mari kita lihat.

17
00:01:17,820 --> 00:01:23,790
Jadi di sini dalam alat peraga, kita dapat mengekstraknya dan mari kita mulai dengan alat peraga konsol log di sini, sehingga

18
00:01:23,790 --> 00:01:27,510
kita bisa mendapatkan ide dan untuk sekarang sehingga kita tidak mendapatkan kesalahan, saya

19
00:01:27,510 --> 00:01:30,480
hanya akan melewati fungsi kosong di sini untuk onPress .

20
00:01:30,480 --> 00:01:33,600
Jadi mari kita simpan ini dan mari kita lihat apa yang ada di dalam alat peraga.

21
00:01:33,690 --> 00:01:39,660
Ini ulang, kami memiliki tombol yang tidak melakukan apa-apa dan di sini di konsol, kami memang melihat alat

22
00:01:39,720 --> 00:01:40,800
peraga tidak kosong.

23
00:01:40,800 --> 00:01:42,030
Ini adalah

24
00:01:42,030 --> 00:01:48,400
objek props kami dan di sana kami memiliki prop navigasi yang dengan sendirinya adalah

25
00:01:48,420 --> 00:01:58,980
objek yang memiliki beberapa tindakan, oke tetapi yang juga memiliki misalnya pop, push, replace, reset dan fungsi navigasi, jadi banyak fungsi di sana,

26
00:01:58,980 --> 00:02:03,090
fungsi yang membantu kami berkeliling di aplikasi kami.

27
00:02:03,450 --> 00:02:09,670
Ini juga memiliki alat peraga layar, sehingga alat peraga kami memiliki alat peraga layar yang dapat kita abaikan untuk saat ini.

28
00:02:09,690 --> 00:02:17,160
Jadi ini yang ada di dalam alat peraga dan alat peraga navigasi ini, bagian navigasi yang ada

29
00:02:17,520 --> 00:02:18,680
di sana,

30
00:02:18,690 --> 00:02:25,350
sangat membantu kita, jadi alat peraga navigasi ini. Ini membantu kami di sini karena ketika kami menekan tombol ini dan

31
00:02:25,370 --> 00:02:30,270
saya akan melakukan ini dengan fungsi panah sebaris di sini, tentu saja Anda dapat memiliki fungsi terpisah yang

32
00:02:30,270 --> 00:02:32,010
Anda buat dan yang kemudian

33
00:02:32,010 --> 00:02:35,430
Anda petakan ke onPress, ini membantu kami dan ini dapat digunakan untuk bernavigasi.

34
00:02:35,490 --> 00:02:42,210
Jadi pada navigasi alat peraga, navigasi adalah alat peraga khusus yang kami dapatkan dengan React navigation karena

35
00:02:42,210 --> 00:02:46,390
kami memuat komponen layar kategori ini dengan bantuan navigator kami

36
00:02:46,740 --> 00:02:50,900
di sini, alat peraga navigasi khusus ini memiliki metode navigasi

37
00:02:50,910 --> 00:02:53,040
dan ini adalah metode utama

38
00:02:53,040 --> 00:03:01,620
Anda, yang paling penting metode untuk berkeliling dengan bantuan Bereaksi navigasi. Bagaimana cara kerja navigasi?

39
00:03:02,490 --> 00:03:12,040
Navigasi mengambil objek sebagai argumen dan di objek ini, Anda dapat mengatur nama rute yang ingin Anda

40
00:03:12,040 --> 00:03:13,150
navigasikan.

41
00:03:13,240 --> 00:03:19,720
Jadi Anda melewati properti nama rute di objek yang Anda lewati untuk bernavigasi dan sekarang penting, nama rute yang

42
00:03:19,720 --> 00:03:25,540
Anda tentukan di sini harus menjadi salah satu dari tiga nama rute yang saya atur di sini.

43
00:03:25,720 --> 00:03:31,450
Sekarang nama rute adalah pengidentifikasi yang Anda pilih pilih di depan titik dua ini, jadi nama properti di

44
00:03:31,450 --> 00:03:34,420
objek ini yang Anda lewati untuk membuat stack navigator.

45
00:03:34,420 --> 00:03:36,660
Ini adalah nama rute Anda

46
00:03:36,670 --> 00:03:42,900
dan inilah yang sekarang dapat Anda gunakan untuk navigasi. Jadi di sini saya ingin pergi ke makanan

47
00:03:42,900 --> 00:03:44,690
kategori, ini adalah nama

48
00:03:44,690 --> 00:03:48,340
rute yang ingin saya gunakan, jadi karenanya di sini,

49
00:03:48,410 --> 00:03:56,000
saya menunjuk pada makanan kategori tetapi tidak seperti ini, ini dalam Javascript akan mencari variabel kategori makanan, bukan ke string

50
00:03:56,180 --> 00:04:02,450
bernama kategori makanan karena ini pada dasarnya akan memberitahu Javascript dan Bereaksi navigasi pada akhirnya bahwa

51
00:04:02,450 --> 00:04:08,470
Anda ingin pergi ke rute yang memiliki nama makanan kategori dan itulah rute ini di sini.

52
00:04:08,470 --> 00:04:10,720
Jadi sekarang, ini adalah bagaimana Anda bisa pergi ke sana.

53
00:04:13,730 --> 00:04:21,530
Jika sekarang kita menyimpan ini dan kita klik pergi ke makanan di sini, Anda lihat kita pergi ke layar makanan, kita mendapatkan animasi

54
00:04:21,530 --> 00:04:27,020
yang bagus ini di luar kotak, kita mendapatkan tombol kembali ini yang terlihat persis seperti yang

55
00:04:27,020 --> 00:04:33,650
kita harapkan untuk dilihat pada iOS dan semua itu bekerja di luar kotak tanpa kerja ekstra, tidak ada centang,

56
00:04:33,650 --> 00:04:38,890
tidak ada kode animasi manual, kami mengeluarkan ini dari kotak berkat React navigation library.

57
00:04:38,990 --> 00:04:45,800
Jadi dengan ini, kita bisa maju dan kembali ke layar makan kita, ke layar makanan kategori dan kemudian kembali ke

58
00:04:45,800 --> 00:04:52,130
layar kategori dan ini juga berfungsi di Android. Di sana kita mendapatkan navigasi perutean khusus Android

59
00:04:52,400 --> 00:04:57,620
yang terlihat sedikit berbeda dari pada iOS, itu adalah animasi navigasi yang Anda harapkan di Android,

60
00:04:57,620 --> 00:05:01,550
tentu saja Anda juga dapat menggunakan tombol kembali perangkat untuk kemudian kembali.

61
00:05:01,550 --> 00:05:08,600
Jadi ini adalah bagaimana Anda dapat menavigasi ke layar yang berbeda dan harap perhatikan juga bahwa navigasi tentu saja

62
00:05:08,600 --> 00:05:15,530
tidak mengatakan apa-apa tentang arah yang ingin kita tuju, itu tidak memberi tahu React navigation apakah itu harus

63
00:05:15,530 --> 00:05:22,490
memutar animasi maju atau animasi mundur itu . Bereaksi navigasi secara otomatis mendeteksi ini karena di

64
00:05:22,550 --> 00:05:29,120
bawah tenda, ia mengelola tumpukan halaman yang saya bicarakan, tumpukan layar ini dan dalam tumpukan ini,

65
00:05:29,120 --> 00:05:35,060
saat ini ketika kita memulai aplikasi, kita hanya memiliki layar kategori tetapi ketika saya menekan

66
00:05:35,420 --> 00:05:42,050
tombol ini , navigasi pada akhirnya memberitahu Bereaksi navigasi bahwa karena kita melakukan ini di dalam

67
00:05:42,050 --> 00:05:47,570
komponen yang dimuat dengan navigator tumpukan, bahwa kita ingin menavigasi ke layar yang

68
00:05:47,600 --> 00:05:53,810
berbeda yang harus didorong di atas tumpukan. Ini hanyalah perilaku default dan karenanya, ia tahu bahwa ia

69
00:05:53,840 --> 00:05:59,690
ingin maju karena rute baru didorong, yang artinya ditambahkan ke tumpukan, kami ingin maju dan ketika kami mengklik

70
00:05:59,690 --> 00:06:06,080
tombol kembali yang ditambahkan secara otomatis, itu memunculkan layar ini dari tumpukan dan karena menghapus sesuatu dari tumpukan, ia tahu

71
00:06:06,170 --> 00:06:10,700
bahwa ia harus memutar animasi kembali. Jadi itulah yang terjadi di

72
00:06:10,700 --> 00:06:14,870
balik layar, Anda tidak benar-benar perlu khawatir tentang hal itu dan itu

73
00:06:14,960 --> 00:06:20,330
hal yang baik, saya hanya ingin Anda mengetahui hal itu, bahwa React navigation melakukan pekerjaan

74
00:06:20,330 --> 00:06:27,980
berat untuk Anda di sana dan mengelola setumpuk ini. layar dan animasi sesuai yang Anda butuhkan di bawah tenda untuk Anda.

75
00:06:28,120 --> 00:06:32,990
Oke, jadi itu memungkinkan kita untuk bolak-balik atau maju mundur.

76
00:06:32,990 --> 00:06:39,260
Sekarang tantangan Anda untuk kuliah berikutnya di mana kami kemudian akan melakukannya bersama adalah bahwa Anda juga akan

77
00:06:39,260 --> 00:06:44,270
melakukan hal yang sama pada layar makanan kategori dan pastikan bahwa kami juga dapat

78
00:06:44,270 --> 00:06:47,990
pergi ke MealDetailScreen dari sana. Seharusnya tidak terlalu sulit, di kuliah berikutnya, kita akan melakukannya bersama.