Pemilihan Gambar Expo: Panduan Komprehensif untuk 2026

Anda mungkin telah mencapai titik di mana antarmuka sudah siap, layar profil memiliki tombol “Unggah foto”, dan sekarang bagian yang mudah tiba-tiba tidak mudah. Aliran pemilihan gambar yang sebenarnya menyentuh izin native, antarmuka yang dikontrol OS, bentuk kembali yang berbeda dari banyak pengembang yang diharapkan, dan beberapa detail waktu pembangunan yang hanya muncul setelah Anda mengirimkan build yang sebenarnya.

Pemilihan Gambar Expo adalah tempatnya. 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 Paket Repositori ExpoDi praktek, itu berarti Anda mendapatkan jembatan yang dapat diandalkan ke dalam input media asli, tetapi tidak pengalaman media yang kustom yang berperilaku identik di setiap perangkat.

Petunjuk ini ditulis untuk implementasi pertama, bukan demo. Fokusnya pada keputusan yang berpengaruh di produksi: pengaturan setup aliran yang dikelola versus aliran yang tidak dikelola, pengelolaan izin yang tidak akan mengejutkan Anda nanti, parsing hasil yang aman, dan pola unggah yang praktis setelah pengguna memilih file. Jika Anda bekerja di setup native kustom, itu juga membantu memahami bagaimana ini berbeda dari aliran pengembangan Expo..

Daftar Isi

• Mulai Menggunakan Picker Gambar Expo
• Pemasangan dan Konfigurasi yang Paling Penting
  • Pengaturan Aliran yang Dikelola
  • Detail Pengaturan React Native yang Tidak Dikelola
• Akses Kamera dan Media Library
  • Komponen yang Minimal Tetapi Aman
  • Aliran dan Flows Perpustakaan
  • Apakah yang Harus Dikejar dari UI Sistem
• Menangani Hasil Pemilih dan Opsi
  • Membaca Objek Hasil dengan Benar
  • Opsi yang Mengubah perilaku Turunannya
  • URI versus base64
  • Polanya Hasil yang Lebih Aman untuk Aplikasi Nyata
• Polanya Lanjutan dan Perbedaan Platform
  • Polanya Unggah yang Praktis
  • Dimana Perbedaan Platform Sebenarnya Berpengaruh
  • Perbedaan Alur Kerja yang Dikelola dan Tidak Dikelola
• Mengatasi Masalah yang Umum
  • Pemeriksaan Cepat untuk Gagal Umum
  • Daftar Periksa Produksi Singkat

Mulai Membangun dengan Expo Pilih Gambar

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

expo-image-picker adalah modul Expo SDK untuk itu. Modul ini membuka pemilih platform atau antarmuka kamera dan mengembalikan media yang dipilih dalam bentuk yang dapat dihandle oleh React Native code. JavaScript API yang 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 antarmuka 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 antarmuka 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 yang terbatas pada iOS, atau membatalkan aliran tanpa memilih apa-apa
• Pengolahan hasil: modul API yang saat ini mengembalikan assets array, sehingga contoh-contoh yang lebih tua yang membaca result.uri mengalami gagal

Pilihan alur kerja juga mengubah jalur pengaturan. Dalam aplikasi Expo yang diatur, sebagian besar pekerjaan native hidup di konfigurasi aplikasi dan memerlukan pembangunan ulang 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 digunakan bersama 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 kerja, mengatasi kekacauan izin platform tanpa mengejutkan pengguna, dan mengirimkan file yang dapat digunakan ke layer unggah Anda daripada berhenti di tampilan preview lokal.

Pemasangan dan Konfigurasi yang Paling Penting

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

expo-image-picker memberikan reaksi React-facing API atas pilihan platform untuk foto, video, dan pengambilan kamera. Panggilan JavaScript sederhana. Namun, pengaturan tidaklah sederhana karena akses foto dan 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 bukan 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 alur kerja yang diatur Pada alur kerja yang diatur, deklarasikan plugin di konfigurasi aplikasi sehingga Expo dapat menerapkan perubahan native pada saat waktu pembangunan.

Contoh dengan

Konfigurasi ini sudah cukup minimal. Pada kenyataannya, tim biasanya menambahkan teks izin juga, terutama di iOS karena sistem harus menjelaskan mengapa aplikasi membutuhkan akses. Pastikan kata-kata tersebut spesifik untuk aksi pengguna. "Mengunggah foto profil" lebih baik daripada "Membutuhkan akses media."

Detail operasional yang satu ini menyebabkan banyak waktu yang terbuang. Mengubah app.json:

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

string izin, atau konfigurasi native lainnya memerlukan pembangunan ulang. Mengeload JavaScript tidak akan menerapkan perubahan tersebut. Di Expo Go, Anda juga terbatas oleh apa yang sudah termasuk dalam klien. Pada pembangunan pengembang atau pembangunan produksi, proyek native hanya menampilkan konfigurasi Anda setelah pembangunan baru.

Detail pengaturan React Native yang tidak berpakaian pluginsPada aplikasi yang tidak berpakaian, paket __CAPGO_KEEP_0__ sama, tetapi Anda perlu memverifikasi lebih banyak proyek native sendiri. Penggunaan deskripsi iOS adalah hal pertama yang perlu diperiksa. Jika alur Anda dapat membuka library, meluncurkan kamera, atau merekam video dengan suara, aplikasi Anda membutuhkan string izin yang sesuai di

Referensi yang berguna jika Anda sedang membandingkan bagaimana modul Expo berintegrasi dengan proses rilis Anda.

In a bare app, the package API is the same, but you need to verify more of the native project yourself. iOS usage descriptions are the first thing to check. If your flow can open the library, launch the camera, or record video with audio, your app needs the corresponding permission strings in Info.plist sebelum Anda membangun ulang.

Daftar checklist yang praktis untuk proyek tanpa bahan seperti ini:

1. Install 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 buka.
4. Rebuild aplikasi iOS dan Android setelah ada perubahan konfigurasi native.

Tekst izin seringkali terlihat seperti kesalahan runtime karena UI code masih baik dan handler tombol berjalan. Namun, gagalnya terletak di bawahnya. Saya biasanya memeriksa Info.plist, konfigurasi aplikasi, dan apakah build saat ini sudah termasuk perubahan native terbaru sebelum saya mengubah komponen code.

Beberapa kebiasaan membuat setup lebih prediktif:

• Tulis tekst izin untuk aksi yang sebenarnya: pengguna harus memahami mengapa mereka melihat prompt tersebut.
• Konfigurasi kamera dan library secara terpisah: Salah satu dapat berfungsi sementara yang lain masih gagal.
• Rebuild setelah perubahan native: Pembaruan panas dan refresh cepat tidak memperbarui izin native.
• Tes di perangkat: Perilaku simulator dapat menyembunyikan masalah izin dan kamera.

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

Akses Kamera dan Media Library

Seorang pengguna mengetuk ‘Upload foto,’ mengharapkan kamera atau library terbuka, dan aplikasi Anda memiliki satu tugas pada saat itu. Buka UI sistem yang tepat, tangani penolakan atau pembatalan tanpa menghancurkan layar, dan kembalikan referensi file lokal yang dapat digunakan untuk melihat atau mengunggah.

Terdengar sederhana sampai Anda tes baik build yang diatur maupun build yang tidak berdasarkan iOS dan Android. JavaScript API tetap kompak, tetapi perilaku runtime masih bergantung pada tanda OS, perangkat keras, dan bagaimana Anda mengonfigurasi izin native sebelumnya.

Komponen yang minimal tetapi aman

Alur inti konsisten di proyek kerja sama Expo dan kerja sama tanpa Expo. Minta izin yang relevan, luncurkan pemilih, periksa apakah pengguna membatalkan, kemudian baca aset pertama dari result.assets.

Akomodasi dasar terlihat 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 penting di sini.

• Minta izin library dan kamera secara terpisah. Mereka gagal secara independen.
• Tangani pembatalan sebagai aksi pengguna normal, bukan keadaan kesalahan.
• Baca dari assets[0], karena pemilih kembali array aset daripada top-level uri.

Alur library dan kamera

Mulai dengan alur library jika Anda ingin jalur tercepat ke fitur yang berfungsi. Lebih mudah untuk diuji, bekerja di lebih banyak pengaturan simulator, dan menghindari kasus perangkat keras kamera. Tambahkan dukungan kamera setelah jalur penanganan hasil stabil.

Jalur kamera memiliki cara untuk gagal lebih banyak di pengembangan. Support iOS Simulator terbatas. Emulator Android mungkin tidak menampilkan perilaku kamera yang sesuai dengan perangkat nyata. Di proyek tanpa kerja sama, celah-celah itu dapat mengirim Anda mencari komponen code meskipun masalah sebenarnya adalah konfigurasi native atau lingkungan uji.

Polanya UI yang bersih adalah 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 itu menjaga setiap fungsi fokus. Ini juga membuatnya lebih mudah untuk menambahkan analitik, 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 antara stack native, hal ini Referensi perpustakaan foto Capacitor adalah konteks yang berguna.

Aplikasi demo singkat membantu ketika Anda menunjukkan aliran ini kepada rekan tim atau QA:

Apa yang dapat Anda harapkan dari antarmuka sistem

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

Pada iOS, pengguna mungkin memberikan akses perpustakaan yang terbatas daripada akses penuh. Pada Android, perilaku pemilih 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 di kedua kasus tersebut sementara hasil waktu eksekusi berbeda.

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

• permintaan izin pertama
• izin ditolak
• pengguna membatalkan
• pemilihan perpustakaan sukses
• penangkapan kamera yang sukses pada perangkat fisik
• pratinjau langsung dari URI lokal yang dikembalikan

Mereka juga mengatur langkah berikutnya dengan jelas jika Anda perlu mengirimkan file ke server, pipeline moderasi, atau endpoint publikasi seperti Publikasi Media Instagram API.

Pengaturan Hasil dan Opsi Pilih

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

Membaca objek hasil dengan benar

Bentuk hasil yang berpengaruh pada aplikasi Expo saat ini adalah result.assets[0].uribukan top-level result.uriDetail ini mempengaruhi baik proyek kerja alih kelola maupun proyek kerja alih dasar karena 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 mengatasi dua kasus gagal yang paling sering saya lihat. Pilih yang dibatalkan tidak memberikan Anda aset untuk dibaca, dan code yang mengasumsikan result.assets[0] selalu ada akan gagal pada waktu eksekusi.

Setelah Anda memiliki URI, menampilkan pratinjau adalah hal yang sederhana:

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

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

Pilihan yang mengubah perilaku di bawahnya

Pilihan beberapa pilihan pemilih mempengaruhi lebih dari layar pilihan. Mereka membentuk ukuran file, perilaku editing, dan apa yang harus menerima backend Anda.

Beberapa kekurangan yang mudah terlewatkan:

• allowsEditing berguna ketika slot gambar memiliki bentuk atau ukuran tetap. Lebih tidak berguna jika server Anda melakukan pipeline potong sendiri dan Anda ingin file asli.
• quality mempengaruhi waktu unggah, 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 kembali video.
• base64 meningkatkan 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 multipart. Base64 memiliki penggunaan yang valid, tetapi lebih mahal dibandingkan dengan melewatkan referensi file.

URI versus base64

Untuk aplikasi kebanyakan, aturan sederhana adalah:

• Gunakan URI untuk tampilan awal.
• Menggunakan URI untuk mengunggah file.
• Menggunakan base64 hanya ketika sistem penerima secara eksplisit meminta konten yang dienkripsi.

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

mengoptimalkan gambar untuk pembaruan aplikasi adalah teman yang berguna untuk pengaturan pilih. Polanya lebih aman untuk aplikasi nyata

Menggunakan

Untuk demo code, hanya menyimpan imageUri itu sudah cukup. Di produksi, simpan objek yang telah dinormalisasi sehingga langkah berikutnya, tampilan pratinjau, validasi, unggah, atau ulangi, tidak perlu memulai ulang interpretasi respons picker 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 bentuk yang dapat diprediksi di dalam aplikasi. Ini juga membuat proyek yang diatur dan proyek yang tidak diatur lebih mudah untuk tetap seimbang karena aplikasi code tetap stabil saat Anda bekerja melalui perbedaan native di tempat lain.

Langkah terakhir membantu. Jangan mengaktifkan bidang hasil tambahan hanya dalam kasus. Mintakan data yang Anda ketahui Anda butuhkan, dan jaga picker tetap fokus pada seleksi daripada mengubahnya menjadi langkah pengolahan file umum.

Polanya Lanjutan dan Perbedaan Platform

Fitur picker biasanya tidak lagi sederhana ketika gambar yang dipilih pertama kali harus bertahan dari ulangi, header autentikasi, perbedaan izin native, dan endpoint unggah yang sebenarnya. expo-image-picker menangani seleksi dengan baik. Bagian lain dari fitur itu ada di aplikasi Anda.

Polanya Unggah yang Praktis

Untuk API yang mengharapkan unggahan file FormData masih merupakan default yang paling aman. Ini berfungsi di backend yang umum seperti Rails, Node, Laravel, Django, dan Go, dan menjaga picker tetap 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 membutuhkan lapisan tambahan. Derivasi name dan type mengambil autentikasi dari aset yang dipilih ketika memungkinkan, menambahkan autentikasi di luar fungsi pemilih, dan menjaga status unggah terpisah dari status pemilih sehingga permintaan gagal tidak memaksa pengguna untuk membuka kembali perpustakaan.

Beberapa periksaan mencegah kegagalan umum yang saya lihat dalam tinjauan:

• Pastikan lokal uri berdiri sebelum membangun permintaan
• Tampilkan pratinjau sebelum mengunggah sehingga pengguna dapat menemukan file yang salah sejak awal
• Mencegah sentuhan berulang saat permintaan dalam penerbangan
• Handle kegagalan jaringan terpisah dari pembatalan pemilih atau kesalahan izin
• Duga validasi backend untuk menolak file yang besar, jenis MIME yang tidak didukung, atau autentikasi yang hilang

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

Dimana perbedaan platform sebenarnya berpengaruh

Pemilih UI adalah native, sehingga mengikuti perilaku native. Hal itu mempengaruhi baik apa yang dilihat pengguna maupun apa yang harus dianggap oleh code.

On iOS, pengaturan aliran edit dan prompt izin mengikuti konvensi Apple. Akses Photos yang terbatas dapat mengembalikan set aset yang lebih terbatas daripada akun uji 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 sederhana merasakan perbedaan-perbedaan ini lebih langsung karena Anda memiliki lebih banyak pengaturan native, tetapi aplikasi Expo yang diatur masih membutuhkan code yang menganggap picker sebagai bentuk platform daripada sempurna uniform.

Aturan praktis yang sederhana. Tergantung pada bidang-bidang yang dapat Anda validasi, bukan pada UI yang identik atau metadata identik di antara perangkat.

Beberapa contoh yang penting dalam aplikasi nyata:

• Pengeditan dan pengguntingan: UI dan perilaku potong tidak identik antara iOS dan Android
• Metadata yang dikembalikan: fileName, mimeType, dan fileSize dapat hilang atau tidak konsisten, jadi tambahkan fallbacks
• Izin: Akses foto iOS dapat terbatas pada item yang dipilih, sementara perilaku Android lebih tergantung pada versi OS dan dukungan picker sistem
• Tangkapan kamera: Gambar yang ditangkap mungkin kembali dengan karakteristik nama, orientasi, atau kompresi yang berbeda daripada aset library

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

Diferensi antara alur kerja yang diatur dan tidak diatur

Pada titik ini, pilihan pengaturan mulai berpengaruh secara operasional.

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

Dalam alur kerja yang tidak diatur, fitur yang sama memiliki bagian yang lebih banyak. Anda perlu memverifikasi penggunaan deskripsi iOS native, perilaku manifest Android, instalasi paket, dan waktu rebuild sendiri. Kelebihannya adalah kontrol. Biaya yang dikeluarkan adalah bahwa masalah picker mungkin disebabkan oleh konfigurasi native, bukan oleh situs panggilan JavaScript.

Tim yang beralih antara Expo dan Capacitor sering kali menganggap bahwa lapisan abstraksi ini sangat berbeda. Capgo memiliki penjelasan yang berguna tentang bagaimana Capacitor mengatasi perbedaan platform, dan itu adalah titik perbandingan yang baik jika Anda sedang memutuskan berapa banyak pengaturan native yang ingin Anda miliki.

Preferensi saya konsisten di kedua alur kerja. Tahan picker code sempit, normalisasi hasilnya sekali, unggah melalui layer API yang khusus, dan tatal perilaku platform khusus sebagai sesuatu yang harus dikonfigurasi dan diuji secara eksplisit daripada dihaluskan dengan asumsi.

Troubleshooting Masalah Umum

Masalah Expo Image Picker paling banyak jatuh ke dalam kategori yang kecil. Solusi tercepat biasanya adalah mengidentifikasi lapisan mana yang gagal: konfigurasi, izin, pengelolaan hasil, atau rendering.

Cek cepat untuk gagal umum

Jika pemilih tidak akan membuka atau izin gagal, cek pengaturan native terlebih dahulu. Terutama di aplikasi bare, deskripsi penggunaan iOS yang hilang sering menjadi penyebab utama.

Jika aplikasi mengalami crash setelah pengguna menutup pemilih, periksa pengelolaan hasil Anda. Banyak implementasi masih mengasumsikan URI langsung dan melewatkan canceled pemeriksaan.

Beberapa peta cepat membantu:

• Error izin ditolak: Verifikasi konfigurasi aplikasi dan string izin native, kemudian bangun kembali.
• undefined URI gambar: Baca dari result.assets?.[0]?.uri, bukan result.uri.
• Tidak ada yang terjadi setelah batal: Mungkin itu benar. Gunakan batal sebagai keadaan tidak beroperasi.
• Gambar tidak muncul: Pastikan URI disimpan dalam keadaan dan dikirim ke <Image source={{ uri }} />.
• Kamera berperilaku aneh di simulator: Test di perangkat fisik sebelum Anda mencari bug perpustakaan.

Daftar checklist produksi singkat

Gunakan sebagai pemeriksaan terakhir sebelum mengirim:

• Pasang dengan Expo tooling: Gunakan npx expo install expo-image-picker.
• Konfigurasi bagian native: Tambahkan plugin dan deskripsi izin yang diperlukan.
• Meminta izin secara sengaja: Menggunakan aliran kamera dan media library yang terpisah.
• Mengawasi setiap hasil: Cek result.canceled dan membaca dengan aman assets[0].
• Menggunakan unggah berbasis URI: Hanya gunakan base64 untuk kasus-kasus khusus.
• Menguji perangkat nyata: Terutama untuk pengambilan gambar kamera dan notifikasi izin.

Jika tim Anda mengirimkan aplikasi Capacitor atau aplikasi Electron bersamaan dengan proyek React Native, Capgo context