Jadi saya ingin memiliki tombol simpan di header saya dan untuk itu tentu saja, kita perlu menambahkan opsi navigasi layar peta dan
menggunakan formulir fungsi di sana, sehingga kita memiliki akses ke nav ini, objek dengan objek
navigasi dan di sana , Saya ingin mengembalikan objek konfigurasi saya.
Anda dapat menambahkan judul tajuk tetapi saya sebenarnya senang tanpa
tajuk itu tetapi saya ingin mengatur tajuk di sini dan sekarang penting, di sini Anda dapat
menggunakan tombol tajuk dan membuat ikon yang bagus, tetapi sebenarnya, saya akan membuat beberapa teks di sini. Jadi saya akan mengimpor komponen teks atau
memastikan Anda telah mengimpornya. Saya akan memberikan beberapa teks di sini
di mana saya hanya akan mengatakan save dan tentu saja Anda juga dapat menambahkan
platform check untuk
membuat huruf besar ini di Android jika Anda mau, saya hanya akan mengatakan save seperti ini dan kemudian tambahkan gaya di sini di mana Saya
menambahkan gaya teks tombol tajuk dan sekitar itu, saya ingin memiliki tampilan yang dapat disentuh, jadi saya
akan menggunakan opacity yang dapat disentuh di sini yang oleh karena itu Anda juga perlu mengimpor, bukan dari
sana tetapi sebenarnya dari Bereaksi Asli, sehingga opacity yang dapat disentuh harus diimpor dari Bereaksi Asli dan dengan yang diimpor, kita dapat
membungkus ini di sekitar teks ini untuk membuat tombol kita sendiri sehingga untuk mengatakan dan di sana, saya juga ingin
menambahkan gaya dan gaya yang akan memiliki pengidentifikasi tombol header katakanlah. Sekarang dengan menekan ini, saya ingin menyimpan apa yang kami tambahkan atau menyimpan lokasi yang kami pilih tetapi itu
adalah sesuatu yang akan saya lakukan dalam sedetik, untuk sekarang mari kita gaya ini. Jadi di sana di stylesheet, untuk tombol tajuk yang merupakan
opacity yang dapat disentuh, saya akan menambahkan margin horisontal 20 untuk memiliki beberapa jarak di sekitar tombol ke kiri dan ke kanan dan
pada teks tombol tajuk di sini, tentu saja naik untuk Anda apa yang ingin Anda tambahkan
di sana tapi saya akan menambahkan ukuran font 16 katakanlah dan yang penting, warnanya. Untuk itu, saya memerlukan platform API karena warnanya harus berbeda, karena
ini ada di header yang memiliki latar belakang yang solid di Android tetapi tidak di iOS,
saya dapat mengatur warna saya di sini, warna teks saya ke Platform. OS sama dengan Android, jadi untuk memeriksa ini dan pada Android saya akan mengaturnya
menjadi putih dan jika tidak, saya akan mengaturnya ke Warna. primer dan untuk itu seperti
biasa, pastikan Anda mengimpor warna Anda secara konstan dari atas sana.
Jadi sekarang kita memiliki tombol simpan, ketika kita menekan tombol simpan, saya ingin memicu fungsi yang harus didefinisikan dalam
komponen dan itu juga sesuatu yang kita lakukan beberapa kali dalam kursus, saya menunjukkan kepada Anda bagaimana Anda
dapat berkomunikasi antara komponen Anda dan juga opsi navigasi Anda di sini. Jadi pada dasarnya kita dapat menambahkan fungsi
baru di sini, menyimpan penangan lokasi terpilih, apa pun yang Anda ingin beri nama dan fungsi ini atau referensi ke fungsi ini harus
diteruskan ke opsi navigasi dan untuk itu, kita dapat menggunakan pengait efek
penggunaan lama yang baik dan gunakan callback untuk menghindari infinite loop ini jika Anda ingat dan karena
itu kami dapat kemudian membungkusnya dengan use callback dan kemudian menggunakan efek di sini untuk memberi tahu opsi navigasi kami tentang hal ini
dengan menggunakan props set params dan kemudian saya ingin mengatur param lokasi penyimpanan saya di sini ke save handler lokasi pick, jadi berikan referensi ke fungsi ini,
ke param ini atau dengan param ini ke header saya dan efek penggunaan tentu saja tergantung
pada fungsi save handler lokasi pick, jadi saya akan menambahkannya sebagai dependensi di sini dan penting sekarang,
gunakan callback di sini juga memiliki berbagai dependensi karena di sini, saya pada dasarnya ingin meninggalkan halaman ini dan kembali,
jadi di sini saya dapat menggunakan navigasi alat peraga kembali dan
kami akan men-tweak ini dalam detik tetapi untuk sekarang, kami dapat melakukan ini.
Dan oleh karena itu, biasanya tentu saja, fungsi kembali ini akan menjadi ketergantungan saya tetapi untuk menghindari loop tak terbatas,
dengan pendekatan ini kita harus menggunakan dengan menggunakan params untuk memperbarui komponen yang
sudah ada, saya benar-benar akan menambahkan array kosong di sini sebagai ketergantungan, sehingga fungsi ini secara efektif tidak
dibangun kembali sekarang.
Maka dengan itu, kita dapat mengekstrak param lokasi penyimpanan ini di header kita.
Jadi di sini, saya ingin menunjukkan fungsi save saya yang saya dapatkan dengan navData. navigasi. getParam menunjuk ke save identifier dan
kemudian save function adalah fungsi yang saya kaitkan ke penangan onPress pada opacity yang
dapat disentuh.
Jadi ini seharusnya memicu fungsi simpan ini, ini menyimpan fungsi pengendali lokasi yang dipilih di sini. Dengan yang disimpan jika kita kembali, mari kita
coba, mari
kita pilih peta dan jika sekarang saya klik simpan, itu harusnya kembali dan ya.
Jadi itu berfungsi tetapi tentu saja sekarang, saya tidak menyimpan lokasi apa pun, saya tidak menggunakan lokasi apa pun,
itu adalah langkah berikutnya dan untuk
itu kita harus melewati lokasi yang pengguna pilih kembali ke layar sebelumnya. Dengan kembali, itu relatif sulit tetapi alih-alih
kita dapat menggunakan pola yang belum pernah saya gunakan sebelumnya dalam kursus ini,
saya dapat menggunakan navigasi di sini juga untuk kemudian kembali. Saya dapat menavigasi ke layar tempat baru saya dengan pengenal tempat baru
seperti yang diatur di sini di navigator tempat saya dan karena saya sudah berada di layar di depan layar tempat baru itu, jangan lupa
bahwa ini adalah
setumpuk layar dan saya Sedang di layar di atas layar tempat baru, ini sebenarnya tidak akan
mendorong layar tempat baru ini di atas layar yang ada, kita bisa memaksakan ini dengan
mendorong tapi saya tidak mau, sebaliknya akan kembali
tapi sekarang dengan menggunakan navigasi, saya dapat menambahkan beberapa params di sini. Saya dapat menambahkan lokasi yang saya pilih dan di sana, arahkan
ke prop lokasi yang saya pilih yang semoga menampung lokasi yang saya pilih. Sekarang karena saya menggunakan lokasi yang dipilih di sini dan karena ini
berubah, saya akan menambahkan ini sebagai ketergantungan untuk menggunakan panggilan balik sehingga fungsi ini diciptakan
kembali ketika kami memiliki lokasi baru dan saya ingin memastikan bahwa kami memiliki lokasi
di sini , jadi saya akan memeriksa apakah lokasi yang dipilih atau tepatnya, jika kita tidak memilikinya, jadi jika
ini tidak terdefinisi
yang berarti pengguna belum memilih satu, maka saya akan kembali dan tidak melanjutkan dan
kami juga dapat menunjukkan peringatan di sini jika kita mau. Sekarang saya tidak akan melakukan itu di sini tetapi Anda dapat
menunjukkan peringatan jika Anda mau.
Jadi sekarang kita hanya dapat mengklik simpan jika kita memang memilih lokasi tetapi jika kita
melakukannya, kita akan benar-benar mengaturnya pada params dari
tindakan kembali kita. Mari kita coba,
mari kita pergi ke sana, klik picK di peta dan sekarang harap dicatat saya belum memilih lokasi apa pun, saya belum
mengklik di mana pun, jadi
jika saya klik simpan, tidak ada yang terjadi. Jika saya memilih lokasi dan mengklik simpan, saya tetap kembali.
Jadi sekarang kita dapat menggunakan data yang kita lewati dari layar peta di pemilih lokasi kita pada akhirnya untuk memperbarui pratinjau peta di sana,
jadi itu hal
berikutnya yang akan saya lakukan.