1 00:00:02,080 --> 00:00:06,910 Untuk lokasi pengguna, kami mendapatkan paket lain yang dibangun ke dalam expo yang dapat dengan mudah kami 2 00:00:06,910 --> 00:00:08,740 gunakan dan itu adalah paket lokasi. 3 00:00:08,780 --> 00:00:14,230 Sekarang sama seperti sebelumnya, Anda menginstalnya dengan mengikuti instruksi di sini dan kemudian Anda juga melihat contoh 4 00:00:14,230 --> 00:00:15,520 penggunaan di sana, 5 00:00:15,520 --> 00:00:17,130 jadi mari kita cepat melakukannya. 6 00:00:17,140 --> 00:00:24,580 Mari kita jalankan expo install expo-location di proyek kita dan dengan instal itu, kita sekarang dapat 7 00:00:24,570 --> 00:00:27,580 juga menambahkan komponen lain, selain komponen pemilih 8 00:00:27,580 --> 00:00:33,340 gambar, saya akan menambahkan LocationPicker. File js karena itu hal lain yang saya ingin dapat 9 00:00:33,340 --> 00:00:38,920 lakukan di aplikasi ini, saya ingin dapat memilih lokasi. Untuk itu di komponen pemilih 10 00:00:38,920 --> 00:00:45,490 lokasi, saya akan mengimpor Bereaksi dari Bereaksi tentu saja karena itu akan menjadi komponen Bereaksi 11 00:00:45,490 --> 00:00:54,040 reguler pada akhirnya dan mengimpor beberapa hal dari Bereaksi Asli dan di antara hal-hal ini adalah tampilan, tombol yang 12 00:00:54,040 --> 00:01:00,610 memungkinkan kita untuk mulai mendapatkan lokasi pengguna, beberapa teks, juga untuk menampilkan teks fallback default 13 00:01:00,610 --> 00:01:06,640 sementara tidak ada tempat yang dipilih, indikator aktivitas untuk menunjukkan pemintal sementara kami 14 00:01:07,300 --> 00:01:13,840 menunggu lokasi untuk diambil dan mungkin juga waspada untuk menampilkan peringatan jika terjadi kesalahan dan 15 00:01:13,840 --> 00:01:16,840 stylesheet tentu saja untuk menata komponen ini. 16 00:01:16,860 --> 00:01:24,390 Sekarang di sini, saya memiliki komponen pemilih lokasi saya yang menerima alat peraga dan kemudian kita 17 00:01:24,390 --> 00:01:33,390 akan melakukan sesuatu, mengatur objek gaya dengan Stylesheet. buat dan pada akhirnya, ekspor komponen pemilih lokasi 18 00:01:33,450 --> 00:01:40,870 di sini sebagai default, seperti itu. Sekarang untuk komponen itu, bagaimana seharusnya kode jsx terlihat? 19 00:01:40,940 --> 00:01:47,540 Pada akhirnya, itu selalu terserah Anda, tetapi saya akan mulai sangat sederhana di sini dan hanya memiliki 20 00:01:47,540 --> 00:01:48,460 tampilan dengan 21 00:01:49,590 --> 00:01:56,580 tombol di sana yang akan memungkinkan saya untuk mulai mendapatkan lokasi pengguna dan juga tampilan lain di sana 22 00:01:56,580 --> 00:02:04,080 yang menunjukkan misalnya teks mundur saya, tidak ada lokasi belum dipilih yang nantinya akan diganti untuk pratinjau kecil tempat di 23 00:02:04,110 --> 00:02:05,890 peta, jadi itu sesuatu 24 00:02:05,910 --> 00:02:10,010 yang akan saya tambahkan nanti. Sekarang di sini di tombol, karena 25 00:02:13,220 --> 00:02:20,990 itu saya akan mengatakan mendapatkan lokasi pengguna misalnya, mengatur warna ke Warna. utama dan untuk itu seperti biasa pastikan Anda 26 00:02:20,990 --> 00:02:27,430 mengimpor warna yang konstan dan terus menekan ini, saya tidak heran ingin mulai mengambil 27 00:02:27,430 --> 00:02:28,500 lokasi pengguna. 28 00:02:28,610 --> 00:02:38,180 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 29 00:02:38,210 --> 00:02:43,760 untuk mendapatkan lokasi pengguna dan itulah yang saya picu ketika saya mengklik tombol ini. 30 00:02:45,530 --> 00:02:57,040 Sekarang untuk penataan di sini, saya akan menambahkan pemilih lokasi gaya, pada tampilan ini di sini, saya akan menambahkan pratinjau peta 31 00:02:57,190 --> 00:03:03,790 gaya lain, kita juga bisa gaya teks ini tetapi saya akan tetap 32 00:03:03,790 --> 00:03:15,570 pada default dan sekarang menambahkan dua gaya ini ke stylesheet, jadi pemetik lokasi di sini, di sana saya akan menambahkan margin ke 33 00:03:15,570 --> 00:03:27,820 bawah katakanlah 15 dan pada pratinjau peta, di sana saya juga akan menambahkan margin ke bawah katakanlah 10 dan lebar 100% untuk ambil 34 00:03:27,820 --> 00:03:33,380 semua lebar yang tersedia, ketinggian mungkin 150 dan juga warna 35 00:03:33,570 --> 00:03:41,310 batas warna keabu-abuan ini dengan kode hex #ccc dan lebar batas satu, sedikit mirip 36 00:03:41,540 --> 00:03:47,620 dengan kotak pratinjau gambar. Dengan itu, kami telah menyiapkan komponen ini, kami sekarang 37 00:03:47,620 --> 00:03:50,170 dapat memasukkannya di layar tempat baru. 38 00:03:50,200 --> 00:04:00,970 Jadi dalam komponen layar itu, saya akan mengimpor pemilih lokasi dari komponen, pemilih lokasi seperti ini dan menambahkannya dalam 39 00:04:00,970 --> 00:04:05,750 kode jsx di bawah pemilih gambar, begitu saja. 40 00:04:05,900 --> 00:04:10,540 Jika sekarang kita simpan itu dan kita lihat, kita melihat kotak ini di sini. 41 00:04:10,560 --> 00:04:16,110 Sekarang ketika saya mengklik mendapatkan lokasi pengguna, tidak mengherankan bahwa saya mulai mendapatkan lokasi pengguna. 42 00:04:18,460 --> 00:04:26,110 Untuk itu, dalam komponen pemilih lokasi kami, kami perlu mengimpor beberapa hal di sini - kami akan mengimpor semuanya sebagai lokasi 43 00:04:26,200 --> 00:04:33,610 dari paket lokasi pameran yang baru saja kami pasang. Selain lokasi, seperti halnya kamera, 44 00:04:33,610 --> 00:04:40,030 kami harus meminta izin, jadi kami akan mengimpor semuanya sebagai izin 45 00:04:40,060 --> 00:04:47,970 dari izin pameran, itu juga diperlukan. Dengan itu ditambahkan di sini di handler lokasi get, saya pertama-tama ingin memeriksa izin saya dan 46 00:04:48,090 --> 00:04:54,540 untuk itu, saya bisa menyalin pendekatan yang saya gunakan di pemilih gambar. Di sana kami memiliki fungsi perizinan verifikasi ini, yang tentu saja kami 47 00:04:54,540 --> 00:04:59,010 dapat, karenanya, juga melakukan outsourcing dan menulis dengan cara yang lebih umum untuk bekerja dalam komponen yang 48 00:04:59,010 --> 00:05:04,800 berbeda, di sini saya hanya akan menyalinnya, memverifikasi izin. Tentu saja di sini, saya tidak 49 00:05:04,800 --> 00:05:12,750 meminta rol kamera tetapi untuk lokasi dan Anda perlu memberikan izin lokasi untuk menggunakan aplikasi ini dan sekarang 50 00:05:12,750 --> 00:05:20,820 memverifikasi izin dijalankan di sini di get handler lokasi. Kita dapat menggunakan async menunggu di sini lagi untuk menunggu hasil 51 00:05:20,850 --> 00:05:28,870 dari pemeriksaan ini, jadi memiliki izin adalah apa yang ingin saya periksa di sini dan jika tidak, jadi jika kita tidak memiliki 52 00:05:29,020 --> 00:05:33,040 izin, maka saya hanya akan kembali ke sini, tidak ada perlu 53 00:05:33,040 --> 00:05:39,790 dilanjutkan karena kami tidak akan diizinkan mengambil lokasi. Sekarang kalau tidak kita dapat melanjutkan dan sekarang 54 00:05:39,970 --> 00:05:47,680 kita dapat menggunakan paket lokasi untuk mendapatkan posisi saat ini async dan ini melakukan apa namanya, itu 55 00:05:47,680 --> 00:05:53,230 mendapatkan posisi pengguna saat ini. Sekarang mencari pengguna dapat memakan waktu cukup lama, itulah sebabnya 56 00:05:53,230 --> 00:05:58,150 mengapa ini merupakan tugas yang tidak sinkron dan mengapa ini mengembalikan janji, sebuah janji yang akan diselesaikan setelah 57 00:05:58,180 --> 00:06:04,230 kami mendapatkan lokasi pengguna atau yang akan ditolak jika gagal mengambilnya. Kami juga dapat mengonfigurasi ini dengan objek 58 00:06:04,240 --> 00:06:09,400 yang Anda berikan padanya, lagi seperti biasa dalam dokumen resmi yang Anda pelajari semua 59 00:06:09,400 --> 00:06:16,550 tentang semua opsi yang dapat Anda atur di sana. Misalnya satu opsi yang dapat Anda tetapkan adalah batas waktu dan 60 00:06:16,550 --> 00:06:22,670 setel ini menjadi lima detik untuk memastikan bahwa jika kami tidak dapat mengambil lokasi selama lima detik, kami 61 00:06:22,670 --> 00:06:23,870 berhenti mencoba dan 62 00:06:23,870 --> 00:06:27,260 kami membuat kesalahan, sehingga janji itu kemudian akan ditolak. 63 00:06:27,310 --> 00:06:34,930 Sekarang kita bisa menunggu ini dan tentu saja membungkusnya menjadi blok coba tangkap, itu penting untuk memastikan kita 64 00:06:35,590 --> 00:06:42,610 menangani kesalahan jika kita gagal mengambil lokasi. Di sini saya kemudian hanya akan menggunakan 65 00:06:42,610 --> 00:06:52,410 komponen peringatan yang sudah saya impor untuk melempar peringatan, tidak dapat mengambil lokasi dan kemudian di sini, silakan coba lagi nanti atau 66 00:06:52,840 --> 00:06:59,940 pilih lokasi di peta, yang tidak mungkin sekarang tetapi yang kami ' Saya akan segera menambahkan 67 00:06:59,940 --> 00:07:07,920 dan di sini tombol di mana kita mengatakan OK. Jadi itu peringatan yang saya tunjukkan jika mengambil lokasi gagal karena suatu alasan, 68 00:07:08,880 --> 00:07:10,090 jika tidak di 69 00:07:10,130 --> 00:07:12,470 sini saya berharap untuk mendapatkan kembali lokasi, 70 00:07:12,500 --> 00:07:15,200 jadi itulah hasil dari janji ini pada akhirnya, 71 00:07:15,200 --> 00:07:16,920 lokasi yang dapat kita gunakan. 72 00:07:17,120 --> 00:07:25,720 Sekarang kita dapat menggunakan lokasi ini dengan bantuan status penggunaan untuk mengelola beberapa kondisi internal di sini, itulah lokasi yang 73 00:07:26,830 --> 00:07:36,250 dipilih dan menetapkan lokasi yang dipilih dan di sana, kita dapat memanggil status penggunaan yang tidak memiliki nilai awal di sini 74 00:07:36,250 --> 00:07:37,810 dan kemudian di 75 00:07:37,810 --> 00:07:45,550 sini di penangan lokasi, kita dapat mengatur lokasi yang dipilih menjadi sesuatu, kita harus melihat apa untuk 76 00:07:45,600 --> 00:07:52,230 saat ini, untuk membatalkan tetapi sebelum kita mengatur apa pun di sini, mari kita benar-benar 77 00:07:52,290 --> 00:07:57,530 menghibur lokasi log untuk merasakan apa yang ada di dalam sana. 78 00:07:57,540 --> 00:08:03,740 Sekarang saya juga ingin menunjukkan kepada seorang pemintal ketika kami mengambil, jadi saya akan mengelola negara 79 00:08:03,740 --> 00:08:10,190 bagian lain di sini dan itu adalah keadaan mengambil dan pada awalnya, itu tentu saja salah tetapi 80 00:08:10,220 --> 00:08:12,260 awalnya kami tidak mengambil tetapi 81 00:08:12,650 --> 00:08:19,670 kemudian di sini di lokasi dapatkan Handler, sebelum kita mulai mendapatkan lokasi, saya akan mengatur adalah mengambil true dan 82 00:08:19,670 --> 00:08:21,090 setelah kita selesai 83 00:08:21,260 --> 00:08:24,410 dan itu juga termasuk jika kita mendapat kesalahan, jadi 84 00:08:24,410 --> 00:08:31,640 setelah itu saya akan mengatur kembali ke false dan sekarang kita dapat menggunakan mengambil untuk menunjukkan pemintal saat kami mengambil. 85 00:08:31,640 --> 00:08:39,740 Jadi di sini jika pengambilan itu benar, saya akan menunjukkan indikator aktivitas dan hanya sebaliknya, saya akan menunjukkan teks ini dan 86 00:08:39,950 --> 00:08:45,920 nanti kita tentu saja tidak hanya menampilkan teks tetapi kami juga akan menampilkan cuplikan peta. 87 00:08:45,920 --> 00:08:48,260 Sekarang indikator aktivitas dapat dikonfigurasi, kita dapat 88 00:08:48,260 --> 00:08:55,440 mengatur ukuran ke besar dan warna ke Warna. utama jika Anda mau. Dengan semua itu, mari kembali dan 89 00:08:55,440 --> 00:08:57,940 coba di sini di iOS karena sementara 90 00:08:57,960 --> 00:09:03,060 saya tidak dapat menambahkan gambar di sini, setidaknya saya dapat memeriksa lokasi dan mengklik pada 91 00:09:03,060 --> 00:09:07,980 mendapatkan lokasi pengguna dan sekarang saya ditanya apakah saya ingin memberikan izin yang saya ingin 92 00:09:08,040 --> 00:09:14,820 izinkan, selalu izinkan, dan Anda melihat pemintal itu, sangat cepat karena ini adalah simulator, juga dengan cara mensimulasikan lokasi, itu 93 00:09:14,820 --> 00:09:19,270 bukan lokasi sebenarnya dari komputer Anda tempat Anda menjalankan ini, sebagai gantinya itu 94 00:09:19,480 --> 00:09:25,750 adalah lokasi dummy default di San Francisco dan di sini di Android, itu sama, jika saya klik dapatkan lokasi 95 00:09:25,780 --> 00:09:33,100 pengguna di sini, saya perlu memberikan izin dan begitu saya melakukannya, Anda melihat pemintal di sini dan kemudian Anda tidak melihat apa 96 00:09:33,100 --> 00:09:39,700 pun kecuali dalam log tentu saja, Anda melihat sesuatu. Di sana Anda melihat objek yang 97 00:09:39,700 --> 00:09:45,670 sedang login di mana Anda memiliki sub objek coords sehingga untuk mengatakan demikian sebuah 98 00:09:45,670 --> 00:09:53,230 bidang bernama coords dan objek yang merupakan objek lain dengan akurasi dan kemudian pasangan garis bujur yang menggambarkan 99 00:09:53,290 --> 00:10:00,170 lokasi palsu ini, kedua simulator menggunakan palsu lokasi. Anda juga mendapat cap waktu. 100 00:10:00,210 --> 00:10:01,700 Jadi sekarang kita tahu 101 00:10:01,740 --> 00:10:08,790 apa yang ada di sana, sehingga kita dapat mengatur lokasi yang dipilih, kita sekarang dapat mengatur ini untuk mengatakan sebuah objek 102 00:10:09,540 --> 00:10:20,280 tempat Anda menyimpan garis lintang lokasi. coords. lintang, itulah yang ada di sana, kanan dan bujur,. lng lokasi. 103 00:10:20,280 --> 00:10:20,280 coords. garis bujur. 104 00:10:20,320 --> 00:10:26,140 Jadi sekarang kita memiliki lokasi terpilih yang tersedia dan lokasi terpilih sekarang dapat digunakan untuk 105 00:10:26,440 --> 00:10:28,440 misalnya menunjukkan cuplikan peta 106 00:10:28,480 --> 00:10:34,420 kecil di sini setelah kita memiliki lokasi. Sebelum saya melakukan itu hanya satu hal kecil, saya 107 00:10:34,720 --> 00:10:41,920 ingin memastikan bahwa teks dan pemintal di sini terpusat, jadi pada pratinjau peta, saya akan benar-benar juga mengatur pembenaran konten untuk 108 00:10:42,280 --> 00:10:48,490 memusatkan dan menyelaraskan item ke pusat, sehingga semua konten di sana terpusat secara horizontal dan vertikal, itu hanya 109 00:10:48,500 --> 00:10:50,310 hal kecil, jadi sekarang 110 00:10:50,320 --> 00:10:52,290 Anda melihat semuanya ada di tengah. 111 00:10:52,300 --> 00:10:58,390 Tetapi dengan itu, mari sekarang pastikan kita menunjukkan potongan peta kecil yang menunjukkan lokasi yang dipilih pengguna.