Pemilih Gambar Expo: Panduan Lengkap untuk 2026

Anda mungkin sudah 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 OS yang dikontrol, bentuk kembali yang berbeda dari banyak pengembang yang diharapkan, dan beberapa detail waktu pemasangan yang hanya muncul setelah Anda kirimkan build yang nyata.

Pemilih 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 bersifat khusus yang berperilaku identik di setiap perangkat.

Petunjuk ini ditulis untuk implementasi pertama, bukan demo. Fokusnya pada keputusan yang berpengaruh dalam 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 dalam setup native yang khusus, itu juga membantu untuk memahami bagaimana hal ini berbeda dari aliran pengembangan Expo..

Daftar Isi

• Pengenalan Expo Image Picker
• Pemasangan dan Konfigurasi Dasar
  • Pengaturan Aliran yang Dikelola
  • Pengaturan Detail Setup React Native yang Tidak Dikelola
• Mengakses 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 Downstream
  • URI versus base64
  • Polanya Hasil yang Lebih Aman untuk Aplikasi Nyata
• Polanya Lanjutan dan Perbedaan Platform
  • Polanya Unggah yang Praktis
  • Dimana Perbedaan Platform Sebenarnya Berlaku
  • Perbedaan Alur Kerja yang Dikelola dan Tidak Dikelola
• Memecahkan Masalah yang Umum
  • Pemeriksaan Cepat untuk Kegagalan yang 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 insiden, dan ulang coba ketika pengguna menolak izin pertama kali. Input gambar berkembang cepat karena menyentuh izin native, antarmuka 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 mengatur setup native, aliran izin, dan pengelolaan hasil yang tepat 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 galeri custom. Biasanya hasilnya 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. Biasanya 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 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 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 kustom bukan 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 kerja, 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 Utama

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 reaksi React-facing API atas pilih platform untuk foto, video, dan pengambilan gambar. Panggilan JavaScript sederhana. Namun, 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 Panduan pengaturan aliran yang dikelola Pada aliran yang dikelola, deklarasikan plugin di konfigurasi aplikasi agar Expo dapat menerapkan perubahan native pada saat waktu build.

Contoh dengan

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

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

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

string izin, atau konfigurasi native lainnya memerlukan rebuild. Mengeload JavaScript tidak menerapkan perubahan tersebut. Di Expo Go, Anda juga terbatas oleh apa yang sudah termasuk dalam klien. Pada build pengembangan atau build produksi, proyek native menunjukkan konfigurasi Anda hanya setelah build baru.

Panduan 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 untuk diperiksa. Jika aliran Anda dapat membuka library, meluncurkan kamera, atau merekam video dengan suara, aplikasi Anda membutuhkan string izin yang sesuai di

Panduan pengaturan Expo

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 cek praktis untuk proyek dasar 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.

Deskripsi izin yang hilang sering terlihat seperti kesalahan runtime karena UI code masih baik dan handler tombol berjalan. Namun, gagalnya terletak lebih rendah di stack. Saya biasanya memeriksa Info.plist, konfigurasi aplikasi, dan apakah build saat ini sudah mencakup perubahan native terbaru sebelum saya mengubah komponen code.

Beberapa kebiasaan membuat setup lebih prediktif:

• Tulis deskripsi 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 pemilih bekerja selama pengembangan tetapi gagal dalam TestFlight atau rilis 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 mengganggu 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 diatur di iOS dan Android. JavaScript API tetap kompak, tetapi perilaku runtime masih bergantung pada tampilan OS, perangkat keras, dan bagaimana Anda mengonfigurasi izin native sebelumnya.

Komponen minimal tetapi aman

Alur utama konsisten dalam proyek kerja sama Expo dan kerja sama tanpa Expo. Minta izin relevan, luncurkan pemilih, periksa apakah pengguna membatalkan, kemudian baca asset pertama dari result.assets.

Komponen 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 asset 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, berfungsi 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 dalam pengembangan. Support Simulator iOS terbatas. Emulator Android mungkin tidak menampilkan perilaku kamera yang sesuai dengan perangkat nyata. Dalam proyek tanpa Expo, celah-celah itu dapat mengirim Anda melihat 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' },
  ]);
};

Pemisahan itu menjaga setiap fungsi fokus. Ini juga membuatnya lebih mudah untuk menambahkan analitis, flag fitur, atau aturan khusus backend 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 Capacitor referensi perpustakaan foto 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 "sistem operasi 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 sistem operasi dan kulit 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 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 menerbitkan media Instagram ke API.

Pengaturan Pemilih dan Opsi

Hasil pemilih adalah bagian yang biasanya memerlukan logika produksi yang nyata. Antarmuka UI sistem mengembalikan objek yang terstruktur, bukan hanya jalur file, dan kesalahan kecil di sini menyebabkan pratinjau yang 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].uri, bukan top-level result.uri. Detail ini mempengaruhi baik proyek kerja alih-manajemen maupun proyek kerja tanpa alih-manajemen 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 mengatasi dua kasus gagal yang paling sering saya lihat. Pemilih yang dibatalkan tidak memberikan 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

Apa yang perlu diingat adalah beberapa kekurangan yang mudah terlewatkan:

• allowsEditing berguna ketika slot gambar memiliki bentuk atau ukuran tetap. Lebih kurang 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 pemilih mengembalikan mereka.
• base64 meningkatkan ukuran payload di memori. Hindari hal ini kecuali layanan penerima memerlukan hal ini.

Poin terakhir ini sangat 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:

• Pilih URI untuk tampilan awal.
• Menggunakan URI untuk unggahan 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 bagaimana banyak aliran media backend dibangun, termasuk layanan yang akhirnya mempublikasikan ke platform eksternal seperti media publikasi code Instagram. Instagram media publishing API.

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

Panduan ini tentang

Untuk demo code, menyimpan hanya imageUri itu sudah cukup. Di produksi, simpan objek yang telah dinormalisasi sehingga langkah berikutnya, tampilan pratinjau, validasi, unggah, atau ulangi, tidak perlu memulai lagi 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 sederhana lebih mudah untuk tetap seimbang karena aplikasi code tetap stabil saat Anda bekerja melalui perbedaan-perbedaan native lainnya.

Periksa satu kali lagi. Jangan mengaktifkan bidang hasil tambahan hanya untuk kasus-kasus tertentu. 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 melalui ulangi, header autentikasi, perbedaan izin native, dan endpoint unggah yang nyata. expo-image-picker menangani seleksi dengan baik. Bagian fitur lainnya ada di aplikasi Anda.

Polanya Unggah yang Praktis

Untuk API yang mengharapkan unggah 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 tersebut berfungsi, tetapi aplikasi produksi biasanya membutuhkan lapisan yang lebih lanjut. Derivasi name dan type mengambil aset yang dipilih ketika memungkinkan, menambahkan otorisasi 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:

• Konfirmasi lokal uri terdapat sebelum membangun permintaan
• Tampilkan pratinjau sebelum unggah sehingga pengguna dapat menemukan file yang salah sejak awal
• Mencegah sentuhan berulang saat permintaan sedang dalam penerbangan
• Handle kegagalan jaringan terpisah dari pembatalan pemilih atau kesalahan izin
• Duga validasi backend untuk 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 pemilih. Multipart lebih murah dalam memori dan lebih mudah dipahami pada perangkat mobile.

Dimana perbedaan platform sebenarnya berpengaruh

Pemilih UI adalah native, jadi mengwarisi perilaku native. Hal itu mempengaruhi baik apa yang dilihat pengguna maupun apa yang harus dianggap code

On iOS, pengeditan aliran dan permintaan 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 dikelola masih memerlukan code yang menganggap picker sebagai bentuk platform daripada sempurna seragam.

The aturan praktis sederhana. Tergantung pada bidang-bidang yang dapat diverifikasi, bukan pada UI yang identik atau metadata identik di antara perangkat.

Beberapa contoh yang penting dalam aplikasi nyata:

• Pengeditan dan pemotongan: UI dan perilaku pemotongan tidak identik antara iOS dan Android
• Metadata yang dikembalikan: fileName, mimeType, dan fileSize mungkin tidak ada 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: Tangkapan gambar mungkin kembali dengan nama yang berbeda, orientasi, atau karakteristik kompresi daripada aset library

Jika tim Anda juga bekerja di luar Expo, ini Guidelines 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 alur kerja yang 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. 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 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. Simpan picker code sempit, normalisasi hasilnya sekali, unggah melalui layer API yang dedikasi, dan anggap perilaku platform khusus sebagai sesuatu yang perlu dikonfigurasi dan dites secara eksplisit daripada dihaluskan dengan asumsi.

Pengaturan Masalah yang Sering Terjadi

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 adalah penyebab umum.

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

Beberapa pemetaan 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. Tanganlambatkan batal sebagai keadaan tidak beroperasi.
• Gambar tidak ditampilkan: Konfirmasi bahwa URI disimpan dalam keadaan dan dipasang ke <Image source={{ uri }} />.
• Kamera berperilaku aneh di simulator: Test di perangkat fisik sebelum Anda mengejar 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 simpan base64 untuk kasus-kasus khusus saja.
• Menguji perangkat nyata: Terutama untuk pengambilan gambar kamera dan prompt izin.

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