1
00:00:02,380 --> 00:00:07,300
Jadi mari kita bekerja pada porting seluruh logika kita di sini di navigator aplikasi.

2
00:00:07,300 --> 00:00:13,870
Kami mulai dengan tumpukan boneka ini di sini dan itu bagus tapi akhirnya bukan yang kita butuhkan.

3
00:00:13,900 --> 00:00:19,390
Sekarang terserah Anda di mana Anda melakukan konfigurasi itu, tetapi karena kami melakukannya pada dasarnya di file

4
00:00:19,390 --> 00:00:20,560
navigator toko sebelumnya.

5
00:00:20,560 --> 00:00:22,330
Saya juga akan terus melakukannya di sana.

6
00:00:22,360 --> 00:00:24,370
Bahkan dengan logika baru itu.

7
00:00:24,370 --> 00:00:26,560
Jadi yang akan saya lakukan adalah navigator aplikasi.

8
00:00:26,560 --> 00:00:34,190
Saya akan benar-benar menyingkirkan tumpukan saya di sini dan saya akan menyingkirkan impor ini dan saya akan menyingkirkan ini

9
00:00:34,190 --> 00:00:41,290
di sini saya akan meninggalkan wadah navigasi dan saya akan mengatur ulang impor ini meskipun pada akhirnya akan

10
00:00:41,290 --> 00:00:42,760
mengubah ini sedikit.

11
00:00:42,760 --> 00:00:49,420
Tapi sekarang mari kita beralih ke navigator berbelanja di sana pertama-tama kita dapat menghapus impor ini dari navigasi reaksi

12
00:00:49,540 --> 00:00:50,990
tidak akan membutuhkannya.

13
00:00:51,100 --> 00:00:59,140
Mari kita tinggalkan sisanya untuk sekarang, alih-alih impor yang dihapus itu kita dapat mengimpor dari pada

14
00:00:59,350 --> 00:01:08,870
stack navigasi reaksi dan semua sudah dari pada draw dan dari stack iklan kita impor membuat navigator stack dari

15
00:01:08,870 --> 00:01:12,600
slash draw kita mengimpor membuat draw navigator.

16
00:01:12,760 --> 00:01:17,050
Sekarang kita dapat gulir ke bawah dan kita dapat meninggalkan opsi nav default di sini sebenarnya.

17
00:01:17,080 --> 00:01:24,070
Untungnya nama berdering dan bagaimana Anda secara umum mengkonfigurasi hal-hal dan apa yang dapat Anda konfigurasi

18
00:01:24,070 --> 00:01:30,490
tidak benar-benar berubah hanya bagaimana Anda menerapkan konfigurasi berubah dan oleh karena itu apa yang

19
00:01:30,880 --> 00:01:40,770
pasti perlu diubah adalah bagian ini di sini navigator tumpukan pertama saya, saya sekarang akan digandakan dan kemudian dihapus atau berkomentar untuk memiliki perbandingan

20
00:01:40,770 --> 00:01:47,940
berdampingan saya akan membuat konstanta baru yang saya akan beri nama produk stack navigator hanya agar kita

21
00:01:48,420 --> 00:01:53,130
tidak memiliki nama bentrokan dan itu benar-benar jelas bahwa ini akan

22
00:01:53,130 --> 00:02:00,780
menampung setumpuk halaman setumpuk halaman layar dan kami melakukannya dengan membuat stack navigator dengan fungsi ini apa yang

23
00:02:00,780 --> 00:02:09,770
saya tunjukkan kepada Anda sebelum fungsi ini tidak memiliki parameter lagi sebagai gantinya saya akan membuat konstanta baru di sini produk

24
00:02:09,890 --> 00:02:10,670
Navigator.

25
00:02:10,670 --> 00:02:14,750
Jadi sekarang kita memiliki bentrokan nama tetapi ini akan dihapus.

26
00:02:14,870 --> 00:02:20,420
Dan ini sekarang merupakan komponen reaksi dari komponen fungsional dan kita bisa turun untuk semua

27
00:02:20,420 --> 00:02:26,210
yang disimpan dalam file terpisah hanya untuk perbandingan berdampingan ini dan karena kita memiliki segalanya dalam file

28
00:02:26,420 --> 00:02:32,390
ini sebelum sekarang saya akan mengatur semua komponen navigator ini dengan navigasi kita konfigurasi di sini dalam satu

29
00:02:32,390 --> 00:02:36,480
file ini membelah itu pasti adalah sesuatu yang dapat Anda pertimbangkan.

30
00:02:36,590 --> 00:02:44,450
Jadi di sini adalah navigator produk kami dan di sana saya sekarang akan mengembalikan produk stack navigator dot Navigator

31
00:02:44,450 --> 00:02:52,910
seperti yang Anda pelajari dan dalam produk mereka menumpuk navigator dot screen dan kami memiliki tiga layar sebelumnya sehingga saya akan

32
00:02:52,910 --> 00:02:54,860
mereplikasi ini dua kali.

33
00:02:54,860 --> 00:02:57,580
Kami juga punya tiga layar di sana.

34
00:02:57,710 --> 00:03:03,730
Sekarang kita bisa mengkonfigurasinya, mari kita berikan nama ke layar pertama dan itu akan menjadi gambaran umum produk.

35
00:03:03,980 --> 00:03:09,180
Sekarang komponen yang harus dimuat adalah komponen layar ikhtisar produk kami.

36
00:03:09,200 --> 00:03:19,130
Jadi pada dasarnya apa yang kami petakan sebelumnya juga sekarang untuk layar kedua namanya adalah detail produk.

37
00:03:19,130 --> 00:03:24,530
Jadi apa yang kami miliki di sini dan pastikan Anda menyimpan nama-nama itu

38
00:03:24,530 --> 00:03:31,400
sehingga seluruh logika navigasi yang Anda miliki di aplikasi Anda karena itu tidak harus diubah sehingga ini masih

39
00:03:31,670 --> 00:03:37,660
berfungsi dan di sini komponen yang harus dimuat ketika kita ingin mencapai layar itu adalah

40
00:03:37,660 --> 00:03:45,770
komponen layar perincian produk persis seperti yang kita punya di sana mari kita perbaiki itu dan untuk layar terakhir namanya kereta.

41
00:03:45,860 --> 00:03:52,630
Apa yang kami punya di sini dan kami ingin pergi ke layar jantung seperti ini.

42
00:03:52,670 --> 00:03:57,920
Jadi sekarang kita mengatur tumpukan navigasi ini dengan logika berbasis komponen baru ini.

43
00:03:58,010 --> 00:04:03,620
Sekarang kita dapat mengimpor ke navigator aplikasi dan untuk Ayah kita

44
00:04:03,620 --> 00:04:11,510
hanya perlu menambahkan kata kunci ekspor di depannya sehingga konstanta ini komponen ini diekspor di sini dalam

45
00:04:11,510 --> 00:04:21,980
file ini dan di navigator aplikasi kita sekarang tidak mengimpor navigator toko tetapi kita mengimpor navigator produk yang baru diekspor, kami mengimpornya

46
00:04:22,310 --> 00:04:29,910
di sini dan dalam wadah navigasi kami sekarang dapat menambahkan navigator produk seperti ini dan kami

47
00:04:29,910 --> 00:04:33,720
dapat menyingkirkan impor layar ikhtisar produk tersebut.

48
00:04:33,840 --> 00:04:35,790
Sekarang kembali ke navigator toko.

49
00:04:36,030 --> 00:04:38,840
Mari kita lihat opsi-opsi itu.

50
00:04:38,840 --> 00:04:42,360
Selanjutnya opsi navigasi yang kami miliki di sini di tumpukan ini.

51
00:04:42,360 --> 00:04:45,160
Apa yang kita lakukan dengan itu.

52
00:04:45,160 --> 00:04:52,600
Yah kami sebenarnya memiliki dua opsi di sini di navigator produk kami di navigator lama dengan logika

53
00:04:53,230 --> 00:04:55,370
lama yaitu ikon akta.

54
00:04:55,480 --> 00:05:02,800
Tumpukan ini harus ada di laci yang akan kita tambahkan nanti yang kedua adalah opsi navigasi default kami yang

55
00:05:03,010 --> 00:05:07,660
harus diterapkan ke semua layar yang merupakan bagian dari navigator ini.

56
00:05:07,660 --> 00:05:12,250
Dan sebenarnya ada juga tempat ketiga di mana kita mengkonfigurasi hal-hal di masa lalu.

57
00:05:12,280 --> 00:05:14,150
Dan itu ada di beberapa layar.

58
00:05:14,320 --> 00:05:21,680
Mari kita lihat layar ikhtisar produk kami apa yang ada di folder toko di sana jika kita gulir ke bawah.

59
00:05:21,760 --> 00:05:28,870
Kami memiliki properti opsi navigasi ini yang kami tambahkan ke objek fungsional layar ikhtisar produk dan itu adalah fungsi

60
00:05:28,870 --> 00:05:33,850
tempat kami mengonfigurasi hal-hal seperti judul header tetapi juga apa yang ada di kiri

61
00:05:33,850 --> 00:05:37,630
dan set kanan header sekarang dengan logika baru ini.

62
00:05:37,670 --> 00:05:40,650
Anda tidak melakukan itu seperti ini lagi.

63
00:05:40,650 --> 00:05:46,940
Sebagai gantinya, kami dapat menyalin seluruh pengaturan ini di sini.

64
00:05:47,170 --> 00:05:48,740
Jadi semua itu bisa kita salin.

65
00:05:48,820 --> 00:05:54,680
Kami dapat berkomentar di sini di komponen layar dan pergi ke komponen navigator aplikasi.

66
00:05:54,820 --> 00:06:00,640
Maafkan saya untuk berbelanja komponen navigator di mana kita mengatur navigasi tumpukan kita dan sekarang

67
00:06:00,640 --> 00:06:08,830
di layar di mana kita ingin memiliki opsi-opsi itu kita dapat menambahkan prop ketiga dan itulah properti de options dan dua opsi.

68
00:06:08,830 --> 00:06:16,360
Anda dapat menguraikan dengan tepat apa yang Anda miliki dalam komponen sebelumnya sehingga fungsi yang Anda lewati adalah fungsi yang

69
00:06:16,440 --> 00:06:16,990
benar.

70
00:06:17,050 --> 00:06:18,640
Yang menerima parameter

71
00:06:21,330 --> 00:06:27,900
data NAF yang kemudian mengembalikan objek konfigurasi, nilai konkret untuk parameter ini akan dimasukkan oleh

72
00:06:27,900 --> 00:06:34,950
reaksi navigasi dan nama konfigurasi yang dapat kita atur di sini hal-hal yang dapat kita konfigurasi belum

73
00:06:34,950 --> 00:06:35,540
berubah.

74
00:06:35,670 --> 00:06:38,550
Jadi kita masih bisa mengatur judul header di depan atau ke kiri.

75
00:06:38,550 --> 00:06:41,330
Jadi ini semua persis sama dengan yang Anda pelajari.

76
00:06:41,340 --> 00:06:43,290
Ia bekerja dengan cara yang persis sama.

77
00:06:43,350 --> 00:06:47,760
Untungnya sekarang kita bisa melakukannya di sini dan navigator berbelanja.

78
00:06:47,760 --> 00:06:55,200
Tapi ini tentu saja akan dengan cepat menjadi sangat besar jika kita memiliki semua konfigurasi khusus layar

79
00:06:55,440 --> 00:06:57,630
yang berbeda di sini.

80
00:06:57,630 --> 00:07:00,390
Jadi sebenarnya bukan itu yang akan saya lakukan di sini.

81
00:07:00,450 --> 00:07:03,150
Sebaliknya saya melihat dua opsi.

82
00:07:03,150 --> 00:07:10,170
Salah satunya adalah bahwa kita benar-benar melakukan pengaturan dari layar stack navigator produk di komponen layar.

83
00:07:10,170 --> 00:07:14,250
Yang kedua adalah kita hanya menyimpan pilihan kita di sana dan itulah pendekatan yang akan saya ikuti.

84
00:07:14,730 --> 00:07:23,850
Jadi kembali dalam tinjauan produk, saya akan berkomentar ini kembali tetapi sekarang di sini kita tidak lagi mengatur

85
00:07:23,900 --> 00:07:33,110
berfungsi sebagai nilai untuk props opsi navigasi tetapi kita hanya mengekspornya sebagai konstanta konstan yang harus kita beri nama

86
00:07:33,110 --> 00:07:42,360
dan saya ' akan memberi nama opsi layar ini. Tidak ada opsi layar memegang fungsi ini dan kami mengekspornya

87
00:07:42,360 --> 00:07:43,670
dengan namanya.

88
00:07:43,850 --> 00:07:49,360
Itu tidak berbenturan dengan ekspor komponen karena kami melakukannya dengan default di sini.

89
00:07:49,390 --> 00:07:57,340
Jadi sekarang kita ekspor adalah fungsi konfigurasi dan kemudian navigator toko kita dapat mengimpornya sehingga selain mengimpor

90
00:07:57,340 --> 00:08:03,940
layar ikhtisar produk dari file itu kita sekarang juga dapat menggabungkan itu dengan

91
00:08:03,970 --> 00:08:12,940
impor bernama di mana kita mengimpor ke fungsi opsi layar dan kemudian di sini dua opsi pada layar ini.

92
00:08:13,020 --> 00:08:17,840
Saya baru saja melewati pointer pada fungsi ini jangan jalankan itu hanya mengarahkannya.

93
00:08:17,910 --> 00:08:24,580
Mari kita bereaksi navigasi yang dilakukan untuk Anda sehingga dapat masuk dalam

94
00:08:24,610 --> 00:08:32,780
nilai konkret untuk fungsi parameter data NAF ini sekali dan dengan ini layar ini dikonfigurasi.

95
00:08:32,890 --> 00:08:36,490
Sekarang jika kita menyimpan bentrokan iklan itu karena kita memiliki nama ini bentrok di sana.

96
00:08:36,910 --> 00:08:41,470
Jadi untuk menyelesaikan ini mari kita pastikan kita semua mendukung opsi lain.

97
00:08:41,470 --> 00:08:47,560
Sekarang opsi pengundian khusus adalah sesuatu yang akan saya lihat nanti setelah kami menambahkan pengundian untuk

98
00:08:47,560 --> 00:08:48,850
opsi navigasi default.

99
00:08:48,850 --> 00:08:54,220
Kabar baiknya adalah kita masih bisa menerapkan yang tidak harus kita atur semuanya di tingkat layar.

100
00:08:54,220 --> 00:08:58,980
Jika kami memiliki konfigurasi bersama yang memengaruhi semua layar navigator.

101
00:08:59,080 --> 00:09:05,320
Dan bagaimana menurut Anda kami dapat mengatur opsi umum seperti itu untuk semua layar gratis ini di sini.

102
00:09:05,320 --> 00:09:09,200
Yah kami mengaturnya langsung di navigator di sana.

103
00:09:09,310 --> 00:09:15,520
Kami juga memiliki properti opsi layar kecil sehingga tidak bernama opsi tetapi opsi layar.

104
00:09:15,610 --> 00:09:21,280
Tetapi ini adalah opsi yang akan diterapkan ke setiap layar di sini dan opsi spesifik

105
00:09:21,310 --> 00:09:25,820
layar akan digabungkan dengan opsi-opsi umum ini seperti sebelumnya dalam kursus.

106
00:09:25,830 --> 00:09:29,740
Sekarang di sini kita melewati objek opsi nav default kami.

107
00:09:29,850 --> 00:09:36,360
Jadi objek ini di sana saya hanya memberi ini sebagai nilai untuk opsi layar dan hanya itu.

108
00:09:36,360 --> 00:09:41,280
Sekarang kita dapat berkomentar sebagai navigator produk di sini dan menyimpan semuanya.

109
00:09:41,360 --> 00:09:48,440
Sekarang setelah kita melakukan itu, kita masih tidak dapat melihat hasilnya karena dalam file navigator toko ini kita masih

110
00:09:48,440 --> 00:09:55,370
mendapatkan banyak kode yang menggunakan navigator lama atau logika navigator lama dan yang menyebabkan masalah di sini.

111
00:09:55,400 --> 00:10:03,090
Sekarang untuk tetap melihat hasilnya, untuk sementara saya akan mengomentari semua ini untuk sementara dan menyimpan

112
00:10:03,090 --> 00:10:03,710
kembali.

113
00:10:03,750 --> 00:10:08,660
Sehingga ini membangun kembali dan Anda lihat kami sekarang mendapatkan kesalahan.

114
00:10:08,720 --> 00:10:14,300
Ya ada satu hal yang perlu kita sesuaikan dan komponen tinjauan umum produk di

115
00:10:14,300 --> 00:10:16,800
layar kita mengarahkan header kiri.

116
00:10:16,880 --> 00:10:25,060
Ini sekarang harus berfungsi di sini yang mengembalikan marka marka JSA X kami dan sama untuk header kanan.

117
00:10:25,070 --> 00:10:30,260
Jadi kita perlu mengubah keduanya menjadi fungsi dan Anda bisa melakukannya dengan menambahkan daftar parameter kosong dan kemudian

118
00:10:30,410 --> 00:10:31,580
panah di sini.

119
00:10:31,670 --> 00:10:38,090
Catatan tambahan Anda dapat menerima parameter di sini jika Anda mau dan itu akan menjadi alat peraga

120
00:10:38,090 --> 00:10:43,910
karena ini sebenarnya adalah komponen burung yang menemukan di sini nilai konkret untuk alat

121
00:10:43,910 --> 00:10:50,240
peraga akan diumpankan dan dengan mereaksikan navigasi dan nilai yang dapat Anda dapatkan dari sana dapat ditemukan

122
00:10:50,240 --> 00:10:58,660
dalam dokumen resmi dengan penyesuaian ini dibuat jika kita sekarang aman sekarang restart di sini dan sekarang kita melihat layar itu lagi.

123
00:10:58,660 --> 00:11:01,830
Sekarang jelas mengambil konfigurasi kita.

124
00:11:01,840 --> 00:11:09,360
Ingatlah bahwa pengundian tidak akan berfungsi karena kami belum menambahkan pengundian dan navigasi, jadi dengan semua

125
00:11:09,360 --> 00:11:17,140
itu kami mempelajari bagaimana kami dapat mengonfigurasi komponen kami, layar kami, dan keseluruhan navigator tumpukan dengan

126
00:11:17,140 --> 00:11:19,930
logika baru dengan hal itu.

127
00:11:19,930 --> 00:11:26,020
Saatnya untuk terus porting Pasti merasa bebas untuk melakukan langkah-langkah selanjutnya sendiri dan port untuk

128
00:11:26,020 --> 00:11:32,620
menyaring opsi spesifik untuk detail produk dan layar kartu dan setelah itu kami akan beralih ke tumpukan

129
00:11:32,620 --> 00:11:33,090
berikutnya.

130
00:11:33,190 --> 00:11:35,230
Dan tentu saja juga menuntut undian.