1
00:00:02,410 --> 00:00:07,070
Jadi untuk modul ini, terpasang Anda menemukan lagi proyek awal yang sederhana.

2
00:00:07,090 --> 00:00:09,640
Di sana Anda memiliki aplikasi. File js dengan tampilan

3
00:00:09,790 --> 00:00:11,680
kosong, jadi tidak terlalu banyak terjadi di sana.

4
00:00:11,770 --> 00:00:16,870
Anda mendapatkan folder konstanta dengan warna dasar yang saya atur untuk Anda dan hanya itu.

5
00:00:16,870 --> 00:00:21,010
Selain itu, tidak ada yang menarik di sini, ini adalah aplikasi yang sangat

6
00:00:21,010 --> 00:00:25,320
mendasar yang sekarang akan kita gunakan untuk membangun aplikasi ini yang baru saja saya sketsa.

7
00:00:25,420 --> 00:00:28,930
Sekarang tentu saja, Anda benar-benar dapat melanjutkan dan membangun dasar-dasarnya

8
00:00:28,930 --> 00:00:34,870
sendiri, jadi tiga layar berbeda ini yang pada akhirnya kita butuhkan atau empat layar berbeda, satu untuk semua tempat,

9
00:00:34,870 --> 00:00:40,390
satu untuk detail tempat, satu untuk membuat yang baru tempat dan satu untuk peta layar penuh yang

10
00:00:40,390 --> 00:00:45,590
juga ingin kami tunjukkan, Anda benar-benar dapat melakukan itu dan membangun kerangka dasar untuk layar ini

11
00:00:45,590 --> 00:00:51,100
sendiri, juga mengatur navigasi dasar karena ini tentu saja semua hal yang sudah kami lakukan berulang kali

12
00:00:51,370 --> 00:00:52,600
dalam kursus ini.

13
00:00:52,750 --> 00:00:57,310
Ini juga hal yang akan saya mulai dengan kuliah berikutnya jika Anda ingin mengikuti di sana

14
00:00:57,310 --> 00:01:01,000
atau membandingkan solusi Anda dengan saya dan setelah itu, kami akan

15
00:01:01,090 --> 00:01:09,150
menyelami daging modul ini, kami akan menyelami bagaimana cara menambahkan kemampuan perangkat asli . Jadi mari kita mulai dengan dasar-dasar karena

16
00:01:09,210 --> 00:01:10,510
itu.

17
00:01:10,510 --> 00:01:17,080
Saya akan menambahkan layar folder baru dengan empat layar yang ingin saya miliki dan itu akan

18
00:01:17,080 --> 00:01:28,360
menjadi file layar daftar tempat, file layar detail tempat, file layar tempat baru dan juga layar peta di mana kita kemudian dapat melihat layar penuh ini map

19
00:01:28,360 --> 00:01:33,770
dan saya akan mengisinya dengan konten di seluruh modul ini, tetapi ini adalah

20
00:01:33,820 --> 00:01:36,970
empat layar dasar yang saya perlukan.

21
00:01:36,970 --> 00:01:43,460
Saya juga akan menambahkan folder navigasi sehingga kita dapat mengatur navigasi di sana dan di sini

22
00:01:43,470 --> 00:01:51,030
saya akan mengatur PlacesNavigator saya. file js. Sekarang dalam proyek awal yang saya sediakan,

23
00:01:51,450 --> 00:01:52,920
Bereaksi navigasi dan

24
00:01:52,920 --> 00:01:56,720
semua dependensinya sudah diinstal, jadi jika Anda menggunakannya, Anda tidak

25
00:01:58,260 --> 00:02:03,480
perlu menginstalnya secara manual, jika tidak, jika Anda menggunakan proyek awal Anda sendiri, pastikan Anda

26
00:02:03,480 --> 00:02:09,660
instal React navigation dengan npm install React navigation dan pastikan Anda menginstal dependensi tambahan ini di sini

27
00:02:09,660 --> 00:02:12,280
untuk memastikan React navigation berfungsi dengan expo.

28
00:02:12,330 --> 00:02:19,290
Jadi dengan itu diinstal, sekarang tentu saja kita dapat mengatur navigasi di sini di navigator tempat dan untuk

29
00:02:19,380 --> 00:02:24,150
itu, di sini saya akan mengimpor dari Navigasi Bereaksi dan apa yang

30
00:02:26,730 --> 00:02:31,020
akan saya impor tentu saja fungsi penciptaan navigator tumpukan, jadi

31
00:02:31,020 --> 00:02:37,110
buat navigator tumpukan dan juga membuat wadah aplikasi yang juga perlu kita lakukan karena kita harus

32
00:02:37,110 --> 00:02:41,580
melakukan keduanya - membuat stack navigator dan mengatur wadah aplikasi sesudahnya.

33
00:02:41,580 --> 00:02:46,830
Sekarang kita juga perlu mengimpor layar yang ingin kita kerjakan dan itu akan menjadi layar daftar tempat yang akan saya

34
00:02:47,070 --> 00:02:53,640
impor dari folder layar dan di sana, itu adalah layar daftar tempat. Kita juga akan memerlukan layar detail

35
00:02:53,640 --> 00:02:59,910
tempat, layar detail tempat yang diimpor dari layar layar detail tempat dan

36
00:02:59,910 --> 00:03:02,850
juga, jelas dua layar lainnya.

37
00:03:02,850 --> 00:03:12,800
Jadi kami mendapatkan layar tempat baru dari layar, layar tempat baru dan yang terakhir, kami juga perlu mengimpor layar peta kami

38
00:03:12,830 --> 00:03:18,770
di sini dari folder layar dan kemudian itu akan menjadi layar peta.

39
00:03:18,770 --> 00:03:26,800
Sekarang kita dapat mengatur navigator tumpukan kami di sini dan saya akan menyimpan navigator tempat ini secara konstan

40
00:03:26,990 --> 00:03:31,440
dan seperti yang Anda pelajari, kami sekarang memetakan pengidentifikasi ke

41
00:03:31,550 --> 00:03:38,720
layar kami, jadi kami mungkin menemukan pengidentifikasi tempat yang dipetakan ke layar daftar tempat. , kami

42
00:03:38,840 --> 00:03:41,180
mendapat pengidentifikasi detail tempat

43
00:03:41,180 --> 00:03:49,300
yang dipetakan ke layar detail tempat, kami juga mendapat pengidentifikasi tempat yang dipetakan ke layar tempat yang baru

44
00:03:49,330 --> 00:03:57,040
dan yang terakhir, mungkin peta dipetakan ke layar peta. Dan dengan itu, kita dapat mengatur beberapa opsi navigasi default di

45
00:03:57,130 --> 00:04:02,680
sini, jadi saya akan memberikan argumen kedua dan tentu saja mengatur ini sepenuhnya opsional tetapi saya akan

46
00:04:02,680 --> 00:04:09,970
menambahkan opsi nav default untuk setiap layar karena itu dan saya ingin menentukan gaya tajuk di sini dan pastikan bahwa di sana kita

47
00:04:09,970 --> 00:04:14,010
menggunakan warna latar belakang tergantung pada apakah kita menjalankan Android atau tidak.

48
00:04:14,140 --> 00:04:21,880
Oleh karena itu saya akan mengimpor platform API ini dari React Native dan saya juga akan membutuhkan warna saya, jadi saya

49
00:04:21,910 --> 00:04:30,790
juga akan mengimpor warna dari Konstanta / warna, itu juga diperlukan karena dengan itu, kita sekarang dapat memeriksa apakah sistem operasi platform adalah Android

50
00:04:30,790 --> 00:04:37,120
dan jika ya, kita dapat memastikan bahwa warna latar header adalah warna utama kita, jika tidak

51
00:04:37,120 --> 00:04:39,400
saya tidak akan menetapkan warna,

52
00:04:39,580 --> 00:04:46,600
saya ingin menggunakan tampilan transparan default yang digunakan iOS dan di sini juga mengatur warna tajuk warna header

53
00:04:46,600 --> 00:04:53,080
untuk teks di sana, sekali lagi memeriksa platform karena jika platform adalah Android karena kita memiliki latar

54
00:04:53,080 --> 00:04:59,560
belakang yang solid, saya akan mengatur warna warna menjadi putih, untuk iOS saya akan melakukan yang sebaliknya,

55
00:04:59,590 --> 00:05:06,520
di sana saya akan mengaturnya ke saya warna primer. Sekarang di sini, saya tidak memiliki font khusus dalam proyek ini,

56
00:05:06,520 --> 00:05:12,790
tentu saja Anda dapat menambahkan beberapa jika Anda mau. Dengan pengaturan ini, kita dapat mengekspor wadah aplikasi yang

57
00:05:12,790 --> 00:05:21,230
perlu kita buat dengan membuat wadah aplikasi dan mengirimkan navigator tempat di sini. Sekarang navigasi sudah diatur, tentu saja

58
00:05:21,230 --> 00:05:24,620
di aplikasi.

59
00:05:24,620 --> 00:05:24,620
File js sekarang kita bisa menggunakannya.

60
00:05:24,620 --> 00:05:32,200
Jadi di sini kita harus mengimpor navigator tempat dari folder navigasi, navigator tempat, kita tidak perlu melihat impor di sini

61
00:05:32,240 --> 00:05:39,920
lagi karena itu dan kita bisa mengembalikan navigator tempat. Karena saya tidak memuat font khusus, saya juga

62
00:05:39,920 --> 00:05:44,540
tidak perlu melakukan aplikasi ini memuat hal-hal yang kami lakukan sebelumnya

63
00:05:44,540 --> 00:05:49,610
atau dalam modul lain, di sini saya bisa mengembalikan ini sejak awal.

64
00:05:51,500 --> 00:05:58,660
Sekarang di layar ini di sini, di layar daftar tempat, saya akan mengimpor Bereaksi dari Bereaksi, saya akan mengimpor

65
00:05:58,700 --> 00:06:01,190
beberapa hal dari Bereaksi Asli, mungkin

66
00:06:01,220 --> 00:06:02,070
tampilan, teks

67
00:06:02,120 --> 00:06:08,570
dan stylesheet dan kemudian kita dapat melihat apakah kita memerlukan sesuatu yang lain kemudian dari Bereaksi Asli dan

68
00:06:08,600 --> 00:06:15,740
kemudian tetapkan konstanta di sini, layar daftar tempat adalah komponen Bereaksi normal yang menerima alat peraga dan yang akhirnya

69
00:06:15,740 --> 00:06:19,550
mengembalikan beberapa konten, di sini saya hanya akan mengembalikan tampilan

70
00:06:19,550 --> 00:06:24,330
dengan teks layar daftar tempat, jadi hanya beberapa konten dummy untuk saat ini

71
00:06:24,590 --> 00:06:30,230
dan mengatur stylesheet di sini dengan Stylesheet. buat dan akhirnya,

72
00:06:31,190 --> 00:06:34,800
ekspor layar daftar tempat.

73
00:06:34,800 --> 00:06:37,420
Dan ini akan menjadi kerangka dasar yang dapat kita gunakan untuk

74
00:06:37,430 --> 00:06:40,880
setiap tampilan, jadi saya akan memasukkannya ke setiap tampilan dan hanya menyesuaikan nama ini di sini.

75
00:06:40,880 --> 00:06:48,250
Jadi di sini kita memiliki layar detail tempat yang ingin saya gunakan dan kemudian salin juga di layar tempat baru dan

76
00:06:48,850 --> 00:06:52,720
ganti nama ini di sini di ketiga tempat dan terakhir

77
00:06:52,720 --> 00:06:58,300
tetapi tidak kalah pentingnya, juga taruh ini ke layar peta untuk memilikinya di sini sebagai baik

78
00:06:58,300 --> 00:07:02,650
dan tentu saja kita akan menambahkan konten nyata di seluruh modul ini.

79
00:07:02,800 --> 00:07:05,530
Jadi itulah layar yang dibuat, jika kita

80
00:07:05,530 --> 00:07:12,190
sekarang menyimpannya dan Anda menjalankan ini dengan mulai npm atau dengan mulai expo dan Anda menjalankannya di

81
00:07:12,220 --> 00:07:18,660
emulator atau emulator favorit Anda, setelah bangunan ini selesai, kita akan melihat layar daftar tempat

82
00:07:18,990 --> 00:07:21,020
pada akhirnya, seperti ini.

83
00:07:21,120 --> 00:07:26,790
Sekarang tentu saja, kita tidak memiliki judul header di sini, jadi mari kita pastikan kita menetapkan satu,

84
00:07:27,180 --> 00:07:34,830
juga di Android dengan pergi ke layar daftar tempat dan di sana, kita dapat menambahkan opsi navigasi layar daftar tempat dan mengatur ini

85
00:07:34,830 --> 00:07:42,690
ke objek statis di sini di mana kita dapat menambahkan judul tajuk dari semua tempat atau sesuatu seperti itu dan dengan itu tentu saja,

86
00:07:42,690 --> 00:07:47,840
setelah ini dimuat kembali, kita melihat judul itu di sini di layar daftar tempat.

87
00:07:48,030 --> 00:07:55,260
Jadi itulah pengaturan dasar layar yang akan kita perlukan untuk modul ini di sini. Dengan itu sebelum kita menyelam lebih dalam ke

88
00:07:55,260 --> 00:07:58,530
konten layar lain, mari kita benar-benar memastikan bahwa

89
00:07:58,650 --> 00:08:04,020
kita memiliki tombol plus di sini di header juga yang membawa kita

90
00:08:04,020 --> 00:08:10,770
ke layar tempat baru karena di situlah kita dapat memulai dengan memanfaatkan fungsi perangkat asli

91
00:08:10,770 --> 00:08:13,010
dan dengan menambahkan tempat.

92
00:08:13,090 --> 00:08:20,200
Sekarang tentu saja Anda tahu bagaimana cara menambahkan tombol ke header navigator Anda, yang perlu Anda lakukan adalah menginstal paket

93
00:08:20,200 --> 00:08:27,040
baru dengan instal npm - simpan dan itulah paket tombol header reaksi-navigasi yang kami gunakan beberapa kali selama kursus

94
00:08:27,040 --> 00:08:32,170
ini dan saya akan menggunakannya dengan cara yang sama persis seperti yang saya

95
00:08:32,170 --> 00:08:33,790
gunakan di sisa kursus.

96
00:08:33,880 --> 00:08:39,880
Jadi saya akan membuat folder komponen di mana saya dapat mengatur komponen

97
00:08:40,000 --> 00:08:51,020
tombol tajuk saya sendiri agar komponen tombol yang dapat digunakan kembali yang telah dikonfigurasikan sebelumnya dan dalam komponen itu, saya mengimpor tombol tajuk

98
00:08:51,080 --> 00:09:02,460
dari paket tombol tajuk navigasi Bereaksi yang baru saja kami pasang. Impor ionik dari expo / vector-icons, sebuah paket yang mungkin ingin Anda

99
00:09:02,510 --> 00:09:07,110
instal seandainya Anda mendapatkan kesalahan di sini dengan instal npm

100
00:09:07,110 --> 00:09:18,840
- simpan dan juga impor konstanta warna dari folder konstanta dan di sana, file warna dan kemudian di sini kami memiliki tombol tajuk ubahsuaian komponen

101
00:09:18,840 --> 00:09:24,870
biasa yang menerima alat peraga yang mengembalikan beberapa jsx dan di sini saya

102
00:09:24,880 --> 00:09:31,260
ingin mengembalikan tombol tajuk yang kami impor tetapi sekarang kami hanya akan mengonfigurasinya ke

103
00:09:31,260 --> 00:09:32,750
persyaratan kami.

104
00:09:33,000 --> 00:09:39,240
Pertama-tama dengan meneruskan semua alat peraga ke sana dan kemudian kita dapat mengatur komponen ikon ke

105
00:09:39,270 --> 00:09:40,480
ionicon sehingga

106
00:09:40,590 --> 00:09:47,250
ini digunakan, mengatur ukuran ikon di sini mungkin ke 23 karena saya pikir itu bekerja dengan sangat baik

107
00:09:47,250 --> 00:09:48,870
sejauh ini dan mengatur

108
00:09:48,870 --> 00:09:57,240
warnanya dan sekarang saya akan memerlukan satu impor lainnya, saya harus mengimpor platform dari React Native karena sekarang saya ingin memeriksa platform

109
00:09:57,600 --> 00:09:59,940
di sini dan jika platformnya adalah

110
00:10:01,560 --> 00:10:07,470
Android, kita akan memiliki latar belakang yang solid, jadi saya ingin menggunakan putih sebagai warna

111
00:10:07,800 --> 00:10:10,680
ikon, jika tidak saya menggunakan warna primer saya.

112
00:10:10,740 --> 00:10:16,080
Sekarang dengan itu, satu-satunya hal yang tersisa untuk dilakukan adalah mengekspor tombol header kustom ini di sini dan sekarang

113
00:10:16,080 --> 00:10:20,600
kita dapat mulai menggunakannya di layar daftar tempat. Di sana juga seperti

114
00:10:20,610 --> 00:10:29,280
sebelumnya, saya mengimpor dua paket lain dari tombol reaksi-navigasi-tajuk, dua hal lain dari paket ini dan itu akan menjadi

115
00:10:29,280 --> 00:10:36,480
tombol tajuk dan item saya, keduanya perlu diimpor dan selain itu, kami juga dapat mengimpor sendiri

116
00:10:36,480 --> 00:10:42,810
tombol tajuk ubahsuaian sekarang dari folder komponen dan di sana dari file tombol tajuk

117
00:10:42,810 --> 00:10:48,060
ini yang baru saja kami gunakan. Tetapi dengan yang diimpor, kita dapat mengubah

118
00:10:48,060 --> 00:10:53,880
opsi navigasi kita di sini menjadi dinamis, di mana kita memiliki fungsi ini yang memberi kita data nav

119
00:10:54,270 --> 00:11:00,750
dan yang kemudian mengembalikan objek konfigurasi ini karena ini kemudian akan memungkinkan kita untuk juga mengikat tombol ke beberapa fungsi

120
00:11:00,750 --> 00:11:07,380
yang kami menerima melalui params rute karena di sini, saya ingin menambahkan header yang tepat untuk menambahkan tombol header saya

121
00:11:07,380 --> 00:11:12,540
dan tentu saja itu sekarang juga merupakan pola yang kami lakukan berkali-kali sepanjang kursus ini, kami

122
00:11:12,540 --> 00:11:19,560
menambahkan tombol header seperti ini dan memiliki item di sana. Pada komponen tombol tajuk, kita dapat mengatur komponen

123
00:11:19,590 --> 00:11:27,330
tombol tajuk dan menunjuk pada komponen tombol tajuk kustom kami di sini dan pada item, kami sekarang menetapkan judul, seperti

124
00:11:27,330 --> 00:11:31,930
menambahkan tempat dan kami menetapkan nama ikon di sini yang tergantung pada

125
00:11:32,010 --> 00:11:39,870
platform, jadi oleh karena itu saya benar-benar akan mengimpor API platform ini di sini dari React Native dan sekarang kita

126
00:11:39,960 --> 00:11:48,090
dapat memeriksa apakah sistem operasi platform adalah Android, jika itu yang terjadi, maka saya ingin mengatur ini ke md add, jika

127
00:11:48,240 --> 00:11:52,560
tidak untuk ios add yang menambahkan tombol tambah untuk platform spesifik,

128
00:11:52,560 --> 00:11:58,290
jadi ikuti tampilan spesifik platform itu. Kita juga perlu menambahkan fungsi onPress dan

129
00:11:58,290 --> 00:12:05,160
di sana jika kita mengetuk ini, saya hanya ingin menavigasi dengan metode navigasi di sini dan itu sebabnya

130
00:12:05,160 --> 00:12:11,310
kita perlu memiliki fungsi dinamis ini di sini, sehingga kita mendapatkan akses ke data nav dan

131
00:12:11,430 --> 00:12:19,990
kemudian navigasi, navigasi ke tempat baru dan tempat baru di sini tentu saja adalah pengidentifikasi saya di navigator tempat layar tempat baru ini.

132
00:12:20,040 --> 00:12:24,780
Jadi dengan itu, kita memiliki cara untuk pergi ke layar itu dan karenanya jika kita menyimpan ini,

133
00:12:24,780 --> 00:12:25,960
kita harus dapat melakukannya.

134
00:12:26,100 --> 00:12:32,800
Jelas saya mendapatkan kesalahan karena dalam komponen tombol tajuk, karena saya memiliki komponen Bereaksi di sana, mengimpor Bereaksi dari

135
00:12:32,920 --> 00:12:38,680
Bereaksi tidak terdengar seperti ide terburuk, jadi mari kita segera perbaiki di sini di komponen

136
00:12:38,680 --> 00:12:45,290
tombol tajuk tetapi sekarang dengan itu , karena ini dimuat ulang, kami memiliki tombol plus ini dan kami

137
00:12:45,290 --> 00:12:51,760
dapat pergi ke layar tempat baru, ke layar tempat baru, juga di sini di Android tentu saja.

138
00:12:51,980 --> 00:12:57,680
Sekarang pada layar tempat baru, karena itu kita juga dapat menambahkan opsi navigasi untuk mengatur judul, opsi

139
00:12:58,070 --> 00:13:04,010
navigasi layar tempat baru, mengaturnya ke beberapa objek statis untuk saat ini karena kita sekarang tidak perlu ini

140
00:13:04,010 --> 00:13:11,210
menjadi fungsi, kami tidak tidak memerlukan akses ke data nav, kita hanya perlu mengatur judul header untuk menambahkan tempat dan dengan itu

141
00:13:11,930 --> 00:13:17,340
jika kita menyimpannya, jelas jika kita pergi ke sana, kita melihat judul itu di header.

142
00:13:17,540 --> 00:13:20,440
Jadi ini adalah pengaturan dasar ini di sini,

143
00:13:20,570 --> 00:13:25,430
sekarang kita dapat bekerja pada layar tambah tempat itu untuk memastikan bahwa kita dapat menambahkan tempat.