Untuk menampilkan ini di peta, kita memiliki komponen layar peta ini yang saat ini hanya memiliki beberapa konten dummy dan
sekarang kita harus dapat membuat peta interaktif dan untuk ini, pameran lagi telah membuat kita tercakup.
Di sana, Anda menemukan
paket tampilan peta.
Sekarang ini di balik layar menggunakan paket bernama React Native maps yang juga dapat Anda gunakan di aplikasi
non-expo, dengan cara banyak dari paket ini dapat digunakan dalam aplikasi non-expo dan itu adalah sesuatu
yang akan saya kembalikan ke dalam membangun aplikasi tanpa modul expo tetapi untuk
saat ini kita dapat dengan mudah menginstal ini dengan menjalankan perintah ini dan ini akan menginstal
paket React Native maps dan kemudian kita
dapat menggunakannya seperti yang kita lihat di sini dalam contoh ini.
Ngomong-ngomong, lihat juga dokumentasi resmi di tautan ini untuk melihat lebih banyak contoh penggunaan di sana karena di sana,
Anda dapat mempelajari semua tentang cara menggunakan paket ini,
beberapa contoh juga ditunjukkan di sini dalam modul ini tentu saja.
Jadi mari kita jalankan expo install react-native-maps untuk menginstal paket ini di sini dan ini
akan memungkinkan kita untuk menggunakan berbagai komponen yang membuat peta interaktif.
Jadi mari kita tunggu sampai selesai dan dengan selesai, di komponen layar peta, kita bisa mulai menggunakan peta
itu.
Sekarang di sana, untuk menggunakan peta, kita dapat mengimpor tampilan peta dari React Native map, jadi dari paket ini kita baru saja menginstal
dan itu akan memungkinkan kita untuk membuat peta di layar.
Sekarang bagaimana cara kerjanya?
Baiklah mari kita pergi ke sini ke layar peta kita dan alih-alih mengembalikan tampilan ini ke sini, saya akan
mengembalikan tampilan peta seperti itu.
Sekarang tampilan peta bisa menjadi tag yang menutup sendiri untuk
saat ini, kita nanti dapat juga menambahkan beberapa penanda di sana tetapi untuk sekarang mari kita render seperti ini dan
sekarang Anda perlu mengkonfigurasi tampilan peta ini. Untuk lebih tepatnya,
diperlukan alat peraga wilayah yang memberi tahu di mana ia harus difokuskan saat memuat, sehingga
memetakan bagian atau bagian dunia mana yang harus menjadi fokusnya saat memuat.
Jadi kita perlu membuat daerah seperti ini di sini dan saya akan menyimpan bahwa dalam wilayah peta
bernama konstan dan wilayah sebenarnya adalah objek dengan empat properti dan Anda harus menamainya seperti ini
- lintang dan bukan lat tetapi
benar-benar lintang ditulis, garis bujur, garis lintang dan garis bujur.
Delta pada dasarnya mengatur faktor zoom karena ini menggambarkan seberapa banyak ruang yang dapat Anda lihat di sekitar
pusat yang Anda gambarkan dengan dua titik ini.
Jadi itu menggambarkan suatu titik, bersama dengan dua
delta, itu menggambarkan suatu permukaan.
Jadi sekarang di sini, kita bisa mulai dengan beberapa nilai
dummy sebelum kemudian nanti juga memastikan bahwa kita dapat mengisi ini.
Jadi di sini, saya akan mengatur ini ke nilai dummy 37. 78 dan -122. 43 yang
berada di Bay Area di sekitar markas Google dan di sini, latitudeDelta
akan mengambil 0. 0922 dan kemudian 0. 0421, saya menemukan bahwa
ini berfungsi dengan baik sebagai daerah.
Tentu saja Anda dapat bereksperimen dengan angka-angka ini tetapi pada akhirnya, berikan wilayah peta ini di sini.
Sekarang ini harus membuat peta di layar, sekarang kita
hanya perlu dapat mencapainya dan untuk
itu izinkan saya kembali ke pemetik lokasi dan saya ingin menjangkau dengan dua cara yang berbeda
- satu dengan bantuan tombol yang belum saya tambahkan. Selain tombol dapatkan lokasi pengguna, saya ingin memiliki
tombol kedua yang harus duduk di sebelah yang pertama, jadi saya akan menambahkan tampilan untuk membungkus keduanya dan
kemudian memindahkan tombol ini di sini dan memiliki tombol kedua di sana dan tombol ini
secara umum akan dikonfigurasikan dengan cara yang sama tetapi saya akan mengatakan memilih pada peta dan tentu saja, saya akan memicu metode
yang berbeda, fungsi yang berbeda, di sini saya ingin memicu fungsi yang merupakan pick pada penangan peta dan karena itu saya akan menggunakan ini
di sini
dan itu salah satu cara memilih ini. Cara lain untuk memilih ini atau
pergi ke peta adalah dengan mengklik pratinjau peta. Sekarang sebelum saya menerapkan ini, izinkan saya dengan cepat gaya tampilan ini yang memegang dua tombol.
Saya akan memberikan pengenal gaya tindakan dan kemudian di sana, tindakan dapat dikonfigurasi dengan cara yang
relatif mudah.
Saya ingin memiliki item yang duduk bersebelahan, jadi arah fleksibel akan menjadi baris bukan kolom. Membenarkan konten dapat menjadi ruang
sekitar untuk mendistribusikan ruang kosong yang tersedia di kedua tombol, saya akan mengambil lebar
100% untuk baris ini dan hanya itu.
Sekarang dengan itu, saya memiliki tombol
saya di sini, sekarang kita perlu memastikan bahwa kita juga dapat mengetuk pratinjau peta dan untuk itu, izinkan
saya pergi ke pratinjau peta dan benar-benar membungkus ini, bukan dalam tampilan tetapi dalam komponen yang dapat disentuh dan di sini Saya hanya
akan menggunakan opacity terjamah, tentu saja Anda juga bisa pergi untuk komponen terjamah berbeda berdasarkan
platform
yang Anda jalankan, saya ingin menjaga ini relatif mudah, jadi saya hanya akan mengganti tampilan ini di sini dengan
opacity terjamah, punya
gaya saya di sini, itu bagus tapi juga tentu saja memiliki penangan onPress dan di sana, saya ingin
memicu fungsi yang saya harapkan dapatkan dari luar melalui alat peraga.
Saya hanya akan memanggil onPress ini juga, tetapi Anda bisa memberikan properti ini nama yang Anda inginkan.
Ini sekarang memungkinkan kita untuk menambahkan prop onPress pada pratinjau peta,
jadi di sini di pemilih lokasi, saya dapat mendengarkan onPress pada pratinjau peta dan tentu saja, saya ingin
memicu fungsi yang sama seperti ketika saya mengklik tombol ke bawah sana.
Saya ingin memicu pick pada handler peta,
jadi itulah yang saya lakukan.
Sekarang pick on map handler harus langsung pergi ke layar peta,
jadi di sana kita dapat mengatakan props. navigasi. navigasi peta dan hanya itu untuk yang kedua.
Jadi jika sekarang kita menyimpan ini, kita harus dapat mencapai peta interaktif layar penuh ini di mana kita belum
dapat memilih tempat, tetapi setidaknya kita dapat melihatnya.
Jadi sekarang jika saya klik pada plus di sini dan kemudian memilih pada peta,
saya mendapatkan kesalahan, mengapa demikian? Nah itu sama sekali tidak terkait dengan modul asli. Anda mungkin ingat bahwa alat navigasi
hanya tersedia pada komponen yang secara langsung dimuat sebagai layar yang tentunya tidak dipilih oleh
pemilih lokasi. Sekarang ada
berbagai solusi, akan ada komponen
urutan yang lebih tinggi yang dapat kita
gunakan, kita juga dapat menginstal paket Navigasi React spesifik tetapi di sini saya
akan mengambil pendekatan sederhana dan hanya memastikan bahwa saya memiliki alat navigasi pada pemetik lokasi oleh pergi
ke layar tempat baru yang merupakan tempat saya menggunakan pemilih lokasi dan di
sana saya akan mengatur prop navigasi ini dan meneruskan props. navigasi yang saya miliki di sini memang tersedia
karena ini adalah komponen yang dimuat langsung melalui navigator, jadi sekarang
saya hanya meneruskan akses ke alat peraga navigasi saya. Dan dengan itu jika sekarang kita kembali dan mengklik
ini, kita memuat peta ini di sini atau setidaknya layar peta tetapi di
mana peta itu?
Yah peta itu tidak terlihat karena, dan itu penting, untuk peta Anda, Anda perlu menambahkan gaya dan
di sini, saya akan menambahkan gaya. peta dan itu bisa menjadi gaya yang sangat sederhana tetapi Anda hanya
perlu menentukan seberapa besar seharusnya karena secara default, itu tidak akan menempati ruang apa pun.
Jadi dengan hanya mengatur flex ke satu di sini dan mengatakan itu harus mengambil semua ruang yang didapatnya, hanya dengan melakukan
itu, Anda akan memastikan bahwa Anda melihat peta.
Jadi sekarang dengan itu jika Anda mengklik ini, di sini adalah peta kita dimuat. Sekarang juga patut dicatat, di iOS Anda secara otomatis menggunakan Apple Maps,
meskipun Anda juga dapat menggunakan Google Maps di sana jika Anda mau, dokumen resmi
memberi tahu Anda caranya, di Android Anda selalu menggunakan google maps.
Jadi di sini jika saya klik pilih pada
peta, kita juga akan melihat bahwa begitu kita memuat layar baru itu, ini dia. Sekarang tentu saja, kita juga dapat pergi ke layar itu
dengan mengklik pratinjau kami di sini,
itulah yang kami
atur dengan benar, sehingga juga berfungsi, tentu saja juga berfungsi di iOS.
Ngomong-ngomong, animasi di sini tidak super mulus, pada perangkat nyata, jadi itu bukan
masalah, itu hanya di sini di emulator.
Jadi dengan itu kita memiliki peta kita di sini dan di peta ini, kita dapat menggulir. Sekali lagi, pada simulator mungkin agak
kecil, pada perangkat nyata itu tidak akan.
Jadi di sini Anda dapat menggulir, Anda juga dapat mencubit dan memperbesar, sehingga Anda dapat melakukan semua
itu dan dengan itu, kita melihat peta.
Sekarang peta dapat digunakan tetapi tentu saja, kita belum dapat memilih tempat di sana, jadi itu
hal berikutnya yang perlu kita ubah.