Untuk lokasi pengguna, kami mendapatkan paket lain yang dibangun ke dalam expo yang dapat dengan mudah kami
gunakan dan itu adalah paket lokasi.
Sekarang sama seperti sebelumnya, Anda menginstalnya dengan mengikuti instruksi di sini dan kemudian Anda juga melihat contoh
penggunaan di sana,
jadi mari kita cepat melakukannya.
Mari kita jalankan expo install expo-location di proyek kita dan dengan instal itu, kita sekarang dapat
juga menambahkan komponen lain, selain komponen pemilih
gambar, saya akan menambahkan LocationPicker. File js karena itu hal lain yang saya ingin dapat
lakukan di aplikasi ini, saya ingin dapat memilih lokasi. Untuk itu di komponen pemilih
lokasi, saya akan mengimpor Bereaksi dari Bereaksi tentu saja karena itu akan menjadi komponen Bereaksi
reguler pada akhirnya dan mengimpor beberapa hal dari Bereaksi Asli dan di antara hal-hal ini adalah tampilan, tombol yang
memungkinkan kita untuk mulai mendapatkan lokasi pengguna, beberapa teks, juga untuk menampilkan teks fallback default
sementara tidak ada tempat yang dipilih, indikator aktivitas untuk menunjukkan pemintal sementara kami
menunggu lokasi untuk diambil dan mungkin juga waspada untuk menampilkan peringatan jika terjadi kesalahan dan
stylesheet tentu saja untuk menata komponen ini.
Sekarang di sini, saya memiliki komponen pemilih lokasi saya yang menerima alat peraga dan kemudian kita
akan melakukan sesuatu, mengatur objek gaya dengan Stylesheet. buat dan pada akhirnya, ekspor komponen pemilih lokasi
di sini sebagai default, seperti itu. Sekarang untuk komponen itu, bagaimana seharusnya kode jsx terlihat?
Pada akhirnya, itu selalu terserah Anda, tetapi saya akan mulai sangat sederhana di sini dan hanya memiliki
tampilan dengan
tombol di sana yang akan memungkinkan saya untuk mulai mendapatkan lokasi pengguna dan juga tampilan lain di sana
yang menunjukkan misalnya teks mundur saya, tidak ada lokasi belum dipilih yang nantinya akan diganti untuk pratinjau kecil tempat di
peta, jadi itu sesuatu
yang akan saya tambahkan nanti. Sekarang di sini di tombol, karena
itu saya akan mengatakan mendapatkan lokasi pengguna misalnya, mengatur warna ke Warna. utama dan untuk itu seperti biasa pastikan Anda
mengimpor warna yang konstan dan terus menekan ini, saya tidak heran ingin mulai mengambil
lokasi pengguna.
Jadi di sini saya akan menambahkan konstanta baru, dapatkan penangan lokasi, yang merupakan fungsi yang kemudian akan menggunakan API lokasi yang baru saja kita instal
untuk mendapatkan lokasi pengguna dan itulah yang saya picu ketika saya mengklik tombol ini.
Sekarang untuk penataan di sini, saya akan menambahkan pemilih lokasi gaya, pada tampilan ini di sini, saya akan menambahkan pratinjau peta
gaya lain, kita juga bisa gaya teks ini tetapi saya akan tetap
pada default dan sekarang menambahkan dua gaya ini ke stylesheet, jadi pemetik lokasi di sini, di sana saya akan menambahkan margin ke
bawah katakanlah 15 dan pada pratinjau peta, di sana saya juga akan menambahkan margin ke bawah katakanlah 10 dan lebar 100% untuk ambil
semua lebar yang tersedia, ketinggian mungkin 150 dan juga warna
batas warna keabu-abuan ini dengan kode hex #ccc dan lebar batas satu, sedikit mirip
dengan kotak pratinjau gambar. Dengan itu, kami telah menyiapkan komponen ini, kami sekarang
dapat memasukkannya di layar tempat baru.
Jadi dalam komponen layar itu, saya akan mengimpor pemilih lokasi dari komponen, pemilih lokasi seperti ini dan menambahkannya dalam
kode jsx di bawah pemilih gambar, begitu saja.
Jika sekarang kita simpan itu dan kita lihat, kita melihat kotak ini di sini.
Sekarang ketika saya mengklik mendapatkan lokasi pengguna, tidak mengherankan bahwa saya mulai mendapatkan lokasi pengguna.
Untuk itu, dalam komponen pemilih lokasi kami, kami perlu mengimpor beberapa hal di sini - kami akan mengimpor semuanya sebagai lokasi
dari paket lokasi pameran yang baru saja kami pasang. Selain lokasi, seperti halnya kamera,
kami harus meminta izin, jadi kami akan mengimpor semuanya sebagai izin
dari izin pameran, itu juga diperlukan. Dengan itu ditambahkan di sini di handler lokasi get, saya pertama-tama ingin memeriksa izin saya dan
untuk itu, saya bisa menyalin pendekatan yang saya gunakan di pemilih gambar. Di sana kami memiliki fungsi perizinan verifikasi ini, yang tentu saja kami
dapat, karenanya, juga melakukan outsourcing dan menulis dengan cara yang lebih umum untuk bekerja dalam komponen yang
berbeda, di sini saya hanya akan menyalinnya, memverifikasi izin. Tentu saja di sini, saya tidak
meminta rol kamera tetapi untuk lokasi dan Anda perlu memberikan izin lokasi untuk menggunakan aplikasi ini dan sekarang
memverifikasi izin dijalankan di sini di get handler lokasi. Kita dapat menggunakan async menunggu di sini lagi untuk menunggu hasil
dari pemeriksaan ini, jadi memiliki izin adalah apa yang ingin saya periksa di sini dan jika tidak, jadi jika kita tidak memiliki
izin, maka saya hanya akan kembali ke sini, tidak ada perlu
dilanjutkan karena kami tidak akan diizinkan mengambil lokasi. Sekarang kalau tidak kita dapat melanjutkan dan sekarang
kita dapat menggunakan paket lokasi untuk mendapatkan posisi saat ini async dan ini melakukan apa namanya, itu
mendapatkan posisi pengguna saat ini. Sekarang mencari pengguna dapat memakan waktu cukup lama, itulah sebabnya
mengapa ini merupakan tugas yang tidak sinkron dan mengapa ini mengembalikan janji, sebuah janji yang akan diselesaikan setelah
kami mendapatkan lokasi pengguna atau yang akan ditolak jika gagal mengambilnya. Kami juga dapat mengonfigurasi ini dengan objek
yang Anda berikan padanya, lagi seperti biasa dalam dokumen resmi yang Anda pelajari semua
tentang semua opsi yang dapat Anda atur di sana. Misalnya satu opsi yang dapat Anda tetapkan adalah batas waktu dan
setel ini menjadi lima detik untuk memastikan bahwa jika kami tidak dapat mengambil lokasi selama lima detik, kami
berhenti mencoba dan
kami membuat kesalahan, sehingga janji itu kemudian akan ditolak.
Sekarang kita bisa menunggu ini dan tentu saja membungkusnya menjadi blok coba tangkap, itu penting untuk memastikan kita
menangani kesalahan jika kita gagal mengambil lokasi. Di sini saya kemudian hanya akan menggunakan
komponen peringatan yang sudah saya impor untuk melempar peringatan, tidak dapat mengambil lokasi dan kemudian di sini, silakan coba lagi nanti atau
pilih lokasi di peta, yang tidak mungkin sekarang tetapi yang kami ' Saya akan segera menambahkan
dan di sini tombol di mana kita mengatakan OK. Jadi itu peringatan yang saya tunjukkan jika mengambil lokasi gagal karena suatu alasan,
jika tidak di
sini saya berharap untuk mendapatkan kembali lokasi,
jadi itulah hasil dari janji ini pada akhirnya,
lokasi yang dapat kita gunakan.
Sekarang kita dapat menggunakan lokasi ini dengan bantuan status penggunaan untuk mengelola beberapa kondisi internal di sini, itulah lokasi yang
dipilih dan menetapkan lokasi yang dipilih dan di sana, kita dapat memanggil status penggunaan yang tidak memiliki nilai awal di sini
dan kemudian di
sini di penangan lokasi, kita dapat mengatur lokasi yang dipilih menjadi sesuatu, kita harus melihat apa untuk
saat ini, untuk membatalkan tetapi sebelum kita mengatur apa pun di sini, mari kita benar-benar
menghibur lokasi log untuk merasakan apa yang ada di dalam sana.
Sekarang saya juga ingin menunjukkan kepada seorang pemintal ketika kami mengambil, jadi saya akan mengelola negara
bagian lain di sini dan itu adalah keadaan mengambil dan pada awalnya, itu tentu saja salah tetapi
awalnya kami tidak mengambil tetapi
kemudian di sini di lokasi dapatkan Handler, sebelum kita mulai mendapatkan lokasi, saya akan mengatur adalah mengambil true dan
setelah kita selesai
dan itu juga termasuk jika kita mendapat kesalahan, jadi
setelah itu saya akan mengatur kembali ke false dan sekarang kita dapat menggunakan mengambil untuk menunjukkan pemintal saat kami mengambil.
Jadi di sini jika pengambilan itu benar, saya akan menunjukkan indikator aktivitas dan hanya sebaliknya, saya akan menunjukkan teks ini dan
nanti kita tentu saja tidak hanya menampilkan teks tetapi kami juga akan menampilkan cuplikan peta.
Sekarang indikator aktivitas dapat dikonfigurasi, kita dapat
mengatur ukuran ke besar dan warna ke Warna. utama jika Anda mau. Dengan semua itu, mari kembali dan
coba di sini di iOS karena sementara
saya tidak dapat menambahkan gambar di sini, setidaknya saya dapat memeriksa lokasi dan mengklik pada
mendapatkan lokasi pengguna dan sekarang saya ditanya apakah saya ingin memberikan izin yang saya ingin
izinkan, selalu izinkan, dan Anda melihat pemintal itu, sangat cepat karena ini adalah simulator, juga dengan cara mensimulasikan lokasi, itu
bukan lokasi sebenarnya dari komputer Anda tempat Anda menjalankan ini, sebagai gantinya itu
adalah lokasi dummy default di San Francisco dan di sini di Android, itu sama, jika saya klik dapatkan lokasi
pengguna di sini, saya perlu memberikan izin dan begitu saya melakukannya, Anda melihat pemintal di sini dan kemudian Anda tidak melihat apa
pun kecuali dalam log tentu saja, Anda melihat sesuatu. Di sana Anda melihat objek yang
sedang login di mana Anda memiliki sub objek coords sehingga untuk mengatakan demikian sebuah
bidang bernama coords dan objek yang merupakan objek lain dengan akurasi dan kemudian pasangan garis bujur yang menggambarkan
lokasi palsu ini, kedua simulator menggunakan palsu lokasi. Anda juga mendapat cap waktu.
Jadi sekarang kita tahu
apa yang ada di sana, sehingga kita dapat mengatur lokasi yang dipilih, kita sekarang dapat mengatur ini untuk mengatakan sebuah objek
tempat Anda menyimpan garis lintang lokasi. coords. lintang, itulah yang ada di sana, kanan dan bujur,. lng lokasi.
coords. garis bujur.
Jadi sekarang kita memiliki lokasi terpilih yang tersedia dan lokasi terpilih sekarang dapat digunakan untuk
misalnya menunjukkan cuplikan peta
kecil di sini setelah kita memiliki lokasi. Sebelum saya melakukan itu hanya satu hal kecil, saya
ingin memastikan bahwa teks dan pemintal di sini terpusat, jadi pada pratinjau peta, saya akan benar-benar juga mengatur pembenaran konten untuk
memusatkan dan menyelaraskan item ke pusat, sehingga semua konten di sana terpusat secara horizontal dan vertikal, itu hanya
hal kecil, jadi sekarang
Anda melihat semuanya ada di tengah.
Tetapi dengan itu, mari sekarang pastikan kita menunjukkan potongan peta kecil yang menunjukkan lokasi yang dipilih pengguna.