Sekarang aplikasi React Native ini dibangun dengan bantuan expo seperti yang Anda tahu. Sekarang seperti yang saya sebutkan di
awal kursus, ini masih merupakan aplikasi asli React Native, oleh karena itu pameran
hanya sebagai pembungkus tambahan yang menyediakan banyak fitur kenyamanan di luar kotak yang membuat membangun
aplikasi ini lebih
mudah dan itu seperti sebuah shell, sebuah aplikasi tempat aplikasi kami berjalan yang karenanya menjadikan banyak fungsi
perangkat asli lebih mudah dan terutama lebih mudah diatur.
Sekarang seperti yang saya sebutkan di awal modul ini, dalam modul terpisah saya akan menunjukkan kepada Anda bagaimana
Anda dapat menambahkan fitur perangkat asli ke aplikasi non-expo tetapi
sebenarnya, jika Anda tidak memiliki alasan untuk tidak menggunakan expo, saya akan sangat menyarankan Anda menggunakannya karena
pameran jika Anda memeriksa dokumen mereka, memiliki banyak fitur bawaan dan banyak modul bawaan bawaan yang dapat Anda gunakan, sehingga fitur perangkat asli
dapat Anda tambahkan
dengan mudah dan Anda melihat
daftar lengkap di sini dengan pergi ke dokumen dan di sana ke referensi API.
Di sini, Anda melihat banyak hal yang dapat Anda tambahkan ke aplikasi Anda dan ini
sebagian besar fungsi perangkat asli yang semuanya disediakan
oleh expo di luar kotak, jadi Anda masih perlu menginstal sesuatu tetapi Anda harus
tidak melakukan manual konfigurasi dan seperti yang akan Anda lihat dalam membangun aplikasi tanpa modul expo, ada beberapa
konfigurasi yang perlu Anda lakukan jika Anda menambahkan modul asli, paket fitur perangkat asli ke aplikasi non-expo,
jadi ini benar-benar manis sini.
Sekarang saya ingin menggunakan kamera dan memang ada paket kamera yang bisa Anda tambahkan.
Kami benar-benar dapat menggunakannya untuk mengakses kamera perangkat, ini
sangat cocok
jika Anda perlu membuat aplikasi yang benar-benar harus melakukan banyak hal dengan kamera, jika Anda
membangun seperti Instagram, seperti aplikasi di mana Anda benar-benar ingin mengontrol seluruh layar kamera
dan seluruh aliran kamera, sebenarnya bukan itu yang ingin saya lakukan di sini.
Saya ingin menggunakan kamera perangkat biasa, saya
tidak perlu sesuatu yang
istimewa di sana, saya hanya ingin mendapatkan gambar yang dapat diambil
pengguna dan untuk itu kami benar-benar mendapatkan pemilih gambar. Ini juga memungkinkan kita untuk menggunakan kamera perangkat tetapi
itu tidak memungkinkan kita untuk menyesuaikan kamera sebanyak itu,
tetapi itulah yang saya butuhkan di sini.
Sekarang yang perlu kita lakukan untuk mendapatkan akses adalah menjalankan perintah install expo ini, yang omong-omong seperti instal
npm, hanya saja memastikan bahwa ia menginstal versi paket yang dijamin dapat bekerja dengan versi
spesifik kami. expo yang kami gunakan di aplikasi ini. Jadi saya akan menyalin perintah ini dan kemudian dalam
proyek ini, kita dapat menjalankan expo install picko image picker. Tekan enter dan ini sekarang akan menginstal paket ini dengan
npm menginstal di belakang layar, inilah yang dilakukannya di sini, hanya
dalam versi yang sesuai dengan SDK expo kami di mana kami menggunakan dalam proyek ini dan ini
sekarang akan menginstalnya dan hanya itu,
tidak diperlukan konfigurasi tambahan.
Kami tidak perlu menyentuh file konfigurasi, kami
tidak perlu melakukan hal lain,
ini memastikan bahwa kami dapat menggunakan fungsi ini dan itu
tentu saja sangat mudah.
Dengan itu kita dapat mulai menggunakannya dan saya ingin mulai menggunakannya di sini di layar tempat baru
di mana kita memiliki input
teks, di sana saya juga ingin sekarang menambahkan tombol yang dapat ditekan pengguna untuk membuka kamera.
Sekarang tentu saja untuk semua fitur perangkat asli ini dan juga banyak fitur yang tentu saja tidak dapat kita
bahas dalam kursus ini, Anda selalu belajar bagaimana Anda dapat menggunakannya di sini dalam dokumen pameran resmi Anda,
di sana Anda mempelajari metode dan properti yang dapat Anda akses di sana, Anda menemukan beberapa contoh singkat untuk banyak paket,
jadi itu pasti sesuatu yang harus Anda periksa. Untuk kamera, tentu saja Anda juga bisa
mengikuti karena kami akan menggunakannya bersama di sini untuk mengambil gambar.
Saya sebenarnya akan membuat komponen baru, ImageSelector. js, Anda dapat menamainya apa pun yang
Anda inginkan di mana saya mengimpor Bereaksi dari Bereaksi dan di mana saya mengimpor tampilan dan tombol dan juga teks dari Bereaksi Asli
dan juga stylesheet tentu saja karena saya ingin gaya pemilih gambar saya.
Sebenarnya mari kita beri nama pemilih gambar, saya suka itu, komponen pemilih gambar saya.
Jadi di sini, pemetik gambar kemudian menjadi komponen reguler, di mana saya
ingin mengatur beberapa gaya dengan Stylesheet. buat metode dan di mana saya pada akhirnya mengekspor komponen pemilih gambar.
Sekarang apa yang akan terjadi di sini di komponen pemilih gambar? Pada akhirnya, di sini saya akan
mengembalikan tampilan yang kemudian memiliki tampilan lain di mana saya dapat menampilkan pratinjau gambar.
Jadi di sana, saya ingin memiliki komponen teks di mana saya mengatakan belum mengambil gambar yang merupakan konten mundur
saya jika belum ada gambar yang dipilih,
jika tidak saya akan menampilkan gambar,
jadi kita juga perlu mengimpor komponen gambar dari Bereaksi Asli dan di bawah tampilan itu, saya
akan menambahkan tombol dengan judul take image di mana saya ingin mengatur warna ke Warna. utama, jadi untuk itu, pastikan
Anda mengimpor warna yang konstan dan saat ditekan, saya ingin
membuka kamera dan menampilkannya kepada pengguna. Jadi saya juga akan menambahkan konstanta di sini, ambil penangan gambar dan itu adalah
fungsi yang harus membuka kamera
dan itulah fungsi yang akan saya ikat ke tombol ini.
Sekarang beberapa gaya akan menyenangkan. Pada tampilan luar itu, saya akan menambahkan gaya pemilih gambar,
pada tampilan dalam ini yang menampilkan
pratinjau gambar saya, saya akan menambahkan gaya pratinjau gambar. Kemudian teks ini di sini juga bisa ditata tetapi saya sebenarnya tidak memerlukan
gaya khusus di sana dan tentu saja, saya juga ingin menampilkan gambar di sini dan saya akan segera menambahkan kondisi if / else
untuk hanya menampilkan teks atau
gambar dan ini juga harus mendapatkan beberapa gaya mungkin hanya gambar.
Jadi sekarang kita memiliki tiga pengidentifikasi gaya yang perlu kita tambahkan
ke stylesheet, kita mendapatkan pemilih gambar untuk
komponen keseluruhan, mendapatkan pratinjau gambar dan kemudian kita mendapatkan gambar itu sendiri.
Gambar itu sendiri sederhana, di sana saya hanya ingin mengatur lebar 100% dan tinggi 100%
sehingga dibutuhkan lebar penuh dan tinggi wadah pratinjau sekitarnya.
Wadah itu tentu saja dapat dikonfigurasi namun Anda ingin mengkonfigurasinya, saya
akan memberikannya lebar 100% dan tinggi 200 piksel tetapi tentu saja Anda dapat
mengubahnya atau menghitungnya secara dinamis dengan dimensi API. Tambahkan margin ke bagian bawah 10
dan pastikan bahwa teks placeholder saya akan benar-benar terpusat dengan menambahkan justify content center
dan menyelaraskan item center di sini dan
di samping itu, saya juga akan menambahkan perbatasan di sini dengan warna abu-abu terang dan lebar perbatasan
satu.
Sekarang untuk komponen pemilih gambar secara umum, saya hanya akan mengatur ini untuk menyelaraskan pusat item
untuk memastikan bahwa semua item dipusatkan secara horizontal tetapi
sekarang kita semua di sini untuk benar-benar membuka kamera perangkat, kan?
Jadi sebelum kita melakukan hal lain di sini mengenai pratinjau dan seterusnya, mari
kita pastikan bahwa di sini di pengambil gambar, kita benar-benar membuka kamera dan untuk itu, mari kita mengimpor semuanya sebagai pemetik gambar dari pemilih gambar pameran, jadi dari
ini paket yang baru saja Anda instal. Sekarang karena saya menggunakan pemetik gambar di sini dan
juga untuk komponen, kami akan memiliki nama bentrokan, jadi saya akan memberi nama pemetik img ini
di sini hanya untuk menghindari bentrokan nama ini yang jika tidak akan menyebabkan masalah, juga
mengubahnya di sini dalam ekspor tentu saja
Jadi sekarang dengan pemilih gambar diimpor di sini, kita dapat menggunakannya di
sini, pemilih gambar
dan di sana kita dapat memanggil launch camera async.
Anda juga dapat membuka galeri jika
Anda ingin tetapi di sini, saya akan memanggil launch camera async.
Sekarang ini akan membuka kamera perangkat dan bagian async di sini menyiratkan bahwa ini adalah
operasi async.
Memang ini mengembalikan janji, yang masuk akal karena membuka kamera dan kami tidak
tahu kapan pengguna akan
selesai mengambil gambar, jadi itu hanya akan mendaftarkan fungsi yang harus dijalankan setelah pengguna selesai
dan menyelesaikan janji untuk menjalankan fungsi itu setelah itu terjadi, setelah pengguna
selesai atau tentu saja sekali pengguna membatalkan. Kita dapat menangani semua itu dan hasilnya dan seterusnya, untuk
sekarang mari kita lihat apakah itu berhasil dan untuk itu, mari kita sertakan komponen pemilih gambar di layar tempat baru.
Jadi di sana, kita dapat mengimpor pemilih gambar dan di sini tentu saja kita dapat
menggunakan nama itu karena kita tidak menggunakan paket pemilih gambar di sini, mengimpornya dari komponen, dari komponen pemilih gambar
dan menambahkan pemilih gambar ini di sini di bawah input teks kita sebagai komponen penutup diri seperti ini.
Sekarang jika kita menyimpan itu, mari kita lihat. Di sini, teks itu dan
sebagainya, yang tidak diposisikan dengan benar, kita tidak perlu khawatir tentang itu sekarang, mari
kita tekan mengambil gambar dan apa yang akan Anda lihat adalah bahwa tidak ada yang terjadi tetapi kemudian saya mendapatkan peringatan
- kamera hilang atau izin roll kamera. Di Android jika saya mencobanya, di sana saya ditanya apakah saya ingin memberikan izin. Saya perlu menekan izinkan di sini dan
dengan itu, kamera tidak terbuka. Jadi itu bagus, umumnya berfungsi, saya bisa
menggunakannya, saya
dapat menekan tombol ini dan kemudian mengkonfirmasi gambar yang saya
ambil tetapi di iOS tidak berfungsi dan mengapa demikian? Baik di iOS, kami mendapat kesalahan izin di sini dan
itu
hanya terjadi karena izin penting tetapi mereka bekerja secara berbeda di iOS dan Android.
Di
Android Anda juga akan mengatur izin terlebih dahulu dan karena kami menggunakan aplikasi pameran ini di mana pameran menyediakan
bungkus ini, pameran sebenarnya melakukan semua izin ini mengatur dan meminta kami. Untuk iOS, sistem izin bekerja
sedikit berbeda.
Anda tidak benar-benar mengaturnya sehingga Anda memiliki file konfigurasi tempat Anda mendefinisikan semua izin sebelumnya
dan
hanya itu, alih-alih Anda harus meminta izin saat runtime.
Dengan catatan di beberapa versi Android, kini Anda juga harus melakukannya.
Masih ada pameran seperti yang Anda lihat melakukannya untuk Anda, jadi untuk Android, ini berfungsi seperti itu, di
iOS tidak, Anda perlu meminta izin kepada pengguna untuk mengakses kamera dan itu hanya sesuatu yang perlu kita
lakukan di sini dan kita dapat melakukannya dengan bantuan paket
expo lain dan itu adalah paket izin.
Anda juga perlu menginstalnya dengan perintah ini di sini ke dalam proyek Anda sehingga Anda dapat meminta
izin kepada pengguna.
Jadi mari kita lakukan ini
di sini di proyek, mari kita jalankan expo instal izin expo yang lagi-lagi ini hanya pembungkus sekitar npm instal untuk
menginstal izin untuk proyek ini atau untuk menginstal paket ini untuk proyek ini dan kemudian di pemilih gambar sebelum
kita mencoba meluncurkan kamera dan membuka kamera, kita harus meminta izin. Untuk itu saya akan benar-benar menambahkan
konstanta baru di sini, dapatkan atau verifikasi izin dan ini adalah fungsi, yang menyimpan
fungsi yang akan menggunakan paket izin yang baru ditambahkan ini.
Jadi di sini saya mengimpor semuanya sebagai izin dari izin pameran, jadi jenis impor
yang sama seperti yang kita miliki untuk pemetik
gambar dan kemudian di sana, kita dapat menggunakan izin dan bertanya secara tidak sinkron.
Sekali lagi, itu tugas async yang mengembalikan janji karena ini akan membuka prompt dan sebelum pengguna
memilih jawaban, tidak ada yang akan
terjadi, jadi oleh karena itu kami memiliki janji yang menyelesaikan atau ditolak setelah pengguna mengonfirmasi atau menolak.
Jadi di sini kita perlu lebih spesifik tentang izin yang kita
butuhkan, jadi kita memberikan sesuatu untuk meminta async dan itu adalah konstanta yang kita dapatkan dari objek izin yang kita impor di
sini.
Jadi dengan notasi titik di sini, kita dapat mengakses berbagai jenis izin dan di sini semua nama yang
ditulis dalam huruf kapital adalah berbagai izin yang
dapat Anda minta dan di sini kami memerlukan izin kamera karena kami ingin mengakses kamera.
Jika Anda ingin mengakses galeri, itu akan menjadi izin roll kamera.
Sekarang saya akan pergi untuk kamera
di sini dan seperti yang saya katakan, ini mengembalikan janji, saya
ingin menggunakan async menunggu di sini maka saya dapat menambahkan async di sini di depan fungsi dan kemudian
menunggu ini
dan mendapatkan hasilnya dan menyimpannya dalam konstanta , alternatif untuk itu akan menggunakan kemudian dan
menangkap ini dan di sana kita sekarang dapat memeriksa apakah hasilnya. statusnya tidak sama dengan yang diberikan yang berarti pengguna menolak,
pengguna tidak memberikan izin, dalam
hal ini kami tidak dapat melanjutkan.
Jadi di sini saya benar-benar akan membuang peringatan, jadi impor
peringatan dari Bereaksi Asli dan buang peringatan di mana saya mengatakan peringatan. peringatan, izin tidak mencukupi, Anda perlu memberikan izin aplikasi kamera untuk menggunakan aplikasi ini atau output apa pun yang ingin Anda
tampilkan dan kemudian saya akan menambahkan
satu tombol di sini di mana saya katakan OK. Sekarang pengguna perlu mengubah izin dalam pengaturan
sistem setelah menolaknya, jadi kami tidak dapat meminta izin lagi di
sini setelah ditolak.
Jadi di sini, saya ingin mengembalikan false karena itu fungsi verifikasi izin dan saya ingin
mengembalikan false jika jenis pengguna tidak memberi kami izin,
saya mengembalikan true sebaliknya karena sekarang kami
tahu kami memiliki izin. berfungsi beberapa kali dan pengguna sudah memberikan
izin di masa lalu, pengguna tidak akan disajikan dengan prompt ini lagi, sama
dengan cara jika pengguna menolak, dalam kedua kasus hasilnya disimpan secara otomatis oleh iOS dan fungsi ini hanya akan mengembalikan
benar atau salah tergantung pada apakah pengguna menolak atau memberikan akses di masa lalu.
Jadi verifikasi izin sekarang hanyalah fungsi yang perlu kita panggil
di pengambil gambar sebelum kita mencoba menggunakan kamera.
Jadi di sini, saya juga ingin menggunakan async menunggu karena memverifikasi izin tentu saja adalah
fungsi yang
mengembalikan janji, jadi saya akan menunggu ini dan menyimpan hasil yang akan saya simpan di konstanta bernama memiliki izin
karena ini benar atau salah tergantung pada apakah pengguna memberikan izin atau tidak.
Sekarang jika ini salah, jadi jika itu tidak benar, saya akan kembali ke sini, saya tidak
akan melanjutkan, saya tidak akan membuka kamera karena saya tidak akan diizinkan untuk melakukan itu, jadi kami hanya tidak
bisa
lanjutkan, itu masalahnya.
Kalau tidak, kita bisa melanjutkan dan sekarang kita juga bisa meluncurkan kamera di iOS.
Jadi mari
kita coba, mari
kita simpan itu dan sekarang dengan itu berubah, saya benar-benar akan menghapus expo di sini untuk memastikan bahwa mengenai
izin yang saya berikan di sana, itu kembali ke keadaan awal.
Anda mungkin tidak perlu melakukan itu jika Anda tidak pernah memberikan izin apa
pun di aplikasi pameran Anda, tetapi jika Anda bermain-main dengan izin dan paket asli sebelumnya, Anda harus menghapus dan
menginstal kembali aplikasi pameran dengan lagi menjalankan aplikasi Anda di iOS dengan menekan i di konsol di
sana untuk memastikan bahwa semua izin ini diatur ulang.
Jadi sekarang jika kita pergi ke layar putar baru dan klik ambil gambar, saya ditanya apakah
saya ingin memberikan akses ke kamera dan di sini saya bisa mengklik OK dan sekarang kita masih mendapatkan kesalahan itu.
Sekarang satu-satunya alasan untuk itu adalah bahwa meskipun kami mencoba mengakses kamera di sini, ini sebenarnya dan itu
hanya sesuatu yang saya tahu untuk paket ini memerlukan izin untuk roll kamera penuh.
Jadi mari kita ubah ini untuk meminta izin untuk roll
kamera di sini dan dengan itu, kembali dan klik
ambil gambar, sekarang saya bertanya apakah saya ingin mengizinkan akses ke foto dan sekarang jika saya klik ya, saya mendapatkan
kamera tidak tersedia di simulator yang sekarang merupakan kesalahan yang berbeda dan cukup jelas tentang
apa masalahnya, simulator iOS tidak memiliki kamera. Jadi saya akan melanjutkan di Android mulai
sekarang, tetapi tentu saja Anda dapat menguji ini pada iPhone
nyata untuk melihat bahwa di sana, itu juga berfungsi. Jika Anda memindai barcode expo Anda dengan aplikasi expo dan menjalankan aplikasi
di sana seperti yang Anda
lihat di awal kursus, Anda dapat mengambil gambar dengan telepon nyata dan saya juga akan mendemonstrasikan aplikasi yang sudah selesai
di akhir modul ini. pada perangkat iOS dan Android, pada perangkat nyata.
Jadi untuk saat ini, saya akan fokus pada Android dan tentu saja, kami sudah bisa membuka ini.
Saya ditanya lagi di sini tapi sekarang saya bisa membuka ini dan mengambil gambar. Itu tentu saja bagus tetapi mengambil gambar seperti ini bukan segalanya
yang ingin saya lakukan, saya
juga ingin dapat mengkonfigurasi bagaimana saya mengambilnya dan saya ingin dapat menggunakannya.