Sekarang saya menonaktifkan tautan di sini sehingga saya tidak memiliki semua peringatan dan kesalahan mengenai gaya kode ini.
Tentu saja Anda dapat menyesuaikan kode Anda untuk mengikuti gaya itu,
itu adalah preferensi pribadi pada akhirnya.
Sekarang yang ingin saya lakukan di sini adalah saya ingin menunjukkan kepada Anda bagaimana Anda tentu saja dapat
mengubah kode tetapi juga bagaimana kita dapat menambahkan fungsionalitas asli dalam aplikasi vanilla React Native.
Jadi untuk itu, saya pertama-tama akan menyederhanakan aplikasi
awal ini, cukup singkirkan semua konten itu di sini dan tambahkan saja gaya dasar yang diatur di sini dengan
satu fleksibel, justifikasi pusat konten dan sejajarkan item center ke pusat konten saya di layar.
Singkirkan hal ini di sini
dan dari semua impor ini di sini, saya ingin menggunakan stylesheet, saya ingin menggunakan tampilan dan saya
ingin menggunakan tombol karena apa yang ingin saya tambahkan adalah fungsi pemilih gambar.
Jadi di sini saya
mengembalikan pandangan saya dan tombol saya dan tombol, saya katakan ambil gambar dan kemudian di
onPress, saya ingin membuka pemilih gambar.
Sekarang bagaimana kita bisa menambahkan ini?
Sekarang karena ini adalah proyek React Native tanpa expo dengan cara apa pun, kami tidak dapat dengan mudah menggunakan API expo di sini.
Sebenarnya ada cara untuk menggunakannya dan saya akan kembali lagi nanti dalam modul ini,
tetapi Anda perlu mengkonfigurasi beberapa hal. Jadi karena itu yang bisa kami lakukan
adalah kami dapat melakukan sesuatu yang akan banyak Anda lakukan jika Anda bekerja
dengan aplikasi vanilla React Native, kami mencari React Native image picker misalnya untuk menemukan paket yang membantu
kami dengan itu, untuk contoh yang satu ini, paket pemilih gambar
asli dan sekarang kita bisa menginstal ini karena sekarang kita bisa membawa paket pihak ketiga, tidak peduli apakah itu
menambahkan fungsi asli atau tidak ke dalam aplikasi Anda. Sebelumnya dengan expo, ini tidak mungkin, di sana
Anda hanya bisa membawa paket pihak ketiga yang tidak memanfaatkan fitur perangkat asli,
sekarang Anda tidak punya batasan.
Jadi sekarang kita
dapat menambahkan ini dan di sini kita dapat menginstal ini dengan mengikuti instruksi instalasi di sini,
jadi dengan kembali ke proyek kita dan di sana dengan menjalankan npm install - save dan kemudian di sini React Native
image picker, seperti ini. Omong-omong, Anda dapat menjaga proses ini
tetap berjalan di sini dan Anda harusnya sehingga kode berubah setelah Anda menyimpan file Anda diambil dan didorong ke perangkat Anda.
Jadi mari kita tunggu instalasi ini selesai sekarang.
Sekarang sudah selesai,
butuh
waktu cukup lama dan sekarang kita perlu
menginstal ini dan hal baiknya adalah paket ini sangat
mudah dipasang, Anda hanya perlu menjalankan perintah ini di
sini - Bereaksi tautan Asli, Bereaksi gambar asli.
Jadi jalankan ini di
proyek Anda, seperti ini dan Anda harus baik.
Sekarang saya akan mengatakan ada paket pihak ketiga yang membutuhkan lebih banyak usaha, itu
sangat tergantung pada paket. Untuk expo, itu
jelas sangat mudah, Anda hanya menjalankan expo install, itu sangat cepat, tidak butuh
waktu lama dan Anda tidak perlu melakukan hal lain.
Di sini Anda perlu menjalankan satu perintah
tambahan tapi tentu saja
itu juga tidak terlalu buruk tapi sekali lagi, saya akan mengatakan tidak semua
paket mendukung perintah ini, beberapa paket memerlukan cara kerja manual yang lebih banyak, pekerjaan manual di mana Anda kemudian
benar-benar perlu menyelam ke dalam Folder Android dan iOS untuk mulai mengerjakan beberapa file konfigurasi di sana.
Itulah yang dilakukan perintah React Native link untuk Anda, misalnya pada Android jika Anda masuk ke
folder aplikasi dan di sana, sumber dan kemudian di folder sumber ke build gradle, Anda akan melihat bahwa
di sana, baris ini ditambahkan.
Ini tidak ada di
sana sejak awal, ini ditambahkan oleh perintah tautan asli
React dan untuk beberapa paket Anda harus menambahkan entri ini
secara manual, banyak paket mendukung perintah tautan dan dengan versi terbaru dari React Native, beberapa
paket bahkan mendukung autolinking di mana penautan ini akan dilakukan secara otomatis setelah instalasi selesai tetapi
tidak semua paket memiliki dukungan itu, jadi itu sesuatu yang harus diperhatikan.
Di belakang layar, banyak konfigurasi berubah. Dengan itu, kita sekarang dapat
menggunakan paket ini, lagi seperti yang diperintahkan dalam dokumen mereka sehingga kita dapat menambahkan
impor ini di sini, di sini, kemudian juga menambahkan fungsi pilih gambar di sini dan menghubungkannya ke tombol kita dan sekarang di sini, pemilih
gambar bekerja sedikit berbeda dari yang expo.
Di sini kita memanggil pemilih gambar menunjukkan pemilih gambar dengan opsi yang dapat kita atur,
opsi dikonfigurasikan seperti yang dijelaskan di sini atau dijelaskan dalam dokumen pada umumnya dan di sini saya hanya akan mengambil seluruh
kode ini di sini, seperti ini, salin ke dalam gambar pilihan fungsi, singkirkan panggilan negara set ini, kita tidak
berada dalam komponen berbasis kelas sehingga itu
bukan sesuatu yang bisa kita
lakukan, sebaliknya di sini di blok lain saya hanya
akan konsol mencatat respon URI yang seharusnya
menjadi jalur gambar yang diambil dan kemudian kita punya beberapa
penangan untuk
skenario yang berbeda di sini dan dengan itu, mari kita lihat apakah itu berhasil.
Jika kita menyimpan
ini, biasanya itu akan
dibangun kembali di sini tetapi karena paket baru kami diinstal, saya akan berhenti dari proses ini dan menjalankan kembali reaksi-asli
run-android di sini sekarang di terminal saya terintegrasi ke dalam Visual Studio Code dan oleh
karena itu, dalam folder proyek ini dan sekarang ini akan memunculkan server pengembangan ini lagi dan yang lebih penting, itu juga akan meluncurkan kembali aplikasi
pada emulator sehingga kita mudah-mudahan dapat melihatnya di sana dan dapat menguji pemilih gambar di sini.
Jadi mari kita tunggu sampai selesai, untuk proses pembangunan itu selesai.
Sekarang, inilah aplikasi yang muncul dan jika saya menekannya, saya mendapatkan overlay ini, saya dapat mengklik mengambil foto dan tidak
ada yang terjadi.
Alasan untuk itu adalah izin yang hilang dan itulah pekerjaan manual yang saya maksud. Kita harus masuk ke
folder Android, di sana ke sumber, utama, AndroidManifest yang mengkonfigurasi aplikasi Android dan di sana
Anda harus menambahkan izin baru. Anda dapat menyalin izin internet ini yang
akan selalu Anda perlukan untuk aplikasi Android untuk berkomunikasi dengan server pengembangan dan di sana Anda sekarang
dapat menambahkan izin kamera yang perlu Anda tambahkan agar aplikasi ini dapat mengakses kamera perangkat, jika tidak, ini akan tidak didukung.
Jadi sekarang kita dapat menjalankan kembali proses ini, membangun kembali aplikasi dan memastikan bahwa kita mempertimbangkan pengaturan baru ini
dan dengan itu, kita sekarang harus dapat membuka ini.
Jadi sekali lagi, ini adalah pengaturan tambahan yang tidak perlu kita lakukan di dunia expo tentu saja.
Ngomong-ngomong di iOS, Anda juga perlu melakukan sesuatu yang serupa saat ini dibangun kembali. Di sana, jika Anda
masuk ke file RNWithoutExpo Anda, Anda menemukan info. file plist dan dalam file itu,
Anda juga perlu menambahkan entri untuk meminta izin ini.
Anda perlu menambahkan kunci baru di sini setelah pasangan nilai kunci yang ada, posisi yang tepat tidak masalah dan Anda
akan menemukan petunjuk rinci pada dokumen resmi paket itu, di sana di bawah dokumen yang
diinstal, jika Anda mengklik di sana, Anda Saya akan menemukan instruksi mengenai izin mana yang harus ditetapkan
untuk Android, saya
juga lupa satu, kita perlu mengatur izin penyimpanan eksternal ini jadi biarkan saya kembali
ke AndroidManifest, tambahkan ini di sini dan sekarang jalankan kembali ini di Android dan untuk iOS , di
sana Anda perlu mengatur kunci-kunci ini di sini. Jadi, Anda menyalin semua
itu dan kemudian kembali ke info. file plist saya tunjukkan di sini dan sekarang Anda dapat menambahkan pasangan nilai kunci ini di sini.
Dengan
itu, mari kita periksa aplikasi di Android dan jika
saya sekarang klik untuk mengambil foto, sekarang saya minta izin di sini,
ini sekarang terjadi secara otomatis, paket melakukan itu untuk
kami dan sekarang, kamera terbuka. Jadi ini sekarang berfungsi
tetapi seperti yang Anda lihat dengan sedikit konfigurasi tambahan dan dengan mengikuti instruksi pada dokumen resmi
dan setiap paket akan memiliki instruksi sendiri di sana. Beberapa paket bahkan tidak mendukung perintah tautan, di
sana
Anda perlu melakukan lebih
banyak lagi, paket lain membutuhkan lebih sedikit pekerjaan. Anda memiliki lebih banyak fleksibilitas tetapi karenanya juga lebih banyak tugas.
Namun ini adalah bagaimana Anda dapat membawa paket pihak ketiga yang memanfaatkan fitur perangkat asli ke aplikasi React Native hanya untuk
kode komponen yang Anda tulis, itu kode yang sama yang kami srote di
seluruh kursus - komponen yang sama, logika yang
sama, cara yang sama tentang bagaimana Anda membangun aplikasi Anda. Anda dapat membuat folder yang sama, Anda dapat
menambahkan Bereaksi navigasi, yang semuanya tidak berubah.