1 00:00:02,500 --> 00:00:07,190 Sekarang saya menonaktifkan tautan di sini sehingga saya tidak memiliki semua peringatan dan kesalahan mengenai gaya kode ini. 2 00:00:07,190 --> 00:00:10,550 Tentu saja Anda dapat menyesuaikan kode Anda untuk mengikuti gaya itu, 3 00:00:10,640 --> 00:00:12,820 itu adalah preferensi pribadi pada akhirnya. 4 00:00:12,830 --> 00:00:19,070 Sekarang yang ingin saya lakukan di sini adalah saya ingin menunjukkan kepada Anda bagaimana Anda tentu saja dapat 5 00:00:19,130 --> 00:00:24,390 mengubah kode tetapi juga bagaimana kita dapat menambahkan fungsionalitas asli dalam aplikasi vanilla React Native. 6 00:00:24,610 --> 00:00:28,780 Jadi untuk itu, saya pertama-tama akan menyederhanakan aplikasi 7 00:00:28,850 --> 00:00:37,250 awal ini, cukup singkirkan semua konten itu di sini dan tambahkan saja gaya dasar yang diatur di sini dengan 8 00:00:37,400 --> 00:00:44,090 satu fleksibel, justifikasi pusat konten dan sejajarkan item center ke pusat konten saya di layar. 9 00:00:44,090 --> 00:00:46,550 Singkirkan hal ini di sini 10 00:00:46,760 --> 00:00:54,150 dan dari semua impor ini di sini, saya ingin menggunakan stylesheet, saya ingin menggunakan tampilan dan saya 11 00:00:54,290 --> 00:00:59,720 ingin menggunakan tombol karena apa yang ingin saya tambahkan adalah fungsi pemilih gambar. 12 00:00:59,750 --> 00:01:01,660 Jadi di sini saya 13 00:01:02,750 --> 00:01:08,100 mengembalikan pandangan saya dan tombol saya dan tombol, saya katakan ambil gambar dan kemudian di 14 00:01:08,240 --> 00:01:10,460 onPress, saya ingin membuka pemilih gambar. 15 00:01:10,460 --> 00:01:11,990 Sekarang bagaimana kita bisa menambahkan ini? 16 00:01:12,230 --> 00:01:20,030 Sekarang karena ini adalah proyek React Native tanpa expo dengan cara apa pun, kami tidak dapat dengan mudah menggunakan API expo di sini. 17 00:01:20,040 --> 00:01:25,530 Sebenarnya ada cara untuk menggunakannya dan saya akan kembali lagi nanti dalam modul ini, 18 00:01:25,530 --> 00:01:30,690 tetapi Anda perlu mengkonfigurasi beberapa hal. Jadi karena itu yang bisa kami lakukan 19 00:01:30,690 --> 00:01:34,660 adalah kami dapat melakukan sesuatu yang akan banyak Anda lakukan jika Anda bekerja 20 00:01:34,730 --> 00:01:39,810 dengan aplikasi vanilla React Native, kami mencari React Native image picker misalnya untuk menemukan paket yang membantu 21 00:01:39,810 --> 00:01:43,060 kami dengan itu, untuk contoh yang satu ini, paket pemilih gambar 22 00:01:43,320 --> 00:01:49,140 asli dan sekarang kita bisa menginstal ini karena sekarang kita bisa membawa paket pihak ketiga, tidak peduli apakah itu 23 00:01:49,320 --> 00:01:55,080 menambahkan fungsi asli atau tidak ke dalam aplikasi Anda. Sebelumnya dengan expo, ini tidak mungkin, di sana 24 00:01:55,080 --> 00:01:59,520 Anda hanya bisa membawa paket pihak ketiga yang tidak memanfaatkan fitur perangkat asli, 25 00:01:59,520 --> 00:02:01,380 sekarang Anda tidak punya batasan. 26 00:02:01,470 --> 00:02:03,060 Jadi sekarang kita 27 00:02:03,360 --> 00:02:09,810 dapat menambahkan ini dan di sini kita dapat menginstal ini dengan mengikuti instruksi instalasi di sini, 28 00:02:09,810 --> 00:02:18,690 jadi dengan kembali ke proyek kita dan di sana dengan menjalankan npm install - save dan kemudian di sini React Native 29 00:02:21,970 --> 00:02:25,430 image picker, seperti ini. Omong-omong, Anda dapat menjaga proses ini 30 00:02:25,450 --> 00:02:30,730 tetap berjalan di sini dan Anda harusnya sehingga kode berubah setelah Anda menyimpan file Anda diambil dan didorong ke perangkat Anda. 31 00:02:30,970 --> 00:02:34,310 Jadi mari kita tunggu instalasi ini selesai sekarang. 32 00:02:34,330 --> 00:02:35,090 Sekarang sudah selesai, 33 00:02:35,110 --> 00:02:35,860 butuh 34 00:02:36,800 --> 00:02:39,240 waktu cukup lama dan sekarang kita perlu 35 00:02:39,240 --> 00:02:41,900 menginstal ini dan hal baiknya adalah paket ini sangat 36 00:02:41,910 --> 00:02:44,770 mudah dipasang, Anda hanya perlu menjalankan perintah ini di 37 00:02:44,790 --> 00:02:47,250 sini - Bereaksi tautan Asli, Bereaksi gambar asli. 38 00:02:47,340 --> 00:02:49,270 Jadi jalankan ini di 39 00:02:50,400 --> 00:02:53,550 proyek Anda, seperti ini dan Anda harus baik. 40 00:02:53,730 --> 00:02:57,870 Sekarang saya akan mengatakan ada paket pihak ketiga yang membutuhkan lebih banyak usaha, itu 41 00:02:57,870 --> 00:03:00,960 sangat tergantung pada paket. Untuk expo, itu 42 00:03:00,960 --> 00:03:05,540 jelas sangat mudah, Anda hanya menjalankan expo install, itu sangat cepat, tidak butuh 43 00:03:05,550 --> 00:03:08,720 waktu lama dan Anda tidak perlu melakukan hal lain. 44 00:03:08,880 --> 00:03:11,140 Di sini Anda perlu menjalankan satu perintah 45 00:03:11,270 --> 00:03:12,870 tambahan tapi tentu saja 46 00:03:12,870 --> 00:03:16,890 itu juga tidak terlalu buruk tapi sekali lagi, saya akan mengatakan tidak semua 47 00:03:16,920 --> 00:03:22,950 paket mendukung perintah ini, beberapa paket memerlukan cara kerja manual yang lebih banyak, pekerjaan manual di mana Anda kemudian 48 00:03:22,950 --> 00:03:28,250 benar-benar perlu menyelam ke dalam Folder Android dan iOS untuk mulai mengerjakan beberapa file konfigurasi di sana. 49 00:03:28,290 --> 00:03:33,600 Itulah yang dilakukan perintah React Native link untuk Anda, misalnya pada Android jika Anda masuk ke 50 00:03:33,600 --> 00:03:39,540 folder aplikasi dan di sana, sumber dan kemudian di folder sumber ke build gradle, Anda akan melihat bahwa 51 00:03:42,290 --> 00:03:43,970 di sana, baris ini ditambahkan. 52 00:03:44,000 --> 00:03:45,710 Ini tidak ada di 53 00:03:45,710 --> 00:03:48,610 sana sejak awal, ini ditambahkan oleh perintah tautan asli 54 00:03:48,830 --> 00:03:52,250 React dan untuk beberapa paket Anda harus menambahkan entri ini 55 00:03:52,250 --> 00:03:57,080 secara manual, banyak paket mendukung perintah tautan dan dengan versi terbaru dari React Native, beberapa 56 00:03:57,080 --> 00:04:02,480 paket bahkan mendukung autolinking di mana penautan ini akan dilakukan secara otomatis setelah instalasi selesai tetapi 57 00:04:02,480 --> 00:04:06,550 tidak semua paket memiliki dukungan itu, jadi itu sesuatu yang harus diperhatikan. 58 00:04:06,550 --> 00:04:12,680 Di belakang layar, banyak konfigurasi berubah. Dengan itu, kita sekarang dapat 59 00:04:13,100 --> 00:04:19,680 menggunakan paket ini, lagi seperti yang diperintahkan dalam dokumen mereka sehingga kita dapat menambahkan 60 00:04:20,000 --> 00:04:31,050 impor ini di sini, di sini, kemudian juga menambahkan fungsi pilih gambar di sini dan menghubungkannya ke tombol kita dan sekarang di sini, pemilih 61 00:04:34,100 --> 00:04:37,360 gambar bekerja sedikit berbeda dari yang expo. 62 00:04:37,370 --> 00:04:42,400 Di sini kita memanggil pemilih gambar menunjukkan pemilih gambar dengan opsi yang dapat kita atur, 63 00:04:42,410 --> 00:04:49,550 opsi dikonfigurasikan seperti yang dijelaskan di sini atau dijelaskan dalam dokumen pada umumnya dan di sini saya hanya akan mengambil seluruh 64 00:04:49,640 --> 00:04:56,120 kode ini di sini, seperti ini, salin ke dalam gambar pilihan fungsi, singkirkan panggilan negara set ini, kita tidak 65 00:04:56,140 --> 00:04:58,510 berada dalam komponen berbasis kelas sehingga itu 66 00:04:58,510 --> 00:05:00,450 bukan sesuatu yang bisa kita 67 00:05:00,460 --> 00:05:03,820 lakukan, sebaliknya di sini di blok lain saya hanya 68 00:05:04,000 --> 00:05:06,560 akan konsol mencatat respon URI yang seharusnya 69 00:05:06,590 --> 00:05:09,960 menjadi jalur gambar yang diambil dan kemudian kita punya beberapa 70 00:05:10,150 --> 00:05:11,160 penangan untuk 71 00:05:11,340 --> 00:05:16,330 skenario yang berbeda di sini dan dengan itu, mari kita lihat apakah itu berhasil. 72 00:05:16,330 --> 00:05:17,440 Jika kita menyimpan 73 00:05:20,110 --> 00:05:21,550 ini, biasanya itu akan 74 00:05:21,550 --> 00:05:28,470 dibangun kembali di sini tetapi karena paket baru kami diinstal, saya akan berhenti dari proses ini dan menjalankan kembali reaksi-asli 75 00:05:28,490 --> 00:05:33,680 run-android di sini sekarang di terminal saya terintegrasi ke dalam Visual Studio Code dan oleh 76 00:05:33,680 --> 00:05:42,270 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 77 00:05:42,270 --> 00:05:47,750 pada emulator sehingga kita mudah-mudahan dapat melihatnya di sana dan dapat menguji pemilih gambar di sini. 78 00:05:47,820 --> 00:05:51,060 Jadi mari kita tunggu sampai selesai, untuk proses pembangunan itu selesai. 79 00:05:51,060 --> 00:05:58,260 Sekarang, inilah aplikasi yang muncul dan jika saya menekannya, saya mendapatkan overlay ini, saya dapat mengklik mengambil foto dan tidak 80 00:05:58,260 --> 00:05:59,700 ada yang terjadi. 81 00:05:59,700 --> 00:06:04,290 Alasan untuk itu adalah izin yang hilang dan itulah pekerjaan manual yang saya maksud. Kita harus masuk ke 82 00:06:04,290 --> 00:06:11,610 folder Android, di sana ke sumber, utama, AndroidManifest yang mengkonfigurasi aplikasi Android dan di sana 83 00:06:11,610 --> 00:06:16,770 Anda harus menambahkan izin baru. Anda dapat menyalin izin internet ini yang 84 00:06:16,770 --> 00:06:22,530 akan selalu Anda perlukan untuk aplikasi Android untuk berkomunikasi dengan server pengembangan dan di sana Anda sekarang 85 00:06:22,530 --> 00:06:29,360 dapat menambahkan izin kamera yang perlu Anda tambahkan agar aplikasi ini dapat mengakses kamera perangkat, jika tidak, ini akan tidak didukung. 86 00:06:29,370 --> 00:06:35,820 Jadi sekarang kita dapat menjalankan kembali proses ini, membangun kembali aplikasi dan memastikan bahwa kita mempertimbangkan pengaturan baru ini 87 00:06:35,820 --> 00:06:39,090 dan dengan itu, kita sekarang harus dapat membuka ini. 88 00:06:39,120 --> 00:06:43,070 Jadi sekali lagi, ini adalah pengaturan tambahan yang tidak perlu kita lakukan di dunia expo tentu saja. 89 00:06:44,400 --> 00:06:49,180 Ngomong-ngomong di iOS, Anda juga perlu melakukan sesuatu yang serupa saat ini dibangun kembali. Di sana, jika Anda 90 00:06:49,200 --> 00:06:57,100 masuk ke file RNWithoutExpo Anda, Anda menemukan info. file plist dan dalam file itu, 91 00:06:57,490 --> 00:07:02,630 Anda juga perlu menambahkan entri untuk meminta izin ini. 92 00:07:07,760 --> 00:07:14,660 Anda perlu menambahkan kunci baru di sini setelah pasangan nilai kunci yang ada, posisi yang tepat tidak masalah dan Anda 93 00:07:14,670 --> 00:07:19,920 akan menemukan petunjuk rinci pada dokumen resmi paket itu, di sana di bawah dokumen yang 94 00:07:19,920 --> 00:07:25,710 diinstal, jika Anda mengklik di sana, Anda Saya akan menemukan instruksi mengenai izin mana yang harus ditetapkan 95 00:07:25,710 --> 00:07:27,100 untuk Android, saya 96 00:07:27,150 --> 00:07:32,240 juga lupa satu, kita perlu mengatur izin penyimpanan eksternal ini jadi biarkan saya kembali 97 00:07:32,250 --> 00:07:38,380 ke AndroidManifest, tambahkan ini di sini dan sekarang jalankan kembali ini di Android dan untuk iOS , di 98 00:07:38,410 --> 00:07:43,970 sana Anda perlu mengatur kunci-kunci ini di sini. Jadi, Anda menyalin semua 99 00:07:47,020 --> 00:07:53,410 itu dan kemudian kembali ke info. file plist saya tunjukkan di sini dan sekarang Anda dapat menambahkan pasangan nilai kunci ini di sini. 100 00:07:57,460 --> 00:07:58,210 Dengan 101 00:07:58,750 --> 00:08:01,750 itu, mari kita periksa aplikasi di Android dan jika 102 00:08:01,930 --> 00:08:05,860 saya sekarang klik untuk mengambil foto, sekarang saya minta izin di sini, 103 00:08:05,860 --> 00:08:08,730 ini sekarang terjadi secara otomatis, paket melakukan itu untuk 104 00:08:08,920 --> 00:08:12,120 kami dan sekarang, kamera terbuka. Jadi ini sekarang berfungsi 105 00:08:12,130 --> 00:08:17,350 tetapi seperti yang Anda lihat dengan sedikit konfigurasi tambahan dan dengan mengikuti instruksi pada dokumen resmi 106 00:08:17,350 --> 00:08:23,260 dan setiap paket akan memiliki instruksi sendiri di sana. Beberapa paket bahkan tidak mendukung perintah tautan, di 107 00:08:23,260 --> 00:08:23,830 sana 108 00:08:23,860 --> 00:08:25,530 Anda perlu melakukan lebih 109 00:08:25,560 --> 00:08:31,380 banyak lagi, paket lain membutuhkan lebih sedikit pekerjaan. Anda memiliki lebih banyak fleksibilitas tetapi karenanya juga lebih banyak tugas. 110 00:08:31,390 --> 00:08:37,240 Namun ini adalah bagaimana Anda dapat membawa paket pihak ketiga yang memanfaatkan fitur perangkat asli ke aplikasi React Native hanya untuk 111 00:08:37,240 --> 00:08:40,970 kode komponen yang Anda tulis, itu kode yang sama yang kami srote di 112 00:08:41,020 --> 00:08:43,630 seluruh kursus - komponen yang sama, logika yang 113 00:08:43,630 --> 00:08:49,660 sama, cara yang sama tentang bagaimana Anda membangun aplikasi Anda. Anda dapat membuat folder yang sama, Anda dapat 114 00:08:49,660 --> 00:08:52,540 menambahkan Bereaksi navigasi, yang semuanya tidak berubah.