Jadi untuk modul ini, terpasang Anda menemukan lagi proyek awal yang sederhana.
Di sana Anda memiliki aplikasi. File js dengan tampilan
kosong, jadi tidak terlalu banyak terjadi di sana.
Anda mendapatkan folder konstanta dengan warna dasar yang saya atur untuk Anda dan hanya itu.
Selain itu, tidak ada yang menarik di sini, ini adalah aplikasi yang sangat
mendasar yang sekarang akan kita gunakan untuk membangun aplikasi ini yang baru saja saya sketsa.
Sekarang tentu saja, Anda benar-benar dapat melanjutkan dan membangun dasar-dasarnya
sendiri, jadi tiga layar berbeda ini yang pada akhirnya kita butuhkan atau empat layar berbeda, satu untuk semua tempat,
satu untuk detail tempat, satu untuk membuat yang baru tempat dan satu untuk peta layar penuh yang
juga ingin kami tunjukkan, Anda benar-benar dapat melakukan itu dan membangun kerangka dasar untuk layar ini
sendiri, juga mengatur navigasi dasar karena ini tentu saja semua hal yang sudah kami lakukan berulang kali
dalam kursus ini.
Ini juga hal yang akan saya mulai dengan kuliah berikutnya jika Anda ingin mengikuti di sana
atau membandingkan solusi Anda dengan saya dan setelah itu, kami akan
menyelami daging modul ini, kami akan menyelami bagaimana cara menambahkan kemampuan perangkat asli . Jadi mari kita mulai dengan dasar-dasar karena
itu.
Saya akan menambahkan layar folder baru dengan empat layar yang ingin saya miliki dan itu akan
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
dan saya akan mengisinya dengan konten di seluruh modul ini, tetapi ini adalah
empat layar dasar yang saya perlukan.
Saya juga akan menambahkan folder navigasi sehingga kita dapat mengatur navigasi di sana dan di sini
saya akan mengatur PlacesNavigator saya. file js. Sekarang dalam proyek awal yang saya sediakan,
Bereaksi navigasi dan
semua dependensinya sudah diinstal, jadi jika Anda menggunakannya, Anda tidak
perlu menginstalnya secara manual, jika tidak, jika Anda menggunakan proyek awal Anda sendiri, pastikan Anda
instal React navigation dengan npm install React navigation dan pastikan Anda menginstal dependensi tambahan ini di sini
untuk memastikan React navigation berfungsi dengan expo.
Jadi dengan itu diinstal, sekarang tentu saja kita dapat mengatur navigasi di sini di navigator tempat dan untuk
itu, di sini saya akan mengimpor dari Navigasi Bereaksi dan apa yang
akan saya impor tentu saja fungsi penciptaan navigator tumpukan, jadi
buat navigator tumpukan dan juga membuat wadah aplikasi yang juga perlu kita lakukan karena kita harus
melakukan keduanya - membuat stack navigator dan mengatur wadah aplikasi sesudahnya.
Sekarang kita juga perlu mengimpor layar yang ingin kita kerjakan dan itu akan menjadi layar daftar tempat yang akan saya
impor dari folder layar dan di sana, itu adalah layar daftar tempat. Kita juga akan memerlukan layar detail
tempat, layar detail tempat yang diimpor dari layar layar detail tempat dan
juga, jelas dua layar lainnya.
Jadi kami mendapatkan layar tempat baru dari layar, layar tempat baru dan yang terakhir, kami juga perlu mengimpor layar peta kami
di sini dari folder layar dan kemudian itu akan menjadi layar peta.
Sekarang kita dapat mengatur navigator tumpukan kami di sini dan saya akan menyimpan navigator tempat ini secara konstan
dan seperti yang Anda pelajari, kami sekarang memetakan pengidentifikasi ke
layar kami, jadi kami mungkin menemukan pengidentifikasi tempat yang dipetakan ke layar daftar tempat. , kami
mendapat pengidentifikasi detail tempat
yang dipetakan ke layar detail tempat, kami juga mendapat pengidentifikasi tempat yang dipetakan ke layar tempat yang baru
dan yang terakhir, mungkin peta dipetakan ke layar peta. Dan dengan itu, kita dapat mengatur beberapa opsi navigasi default di
sini, jadi saya akan memberikan argumen kedua dan tentu saja mengatur ini sepenuhnya opsional tetapi saya akan
menambahkan opsi nav default untuk setiap layar karena itu dan saya ingin menentukan gaya tajuk di sini dan pastikan bahwa di sana kita
menggunakan warna latar belakang tergantung pada apakah kita menjalankan Android atau tidak.
Oleh karena itu saya akan mengimpor platform API ini dari React Native dan saya juga akan membutuhkan warna saya, jadi saya
juga akan mengimpor warna dari Konstanta / warna, itu juga diperlukan karena dengan itu, kita sekarang dapat memeriksa apakah sistem operasi platform adalah Android
dan jika ya, kita dapat memastikan bahwa warna latar header adalah warna utama kita, jika tidak
saya tidak akan menetapkan warna,
saya ingin menggunakan tampilan transparan default yang digunakan iOS dan di sini juga mengatur warna tajuk warna header
untuk teks di sana, sekali lagi memeriksa platform karena jika platform adalah Android karena kita memiliki latar
belakang yang solid, saya akan mengatur warna warna menjadi putih, untuk iOS saya akan melakukan yang sebaliknya,
di sana saya akan mengaturnya ke saya warna primer. Sekarang di sini, saya tidak memiliki font khusus dalam proyek ini,
tentu saja Anda dapat menambahkan beberapa jika Anda mau. Dengan pengaturan ini, kita dapat mengekspor wadah aplikasi yang
perlu kita buat dengan membuat wadah aplikasi dan mengirimkan navigator tempat di sini. Sekarang navigasi sudah diatur, tentu saja
di aplikasi.
File js sekarang kita bisa menggunakannya.
Jadi di sini kita harus mengimpor navigator tempat dari folder navigasi, navigator tempat, kita tidak perlu melihat impor di sini
lagi karena itu dan kita bisa mengembalikan navigator tempat. Karena saya tidak memuat font khusus, saya juga
tidak perlu melakukan aplikasi ini memuat hal-hal yang kami lakukan sebelumnya
atau dalam modul lain, di sini saya bisa mengembalikan ini sejak awal.
Sekarang di layar ini di sini, di layar daftar tempat, saya akan mengimpor Bereaksi dari Bereaksi, saya akan mengimpor
beberapa hal dari Bereaksi Asli, mungkin
tampilan, teks
dan stylesheet dan kemudian kita dapat melihat apakah kita memerlukan sesuatu yang lain kemudian dari Bereaksi Asli dan
kemudian tetapkan konstanta di sini, layar daftar tempat adalah komponen Bereaksi normal yang menerima alat peraga dan yang akhirnya
mengembalikan beberapa konten, di sini saya hanya akan mengembalikan tampilan
dengan teks layar daftar tempat, jadi hanya beberapa konten dummy untuk saat ini
dan mengatur stylesheet di sini dengan Stylesheet. buat dan akhirnya,
ekspor layar daftar tempat.
Dan ini akan menjadi kerangka dasar yang dapat kita gunakan untuk
setiap tampilan, jadi saya akan memasukkannya ke setiap tampilan dan hanya menyesuaikan nama ini di sini.
Jadi di sini kita memiliki layar detail tempat yang ingin saya gunakan dan kemudian salin juga di layar tempat baru dan
ganti nama ini di sini di ketiga tempat dan terakhir
tetapi tidak kalah pentingnya, juga taruh ini ke layar peta untuk memilikinya di sini sebagai baik
dan tentu saja kita akan menambahkan konten nyata di seluruh modul ini.
Jadi itulah layar yang dibuat, jika kita
sekarang menyimpannya dan Anda menjalankan ini dengan mulai npm atau dengan mulai expo dan Anda menjalankannya di
emulator atau emulator favorit Anda, setelah bangunan ini selesai, kita akan melihat layar daftar tempat
pada akhirnya, seperti ini.
Sekarang tentu saja, kita tidak memiliki judul header di sini, jadi mari kita pastikan kita menetapkan satu,
juga di Android dengan pergi ke layar daftar tempat dan di sana, kita dapat menambahkan opsi navigasi layar daftar tempat dan mengatur ini
ke objek statis di sini di mana kita dapat menambahkan judul tajuk dari semua tempat atau sesuatu seperti itu dan dengan itu tentu saja,
setelah ini dimuat kembali, kita melihat judul itu di sini di layar daftar tempat.
Jadi itulah pengaturan dasar layar yang akan kita perlukan untuk modul ini di sini. Dengan itu sebelum kita menyelam lebih dalam ke
konten layar lain, mari kita benar-benar memastikan bahwa
kita memiliki tombol plus di sini di header juga yang membawa kita
ke layar tempat baru karena di situlah kita dapat memulai dengan memanfaatkan fungsi perangkat asli
dan dengan menambahkan tempat.
Sekarang tentu saja Anda tahu bagaimana cara menambahkan tombol ke header navigator Anda, yang perlu Anda lakukan adalah menginstal paket
baru dengan instal npm - simpan dan itulah paket tombol header reaksi-navigasi yang kami gunakan beberapa kali selama kursus
ini dan saya akan menggunakannya dengan cara yang sama persis seperti yang saya
gunakan di sisa kursus.
Jadi saya akan membuat folder komponen di mana saya dapat mengatur komponen
tombol tajuk saya sendiri agar komponen tombol yang dapat digunakan kembali yang telah dikonfigurasikan sebelumnya dan dalam komponen itu, saya mengimpor tombol tajuk
dari paket tombol tajuk navigasi Bereaksi yang baru saja kami pasang. Impor ionik dari expo / vector-icons, sebuah paket yang mungkin ingin Anda
instal seandainya Anda mendapatkan kesalahan di sini dengan instal npm
- simpan dan juga impor konstanta warna dari folder konstanta dan di sana, file warna dan kemudian di sini kami memiliki tombol tajuk ubahsuaian komponen
biasa yang menerima alat peraga yang mengembalikan beberapa jsx dan di sini saya
ingin mengembalikan tombol tajuk yang kami impor tetapi sekarang kami hanya akan mengonfigurasinya ke
persyaratan kami.
Pertama-tama dengan meneruskan semua alat peraga ke sana dan kemudian kita dapat mengatur komponen ikon ke
ionicon sehingga
ini digunakan, mengatur ukuran ikon di sini mungkin ke 23 karena saya pikir itu bekerja dengan sangat baik
sejauh ini dan mengatur
warnanya dan sekarang saya akan memerlukan satu impor lainnya, saya harus mengimpor platform dari React Native karena sekarang saya ingin memeriksa platform
di sini dan jika platformnya adalah
Android, kita akan memiliki latar belakang yang solid, jadi saya ingin menggunakan putih sebagai warna
ikon, jika tidak saya menggunakan warna primer saya.
Sekarang dengan itu, satu-satunya hal yang tersisa untuk dilakukan adalah mengekspor tombol header kustom ini di sini dan sekarang
kita dapat mulai menggunakannya di layar daftar tempat. Di sana juga seperti
sebelumnya, saya mengimpor dua paket lain dari tombol reaksi-navigasi-tajuk, dua hal lain dari paket ini dan itu akan menjadi
tombol tajuk dan item saya, keduanya perlu diimpor dan selain itu, kami juga dapat mengimpor sendiri
tombol tajuk ubahsuaian sekarang dari folder komponen dan di sana dari file tombol tajuk
ini yang baru saja kami gunakan. Tetapi dengan yang diimpor, kita dapat mengubah
opsi navigasi kita di sini menjadi dinamis, di mana kita memiliki fungsi ini yang memberi kita data nav
dan yang kemudian mengembalikan objek konfigurasi ini karena ini kemudian akan memungkinkan kita untuk juga mengikat tombol ke beberapa fungsi
yang kami menerima melalui params rute karena di sini, saya ingin menambahkan header yang tepat untuk menambahkan tombol header saya
dan tentu saja itu sekarang juga merupakan pola yang kami lakukan berkali-kali sepanjang kursus ini, kami
menambahkan tombol header seperti ini dan memiliki item di sana. Pada komponen tombol tajuk, kita dapat mengatur komponen
tombol tajuk dan menunjuk pada komponen tombol tajuk kustom kami di sini dan pada item, kami sekarang menetapkan judul, seperti
menambahkan tempat dan kami menetapkan nama ikon di sini yang tergantung pada
platform, jadi oleh karena itu saya benar-benar akan mengimpor API platform ini di sini dari React Native dan sekarang kita
dapat memeriksa apakah sistem operasi platform adalah Android, jika itu yang terjadi, maka saya ingin mengatur ini ke md add, jika
tidak untuk ios add yang menambahkan tombol tambah untuk platform spesifik,
jadi ikuti tampilan spesifik platform itu. Kita juga perlu menambahkan fungsi onPress dan
di sana jika kita mengetuk ini, saya hanya ingin menavigasi dengan metode navigasi di sini dan itu sebabnya
kita perlu memiliki fungsi dinamis ini di sini, sehingga kita mendapatkan akses ke data nav dan
kemudian navigasi, navigasi ke tempat baru dan tempat baru di sini tentu saja adalah pengidentifikasi saya di navigator tempat layar tempat baru ini.
Jadi dengan itu, kita memiliki cara untuk pergi ke layar itu dan karenanya jika kita menyimpan ini,
kita harus dapat melakukannya.
Jelas saya mendapatkan kesalahan karena dalam komponen tombol tajuk, karena saya memiliki komponen Bereaksi di sana, mengimpor Bereaksi dari
Bereaksi tidak terdengar seperti ide terburuk, jadi mari kita segera perbaiki di sini di komponen
tombol tajuk tetapi sekarang dengan itu , karena ini dimuat ulang, kami memiliki tombol plus ini dan kami
dapat pergi ke layar tempat baru, ke layar tempat baru, juga di sini di Android tentu saja.
Sekarang pada layar tempat baru, karena itu kita juga dapat menambahkan opsi navigasi untuk mengatur judul, opsi
navigasi layar tempat baru, mengaturnya ke beberapa objek statis untuk saat ini karena kita sekarang tidak perlu ini
menjadi fungsi, kami tidak tidak memerlukan akses ke data nav, kita hanya perlu mengatur judul header untuk menambahkan tempat dan dengan itu
jika kita menyimpannya, jelas jika kita pergi ke sana, kita melihat judul itu di header.
Jadi ini adalah pengaturan dasar ini di sini,
sekarang kita dapat bekerja pada layar tambah tempat itu untuk memastikan bahwa kita dapat menambahkan tempat.