Pemilihan Gambar Expo: Panduan Lengkap 2026

Pertanyaan yang mungkin Anda hadapi saat ini adalah bagaimana mengakses UI yang sudah siap, layar profil dengan tombol "Upload foto", dan bagaimana mengatasi bagian yang seharusnya mudah tetapi tidak mudah. Alur pilihan gambar yang sebenarnya menyentuh izin native, interface yang dikontrol oleh OS, bentuk kembali yang berbeda dari apa yang banyak pengembang harapkan, dan beberapa detail waktu build yang hanya muncul setelah Anda mengirimkan build yang sebenarnya.

Di mana Expo Image Picker masuk. Ini adalah library resmi Expo untuk membuka UI sistem untuk memilih gambar dan video dari library perangkat atau mengambil foto dengan kamera, seperti yang dijelaskan di Gudang Paket Expo. Dalam prakteknya, itu berarti Anda mendapatkan jembatan yang dapat diandalkan ke input media native, tetapi bukan pengalaman media yang kustom yang berperilaku identik di setiap perangkat.

Guid ini ditulis untuk implementasi pertama, bukan demo. Fokus pada keputusan yang penting dalam produksi: pengaturan setup workflow yang dikelola versus setup native, pengelolaan izin yang tidak akan mengejutkan Anda nanti, parsing hasil yang aman, dan pola unggah yang praktis setelah pengguna memilih file. Jika Anda bekerja dalam setup native yang kustom, juga membantu untuk memahami bagaimana ini berbeda dari Alur Kerja Klien Pengembang Expo.

Isi Kandungan

• Panduan Mulai dengan Expo Image Picker
• Pemasangan dan Konfigurasi yang Paling Penting
  • Pengaturan workflow yang dikelola
  • Detail setup React Native yang tidak dikelola
• Mengakses Kamera dan Media Library
  • A komponen minimal tetapi aman
  • Alur perpustakaan dan kamera
  • Apa yang dapat diharapkan dari antarmuka sistem
• Menangani hasil pemilih dan pilihan
  • Membaca objek hasil dengan benar
  • Pilihan yang mengubah perilaku hilal
  • URI versus base64
  • Polanya hasil yang lebih aman untuk aplikasi nyata
• Polanya maju dan perbedaan platform
  • Polanya unggah yang praktis
  • Dimana perbedaan platform sebenarnya berlaku
  • Perbedaan alur kerja yang diatur dan tidak diatur
• Memecahkan Masalah Umum
  • Periksa Cepat untuk Gangguan Umum
  • Daftar Periksa Produksi Singkat

Mulai Menggunakan Expo Image Picker

Seorang manajer produk meminta foto profil. Sepekan kemudian, fitur yang sama juga membutuhkan unggahan bukti pembelian, pengambilan foto untuk laporan insiden, dan ulang coba ketika pengguna menolak izin pertama kali. Input gambar berkembang cepat karena menyentuh izin native, UI milik OS, pengelolaan file sementara, dan aliran unggah backend.

expo-image-picker adalah modul Expo SDK untuk itu. Ia membuka picker platform atau UI kamera dan mengembalikan media yang dipilih dalam bentuk yang dapat dihandle oleh React Native code. JavaScript API adalah kecil. Tantangan utama terletak pada pengaturan native, aliran izin, dan pengelolaan hasil yang benar pada proyek yang dielola dan proyek yang tidak dielola.

Perbandingan utama adalah sederhana. Anda membiarkan iOS dan Android menampilkan UI media sendiri daripada membangun picker kustom. Biasanya itu memberikan hasil yang lebih baik: pengguna sudah mengerti layar sistem, prompt izin berperilaku seperti yang diharapkan OS, dan tim Anda menghindari menjaga implementasi galeri dalam JavaScript.

Tangani ini sebagai fitur integrasi native dengan interface React.

Mindset itu membantu karena mode gagal jarang terjadi pada tombol yang memanggil picker. Biasanya mereka datang dari salah satu tiga tempat:

• Konfigurasi native: pengaturan plugin yang hilang, string izin yang salah, atau bangun yang ketinggalan setelah mengubah konfigurasi
• Perilaku waktu eksekusi: pengguna dapat menolak akses, memberikan akses library terbatas pada iOS, atau membatalkan aliran tanpa memilih apa-apa
• parsing hasil: API saat ini kembali dengan assets array, sehingga contoh yang lebih tua yang membaca result.uri langsung gagal

pilihan alur juga mengubah jalur pengaturan. Dalam aplikasi Expo yang diatur, sebagian besar pekerjaan native hidup di konfigurasi aplikasi dan memerlukan rebuild ketika konfigurasi itu berubah. Dalam aplikasi yang tidak diatur, Anda masih mendapatkan modul Expo API, tetapi Anda perlu memverifikasi pengaturan proyek iOS dan Android yang lebih langsung. Jika tim Anda menggunakan klien kustom daripada Expo Go, panduan ini cocok dengan Capgo’s penjelasan tentang bagaimana klien pengembangan Expo mengubah pengujian modul native.

Perbedaan ini penting karena jalur bahagia hanya setengah cerita. Implementasi picker yang solid adalah ketika itu berfungsi dalam kedua alur, mengatasi kekacauan izin platform tanpa mengejutkan pengguna, dan mengirimkan file yang dapat digunakan ke layer unggah Anda daripada berhenti di tampilan lokal.

Pemasangan dan Konfigurasi yang Paling Penting

Pemasangan membutuhkan satu perintah. Mengatur konfigurasi native yang tepat adalah yang menentukan apakah picker berfungsi pada perangkat nyata, dalam klien pengembangan kustom, dan dalam build produksi Anda.

expo-image-picker memberikan API React-facing yang menghadapkan platform picker untuk foto, video, dan pengambilan kamera. Panggilan JavaScript sederhana. Pengaturan tidak, karena akses foto dan akses kamera dikendalikan oleh iOS dan Android, bukan oleh React Native.

Mulai dengan installer versi-aware Expo:

npx expo install expo-image-picker

Gunakan expo install daripada npm install atau yarn add. Expo matches the package version to your SDK, which avoids a common class of native compatibility problems. If you are comparing how Expo modules fit into your release process, this Ringkasan Alat Expo Ringkasan alat Expo

Konfigurasi alur kerja yang diatur:

Dalam alur kerja yang diatur, deklarasikan plugin di konfigurasi aplikasi sehingga Expo dapat menerapkan perubahan native pada saat waktu build.

Contoh dengan app.json:

{
  "expo": {
    "plugins": ["expo-image-picker"]
  }
}

Itu adalah konfigurasi minimum. Dalam prakteknya, tim biasanya menambahkan teks izin juga, terutama di iOS di mana prompt sistem harus menjelaskan mengapa aplikasi membutuhkan akses. Tetapkan kata-kata spesifik untuk aksi pengguna. 'Upload foto profil' lebih baik daripada 'Membutuhkan akses media.'

Detil operasional satu menyebabkan banyak waktu yang terbuang. Mengubah pluginsizin string, atau konfigurasi native lainnya memerlukan pembangunan ulang. Mengisi ulang JavaScript tidak berlaku untuk perubahan-perubahan tersebut. Di Expo Go, Anda juga terbatas oleh apa yang sudah termasuk dalam klien. Dalam pembangunan pengembangan atau produksi, proyek native menunjukkan konfigurasi Anda hanya setelah pembangunan baru.

Detil pengaturan React Native yang sederhana

Dalam aplikasi yang sederhana, paket API sama, tetapi Anda perlu memverifikasi lebih banyak dari proyek native sendiri. Penggunaan iOS deskripsi adalah hal pertama untuk diperiksa. Jika alur Anda dapat membuka library, meluncurkan kamera, atau merekam video dengan suara, aplikasi Anda memerlukan string izin yang sesuai di Info.plist sebelum Anda membangun ulang.

Daftar checklist yang praktis untuk proyek sederhana seperti ini:

1. Instal expo-image-picker dengan npx expo install expo-image-picker.
2. Tambahkan konfigurasi plugin jika proyek Anda menggunakan Expo config plugins.
3. Konfirmasikan deskripsi penggunaan iOS sesuai dengan fitur yang Anda tampilkan.
4. Rebuild aplikasi iOS dan Android setelah perubahan konfigurasi native apa pun.

Tekst izin yang hilang sering terlihat seperti bug runtime karena UI code baik-baik saja dan handler tombol berjalan. Kegagalan terletak lebih rendah di stack. Saya biasanya memeriksa Info.plistSebelum saya sentuh komponen code, apakah aplikasi konfigurasi, dan apakah build saat ini sudah termasuk perubahan native terbaru.

Beberapa kebiasaan membuat setup lebih prediktif:

• Tulis teks izin untuk aksi yang sebenarnya: Pengguna harus memahami mengapa mereka melihat prompt.
• Konfigurasi kamera dan library terpisah: Satu dapat berjalan sementara yang lain masih gagal.
• Rebuild setelah perubahan native: Hot reload dan fast refresh tidak memperbarui izin native.
• Test di perangkat: Behavior simulator dapat menyembunyikan masalah izin dan kamera.

Jika picker bekerja selama pengembangan tetapi gagal di TestFlight atau build Play Store, anggap itu sebagai masalah konfigurasi terlebih dahulu. Banyak kasus, itu memang.

Akses Kamera dan Media Library

A pengguna mengetuk ‘Upload foto’, diharapkan kamera atau galeri akan terbuka, dan aplikasi Anda memiliki satu tugas di saat itu. Buka antarmuka sistem yang tepat, tangani penolakan atau pembatalan tanpa mengganggu layar, dan kembalikan referensi file lokal yang dapat digunakan untuk melihat atau mengunggah.

Terdengar sederhana sampai Anda menguji baik build yang diatur maupun build yang tidak diatur di iOS dan Android. JavaScript API tetap kompak, tetapi perilaku waktu eksekusi masih bergantung pada permintaan OS, perangkat keras, dan bagaimana izin native Anda telah dikonfigurasi sebelumnya.

Komponen yang minimal tetapi aman

Alur dasar konsisten di proyek workflow Expo yang diatur dan tidak diatur. Mintakan izin yang relevan, luncurkan pemilih, periksa apakah pengguna batal, kemudian baca asset pertama dari result.assets.

Komponen dasar tampak seperti ini:

import { useState } from 'react';
import { View, Button, Image, Alert } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

export default function PhotoInput() {
  const [imageUri, setImageUri] = useState<string | null>(null);

  const pickFromLibrary = async () => {
    const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();

    if (!permission.granted) {
      Alert.alert('Permission required', 'Please allow photo library access.');
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images'],
      allowsEditing: true,
      quality: 1,
    });

    if (result.canceled) return;

    const asset = result.assets?.[0];
    if (!asset?.uri) return;

    setImageUri(asset.uri);
  };

  const takePhoto = async () => {
    const permission = await ImagePicker.requestCameraPermissionsAsync();

    if (!permission.granted) {
      Alert.alert('Permission required', 'Please allow camera access.');
      return;
    }

    const result = await ImagePicker.launchCameraAsync({
      allowsEditing: true,
      quality: 1,
    });

    if (result.canceled) return;

    const asset = result.assets?.[0];
    if (!asset?.uri) return;

    setImageUri(asset.uri);
  };

  return (
    <View>
      <Button title="Choose from library" onPress={pickFromLibrary} />
      <Button title="Take photo" onPress={takePhoto} />
      {imageUri ? (
        <Image
          source={{ uri: imageUri }}
          style={{ width: 200, height: 200 }}
        />
      ) : null}
    </View>
  );
}

Tiga detail yang penting di sini.

• Mintakan izin galeri dan kamera secara terpisah. Mereka gagal secara independen.
• Tangani pembatalan sebagai aksi pengguna normal, bukan keadaan kesalahan.
• Baca dari assets[0]karena pemilih mengembalikan array asset daripada tingkat atas uri.

Alur galeri dan kamera

Mulai dengan alur perpustakaan jika Anda ingin memiliki jalur yang paling cepat untuk fitur yang berfungsi. Hal ini lebih mudah untuk diuji, bekerja di lebih banyak pengaturan simulator, dan menghindari kasus perangkat keras kamera. Tambahkan dukungan kamera setelah jalur penanganan hasil stabil.

Alur kamera memiliki lebih banyak cara untuk gagal dalam pengembangan. Support simulator iOS terbatas. Emulator Android mungkin tidak menampilkan perilaku kamera yang sesuai dengan perangkat nyata. Dalam proyek sederhana, celah-celah tersebut dapat membuat Anda melihat komponen code meskipun masalah sebenarnya adalah konfigurasi native atau lingkungan uji.

Tentukan pola UI yang bersih dengan meminta pengguna untuk sumber sebelum memanggil pemilih API.

const showPickerOptions = () => {
  Alert.alert('Upload image', 'Choose a source', [
    { text: 'Camera', onPress: takePhoto },
    { text: 'Photo Library', onPress: pickFromLibrary },
    { text: 'Cancel', style: 'cancel' },
  ]);
};

Penyederhanaan ini menjaga setiap fungsi fokus. Hal ini juga membuatnya lebih mudah untuk menambahkan analitis, flag fitur, atau aturan backend khusus kemudian. Misalnya, beberapa tim memungkinkan unggahan perpustakaan untuk foto profil tetapi memerlukan tangkapan kamera segar untuk verifikasi identitas.

Jika aplikasi Anda juga mendukung pola akses file di luar Expo atau Anda sedang membandingkan konvensi di antara stack native, hal ini Referensi perpustakaan foto Capacitor bisa memberikan konteks yang berguna.

Demo singkat membantu ketika Anda menunjukkan alur ini kepada rekan tim atau QA:

Apa yang dapat Anda harapkan dari UI sistem

expo-image-picker Membuka pemilih platform atau UI kamera. Aplikasi Anda tidak mengontrol setiap layar dalam alur tersebut. Perbedaan ini penting karena “berfungsi di perangkat saya” sering kali berarti “OS memungkinkan jalur yang saya uji.”

On iOS, pengguna dapat memberikan akses library terbatas daripada akses penuh. Pada Android, perilaku picker dapat bervariasi tergantung pada versi OS dan skin vendor. Dalam proyek workflow yang diatur, Expo mengelola lebih banyak wiring native untuk Anda. Dalam proyek workflow yang tidak diatur, Anda perlu memastikan bahwa aplikasi yang dibangun Anda termasuk perubahan izin native yang Anda buat. Situs panggilan JavaScript dapat sama persis dalam kedua kasus tersebut, sementara hasil runtime berbeda.

Saya biasanya menguji kasus-kasus ini sebelum memanggil fitur selesai:

• permintaan izin pertama
• izin ditolak
• pengguna membatalkan
• pilihan library sukses
• penangkapan kamera sukses pada perangkat fisik
• preview langsung dari URI lokal yang dikembalikan

Kasus-kasus tersebut dapat menerjemahkan langsung ke perilaku produksi yang nyata. Mereka juga menyiapkan langkah berikutnya dengan jelas jika Anda perlu mengirimkan file ke server, alur moderasi, atau endpoint publikasi seperti __CAPGO_KEEP_0__ Instagram media publishing API.

Mengatasi Hasil dan Opsi Pilih

The picker result is the part that usually needs real production logic. The system UI returns a structured object, not just a file path, and small mistakes here lead to broken previews, empty uploads, or crashes after a user cancels.

Membaca objek hasil dengan benar

Bentuk hasil yang berlaku saat ini di aplikasi Expo adalah result.assets[0].uri, bukan level atas result.uri. Detail ini mempengaruhi baik proyek kerja alih kelola maupun kerja alih dasar karena kode JavaScript API sama meskipun pengaturan native berbeda di bawahnya

Pakai pola guard-terlebih dahulu:

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ['images'],
  allowsEditing: true,
  quality: 1,
});

if (result.canceled) {
  return;
}

const asset = result.assets?.[0];
if (!asset) {
  return;
}

const { uri } = asset;
setImageUri(uri);

Pola ini menangani dua kasus gagal yang paling sering saya lihat. Pilih berhenti tidak memberikan aset untuk dibaca, dan code yang menganggap result.assets[0] selalu ada akan gagal saat runtime

Setelah Anda memiliki URI, menampilkan pratinjau cukup sederhana:

<Image source={{ uri: imageUri }} style={{ width: 240, height: 240 }} />

Jika Anda berencana untuk mengunggah nanti, simpan seluruh asset objek sekitar, bukan hanya URI. Dalam prakteknya fileName, mimeType, width, height, dan fileSize sering berguna untuk validasi, logging, atau membuat permintaan multipart yang lebih bersih

Opsi yang mengubah perilaku hilir

Beberapa opsi pilihannya mempengaruhi lebih dari layar pilihan. Mereka membentuk ukuran file, perilaku pengeditan, dan apa yang harus menerima backend Anda.

Beberapa kekurangan yang mudah terlewatkan:

• allowsEditing Terutama berguna ketika slot gambar memiliki bentuk atau ukuran tetap. Kurang berguna jika server Anda melakukan pipeline potong sendiri dan Anda ingin file asli.
• quality Pengaruhnya pada waktu unggahan, tekanan memori, dan penyimpanan server. quality: 1 Jangan secara otomatis memilih pilihan ini.
• mediaTypes Harus sesuai dengan aturan backend. Jika server menolak video, jangan biarkan pilihannya mengembalikan video.
• base64 Menggunakan lebih banyak ukuran payload di memori. Hindari kecuali layanan penerima memerlukan.

Poin terakhir itu penting pada perangkat dengan memori rendah. URI file lokal biasanya lebih baik untuk tampilan awal dan unggah berkas multipart. Base64 memiliki penggunaan yang valid, tetapi itu mahal dibandingkan dengan melewatkan referensi berkas.

URI versus base64

Untuk aplikasi kebanyakan, aturan sederhana adalah:

• Pakai URI untuk tampilan awal.
• Pakai URI untuk unggah berkas.
• Pakai base64 hanya ketika sistem penerima secara eksplisit meminta konten yang dikodekan.

Polanya ini menjaga pilih code kecil dan lebih mudah diuji. Ini juga berbaris dengan cara banyak aliran media backend dibangun, termasuk layanan yang akhirnya menerbitkan ke platform eksternal seperti Instagram media menerbitkan API.

Jika tim Anda mengirimkan pembaruan OTA yang sering atau memindahkan aset gambar melalui pengiriman aplikasi, keputusan ukuran file di sini akan berdampak pada pipa lainnya. Panduan ini tentang mengoptimalisasi gambar untuk pembaruan aplikasi adalah teman yang berguna untuk pengaturan pilih.

Polanya hasil yang lebih aman untuk aplikasi nyata

Untuk demo code, menyimpan hanya imageUri adalah cukup. Di produksi, simpan objek yang dinormalisasi sehingga langkah berikutnya, tampilan, validasi, unggah, atau ulangi, tidak perlu memulai ulang pola pilih mentah setiap kali.

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ['images'],
  allowsEditing: true,
  quality: 0.8,
});

if (result.canceled || !result.assets?.length) {
  return;
}

const asset = result.assets[0];

setSelectedImage({
  uri: asset.uri,
  fileName: asset.fileName ?? 'upload.jpg',
  mimeType: asset.mimeType ?? 'image/jpeg',
  width: asset.width,
  height: asset.height,
  fileSize: asset.fileSize ?? null,
});

Ini memberikan Anda satu bentuk yang dapat diprediksi di dalam aplikasi. Ini juga membuat proyek yang diatur dan proyek yang tidak diatur lebih mudah untuk tetap berada dalam garis karena aplikasi code tetap stabil sementara Anda bekerja melalui perbedaan native di tempat lain.

Periksa satu kali lagi. Jangan mengaktifkan bidang hasil tambahan hanya karena itu. Mintalah data yang Anda ketahui Anda butuhkan, dan jaga pilih tetap fokus pada seleksi daripada mengubahnya menjadi langkah pengolahan file umum.

Polanya Lanjutan dan Perbedaan Platform

Fitur pilih biasanya menjadi sederhana hingga saat gambar yang dipilih pertama harus bertahan melalui ulangi, header autentikasi, perbedaan izin native, dan endpoint unggah nyata. expo-image-picker mengatasi seleksi dengan baik. Fitur lainnya ada di aplikasi Anda.

Polanya pengunggahan yang praktis

Untuk API yang mengharapkan unggahan file, FormData masih merupakan default yang paling aman. Ini berfungsi di backend umum Rails, Node, Laravel, Django, dan Go, dan menjaga pilih gambar terpisah dari kekhawatiran transportasi.

async function uploadImage(imageUri: string) {
  const formData = new FormData();

  formData.append('file', {
    uri: imageUri,
    name: 'upload.jpg',
    type: 'image/jpeg',
  } as any);

  const response = await fetch('https://your-api.example.com/uploads', {
    method: 'POST',
    body: formData,
    headers: {
      Accept: 'application/json',
    },
  });

  if (!response.ok) {
    throw new Error('Upload failed');
  }

  return response.json();
}

Itu code sudah cukup untuk membuktikan jalur berfungsi, tetapi aplikasi produksi biasanya memerlukan lapisan tambahan. Derive name dan type dari asset yang dipilih ketika memungkinkan, tambahkan autentikasi di luar fungsi pilih gambar, dan jaga keadaan unggahan terpisah dari keadaan pilih gambar sehingga permintaan gagal tidak memaksa pengguna untuk membuka kembali perpustakaan.

Beberapa periksa mencegah kegagalan umum yang saya lihat di tinjauan:

• Pastikan lokal uri berada sebelum membangun permintaan
• Tampilkan pratinjau sebelum unggahan sehingga pengguna dapat menemukan file yang salah sebelumnya
• Preventkan tap berulang saat permintaan sedang dalam penerbangan
• Tangani gagal jaringan secara terpisah dari pembatalan picker atau kesalahan otorisasi
• Duga validasi backend menolak file besar, jenis MIME yang tidak didukung, atau otorisasi yang hilang

Jika backend Anda memerlukan base64 daripada multipart, itu biasanya konstrain server, bukan kebutuhan picker. Multipart lebih murah dalam memori dan lebih mudah dipahami pada perangkat mobile

Dimana perbedaan platform sebenarnya berpengaruh

UI picker adalah native, jadi mengikuti perilaku native. Ini mempengaruhi baik apa yang dilihat pengguna dan apa yang code harus asumsikan

Pada iOS, aliran penyuntingan dan prompt otorisasi mengikuti konvensi Apple. Akses Photos yang terbatas dapat mengembalikan set aset yang lebih sempit daripada akun pengujian Anda melihat pada perangkat yang sepenuhnya diberikan. Pada Android, perilaku picker bervariasi lebih banyak oleh versi OS dan kulit pabrikan, terutama seputar album, nama file, dan bagaimana tangkapan kamera dikembalikan. Aplikasi React Native yang tidak dielenggarkan merasakan perbedaan ini lebih langsung karena Anda memiliki lebih banyak pengaturan native, tetapi aplikasi Expo yang dielenggarkan masih perlu code yang menganggap picker sebagai platform-bentuk daripada uniform sempurna

Aturan praktisnya sederhana. Tergantung pada bidang yang dapat diverifikasi, bukan pada UI yang identik atau metadata identik di antara perangkat

Beberapa contoh yang penting dalam aplikasi nyata:

• Penyuntingan dan pengguntingan: UI dan perilaku pengguntingan tidak identik antara iOS dan Android
• Metadata yang dikembalikan: fileName, mimeTypedan fileSize mungkin tidak ada atau tidak konsisten, jadi tambahkan fallbacks
• Otorisasi: akses foto iOS dapat dibatasi hanya pada item tertentu, sementara perilaku Android lebih bergantung pada versi OS dan dukungan pemilih sistem
• Keluaran kamera: Gambar yang diambil mungkin kembali dengan nama, orientasi, atau karakteristik kompresi yang berbeda dari aset perpustakaan

Jika tim Anda juga bekerja di luar Expo, ini Pedoman pengembangan aplikasi DesignStack memberikan konteks Android yang berguna untuk keputusan pengelolaan media yang muncul di luar satu perpustakaan.

Perbedaan antara aliran manajemen dan aliran dasar

Pada titik ini, pilihan pengaturan mulai berpengaruh secara operasional.

Dalam aliran kerja yang diatur, string otorisasi dan konfigurasi plugin biasanya hidup di konfigurasi aplikasi, dan perubahan native diterapkan ketika Anda membuat build baru. Hal ini menjaga permukaan JavaScript tetap bersih, tetapi juga berarti perbaikan konfigurasi tidak terlihat sampai build native berikutnya. Perbarui OTA tidak memperbaiki otorisasi native yang hilang.

Di alur kerja yang sederhana, fitur yang sama memiliki bagian yang lebih banyak bergerak. Anda perlu memverifikasi penggunaan deskripsi iOS native, perilaku manifest Android, instalasi paket, dan waktu pembangunan ulang sendiri. Keuntungan adalah kontrol. Biaya adalah bahwa masalah picker mungkin disebabkan oleh konfigurasi native, bukan oleh situs panggilan JavaScript.

Tim yang berganti antara Expo dan Capacitor sering kali mengabaikan betapa berbedanya lapisan abstraksi ini. Capgo memiliki penjelasan yang berguna tentang bagaimana Capacitor mengatasi perbedaan platformdan itu merupakan titik referensi yang baik jika Anda sedang memutuskan seberapa banyak pengaturan asli yang ingin tim Anda miliki.

My preference adalah konsisten di kedua alur kerja. Tahan picker code sempit, normalisasi hasil sekali, unggah melalui lapisan API yang khusus, dan tatal platform-specific behavior sebagai sesuatu yang perlu dikonfigurasi dan dites secara eksplisit daripada menghalusinya dengan asumsi.

Troubleshooting Masalah Umum

Masalah Expo Image Picker yang paling umum jatuh ke dalam kategori yang kecil. Solusi cepat biasanya adalah untuk mengidentifikasi lapisan mana yang gagal: konfigurasi, izin, penanganan hasil, atau rendering.

Cek Cepat untuk Gagal Umum

Jika picker tidak akan membuka atau izin gagal, cek konfigurasi native terlebih dahulu. Di aplikasi sederhana, deskripsi penggunaan iOS yang hilang adalah penyebab umum akar.

Aplikasi mengalami crash setelah pengguna menutup picker, periksa penanganan hasil Anda. Banyak implementasi masih mengasumsikan URI langsung dan melewatkan canceled pengecekan.

Beberapa konversi cepat membantu:

• Kesalahan izin tidak diberikan: Verifikasi konfigurasi aplikasi dan string izin native, kemudian bangun kembali.
• undefined URI gambar: Baca dari result.assets?.[0]?.uri, bukan result.uri.
• Tidak ada aksi setelah cancel: Mungkin itu benar. Tangani cancel sebagai keadaan tidak beroperasi.
• Gambar tidak menampilkan: Konfirmasi bahwa URI disimpan dalam keadaan dan dipasang ke <Image source={{ uri }} />.
• Kamera berperilaku aneh di simulator: Jalankan tes pada perangkat fisik sebelum mengejar bug library.

Daftar checklist produksi singkat

Pakai ini sebagai pemeriksaan terakhir sebelum mengirimkan:

• Pasang dengan Expo tooling: Pakai npx expo install expo-image-picker.
• Konfigurasi bagian native: Tambahkan plugin dan deskripsi izin yang diperlukan.
• Mulai permintaan izin secara sengaja: Jalankan aliran kamera dan media library secara terpisah.
• Jaga setiap hasil: Pantau result.canceled dan membaca dengan aman assets[0].
• Preferensi unggah berbasis URI: Tetapkan base64 untuk kasus-kasus khusus saja.
• Tes perangkat nyata: Terutama untuk pengambilan kamera dan prompt izin.

Jika tim Anda mengirimkan Capacitor atau aplikasi Electron bersamaan dengan proyek React Native, Capgo adalah salah satu pilihan untuk menyampaikan JavaScript, CSS, konfigurasi, dan update aset tanpa menunggu tinjauan toko untuk setiap perubahan. Ini relevan ketika perbaikan gambar hidup di layer web, seperti UI unggah, aturan validasi, salinan, atau pengelolaan aset di sekitar alur pilih gambar.