Pemilihan Gambar Expo: Panduan Lengkap 2026

Kamu mungkin sudah mencapai titik di mana antarmuka sudah siap, layar profil memiliki tombol "Upload foto", dan sekarang bagian yang mudah tiba-tiba tidak mudah lagi. Aliran pilihan gambar yang sebenarnya menyentuh izin native, antarmuka yang dikontrol oleh OS, bentuk kembali yang berbeda dari banyak pengembang yang diharapkan, dan beberapa detail waktu pembangunan yang hanya muncul setelah kamu mengirimkan build yang nyata.

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

Petunjuk ini ditulis untuk implementasi pertama, bukan demo. Fokus pada keputusan yang berpengaruh di produksi: pengaturan alur kerja yang dikelola versus alur kerja yang tidak dikelola, pengelolaan izin yang tidak akan mengejutkan kamu nanti, parsing hasil yang aman, dan pola unggah yang praktis setelah pengguna memilih file. Jika kamu bekerja di pengaturan native yang kustom, juga membantu untuk memahami bagaimana ini berbeda dari alur kerja pengembang Expo Alur Kerja Klien Pengembang Expo.

Table of Contents

• Mulai Menggunakan Expo Picker Gambar
• Mulai Menggunakan Expo Image Picker
  • Pemasangan dan Konfigurasi yang Paling Penting
  • Pengaturan Alur Kerja yang Dikelola
• Mengakses Kamera dan Perpustakaan Media
  • A komponen minimal tetapi aman
  • Alur dan arus kamera
  • Apa yang dapat diharapkan dari antarmuka sistem
• Menangani hasil pemilih dan pilihan
  • Membaca objek hasil dengan benar
  • Pilihan yang mengubah perilaku hilir
  • URI versus base64
  • Gaya hasil yang lebih aman untuk aplikasi nyata
• Polanya lanjutan dan perbedaan platform
  • Gaya unggah yang lebih 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 Pemilih Gambar Expo

Seorang manajer produk meminta foto profil. Sepekan kemudian, fitur yang sama juga memerlukan unggahan bukti pembelian, pengambilan foto kamera 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 pemilih platform atau UI kamera dan mengembalikan media yang dipilih dalam bentuk yang dapat dihandle oleh React Native code. JavaScript API kecil. Tantangan utama terletak pada pengaturan native, aliran izin, dan pengelolaan hasil yang benar pada proyek yang dikelola dan proyek tanpa pengelola.

Perbandingan utama jelas. Anda membiarkan iOS dan Android menampilkan UI media sendiri daripada membangun pemilih kustom. Biasanya 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 ini membantu karena mode gagal jarang terjadi pada tombol yang memanggil pemilih. Mereka biasanya berasal 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 alur tanpa memilih apa-apa
• Pengolahan hasil: API saat ini kembali dengan assets array, jadi contoh-contoh yang lebih tua 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 tersebut 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 khusus bukan Expo Go, panduan ini cocok dengan Capgo’s penjelasan tentang bagaimana klien pengembangan Expo mengubah pengujian modul native.

Karena itu, perbedaan itu penting untuk sisa panduan ini. 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 preview 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 khusus, 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 aliran kerja yang diatur

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

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. 'Unjuk profil foto' lebih baik daripada 'Membutuhkan akses media.'

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

Detail pengaturan React Native yang sederhana

Dalam aplikasi yang sederhana, paket API sama, tetapi Anda perlu memverifikasi lebih banyak proyek native sendiri. Penggunaan iOS deskripsi adalah hal pertama untuk diperiksa. Jika aliran 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. Konfirmasi deskripsi penggunaan iOS sesuai dengan fitur yang Anda tunjukkan.
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 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 tersebut.
• Konfigurasi kamera dan library secara terpisah: Salah 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 berfungsi selama pengembangan tetapi gagal di TestFlight atau build Play Store, anggap itu sebagai masalah konfigurasi terlebih dahulu. Banyak kasusnya adalah demikian.

Akses Kamera dan Media Library

A pengguna mengetuk ‘Upload foto,’ dan 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, tapi perilaku waktu eksekusi masih bergantung pada permintaan OS, perangkat keras, dan bagaimana izin native Anda telah dikonfigurasi sebelumnya.

Komponen yang minimal tapi aman

Alur dasar konsisten di proyek workflow Expo yang diatur dan tidak diatur. Mintakan izin yang relevan, luncurkan pilih foto, periksa apakah pengguna membatalkan, lalu baca aset 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 library jika Anda ingin jalur tercepat untuk fitur yang berfungsi. Alur ini lebih mudah diuji, berfungsi 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 asli. Dalam proyek sederhana, celah-celah ini dapat membuat Anda melihat komponen code meskipun masalah sebenarnya adalah konfigurasi native atau lingkungan tes.

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. Ini juga membuatnya lebih mudah menambahkan analitis, flag fitur, atau aturan backend khusus kemudian. Misalnya, beberapa tim memungkinkan unggahan library untuk foto profil tetapi memerlukan tangkapan kamera segar untuk verifikasi identitas.

Jika aplikasi Anda juga mendukung pola akses file di luar Expo atau Anda membandingkan konvensi di atas stack native, ini Referensi Capacitor library foto 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 tes.”

On iOS, pengguna dapat memberikan akses library terbatas daripada akses penuh. Pada Android, perilaku picker dapat bervariasi tergantung pada versi OS dan kulit vendor. Dalam proyek workflow yang diatur, Expo menghandle 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 sementara hasil runtime berbeda.

I 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
• Penglihatan langsung dari URI lokal yang dikembalikan

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

Pengaturan Hasil dan Opsi Picker

Hasil picker adalah bagian yang biasanya memerlukan logika produksi nyata. Sistem UI kembali objek yang terstruktur, bukan hanya jalur file, dan kesalahan kecil di sini dapat menyebabkan pratinjau rusak, unggahan kosong, atau crash setelah pengguna membatalkan.

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 workflow yang diatur maupun yang tidak karena JavaScript API sama meskipun pengaturan native berbeda di bawahnya

Pakai pola guard pertama:

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);

Gagasan 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

Sekali Anda memiliki URI, menampilkan pratinjau menjadi lebih mudah.

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

Jika Anda berencana untuk mengunggahnya nanti, simpan seluruhnya asset di sekitar objek, bukan hanya URI. Dalam prakteknya, fileName, mimeType, width, height, and fileSize seringnya 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 backend Anda harus menerima.

Beberapa kekurangan yang mudah terlewat:

• allowsEditing bermanfaat ketika slot gambar memiliki bentuk atau ukuran yang tetap. Lebih kurang berguna jika server Anda melakukan pipeline potong sendiri dan Anda ingin file asli.
• quality mengganggu waktu unggahan, tekanan memori, dan penyimpanan server. quality: 1 tidak secara otomatis merupakan pilihan yang tepat.
• mediaTypes harus sesuai dengan aturan backend. Jika server menolak video, jangan biarkan pilihannya mengembalikan video.
• base64 meningkatkan ukuran payload di memori. Hindari hal ini kecuali layanan penerima memerlukannya.

Memang penting hal itu 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:

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

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

Jika tim Anda mengirimkan pembaruan OTA yang sering atau memindahkan aset gambar melalui pengiriman aplikasi, keputusan ukuran file di sini akan berdampak pada bagian lain pipa. Panduan ini tentang optimisasi 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 di garis karena aplikasi code tetap stabil saat Anda bekerja melalui perbedaan native di tempat lain.

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

Polanya yang lebih maju dan perbedaan platform

Fitur pilih biasanya berhenti menjadi sederhana ketika gambar yang dipilih pertama harus bertahan dari 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 Rails, Node, Laravel, Django, dan Go yang umum, dan menjaga pilihannya 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();
}

Jika code itu sudah cukup untuk membuktikan jalur bekerja, namun aplikasi produksi biasanya memerlukan lapisan tambahan. Derive name dan type context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `dan` (Dan).

Beberapa periksaan mencegah kegagalan umum yang saya lihat dalam tinjauan:

• Konfirmasikan lokasi uri ada sebelum membangun permintaan
• Tampilkan pratinjau sebelum mengunggah agar pengguna dapat mengetahui file yang salah sejak awal
• Preventkan tap berulang saat permintaan sedang dalam penerbangan
• Handle kegagalan jaringan secara terpisah dari pembatalan picker atau kesalahan otorisasi
• Diharapkan validasi backend menolak file besar, jenis MIME yang tidak didukung, atau otorisasi yang hilang

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

Dimana perbedaan platform sebenarnya berpengaruh

UI picker adalah native, sehingga mengikuti perilaku native. Hal itu mempengaruhi baik apa yang dilihat pengguna maupun 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 dielola merasakan perbedaan-perbedaan ini lebih langsung karena Anda memiliki lebih banyak pengaturan native, tetapi aplikasi Expo yang dielola masih perlu code yang menganggap picker sebagai bentuk platform daripada uniform yang sempurna

Aturan praktisnya sederhana. Tergantung pada bidang-bidang yang dapat diverifikasi, bukan pada UI yang identik atau metadata yang 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 fallback
• 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 asset library

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 library.

Managed vs. bare workflow differences

Pada titik ini, pilihan pengaturan mulai mempengaruhi 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. Anda perlu memverifikasi penggunaan deskripsi iOS asli, 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 adalah titik perbandingan yang baik jika Anda sedang memutuskan berapa banyak konfigurasi native yang ingin tim Anda miliki.

My preference adalah konsisten di kedua alur kerja. Tahan picker code sempit, normalisasi hasil sekali, unggah melalui layer API yang khusus, dan tatalah perilaku spesifik platform sebagai sesuatu yang perlu dikonfigurasi dan dites secara eksplisit daripada menyelipkan asumsi.

Penyebab Masalah Umum

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

Periksa Cepat untuk Kesalahan Umum

If the picker won’t open or permissions fail, check native setup first. In bare apps especially, missing iOS usage descriptions are a common root cause.

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: Periksa konfigurasi aplikasi dan string izin native, kemudian bangun ulang.
• undefined URI gambar: Baca dari result.assets?.[0]?.uri, bukan result.uri.
• Tidak ada yang terjadi setelah batal: Mungkin itu benar. Tangani batal 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:

Gunakan sebagai pemeriksaan akhir sebelum mengirimkan:

• Pasang dengan Expo tooling: Pakai npx expo install expo-image-picker.
• Konfigurasi bagian native: Tambahkan plugin dan deskripsi izin yang diperlukan.
• Minta izin secara sengaja: Pisahkan aliran kamera dan media library.
• Jaga setiap hasil: Pantau result.canceled dan membaca dengan aman assets[0].
• Preferensi unggah berbasis URI: Tetapkan base64 hanya untuk kasus-kasus khusus.
• Tes perangkat nyata: Terutama untuk pengambilan gambar 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 harus 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.