UI가 준비되었고 프로필 화면에 '사진 업로드' 버튼이 있는 상황에서, 이제 쉽게 보이던 부분이 suddenly 쉽지 않습니다. 실제 이미지 선택 흐름은 네이티브 권한, OS가 제어하는 인터페이스, 개발자들이 기대하는 것과 다른 반환 형태, 그리고 실제 빌드 후에 나타나는 빌드 타임 디테일을 다룹니다.
Expo 이미지 픽커가 그곳에 있습니다. Expo에서 공식 라이브러리로, 시스템 UI를 열어 장치 라이브러리에서 이미지를/비디오를 선택하거나 카메라로 사진을 찍을 수 있도록 해줍니다. Expo 패키지 레포지토리 에서 설명한 것과 같습니다. 실제로, 네이티브 미디어 입력에 대한 신뢰할 수 있는 브릿지를 제공하지만, 모든 장치에서 동일하게 동작하는 커스텀 미디어 경험은 제공하지 않습니다.이 가이드는 첫 번째 구현에 초점을 맞추고 있습니다. 데모가 아닌 실제 구현을 위한 것입니다. 프로덕션에서 중요하다고 여기는 결정에 초점을 맞추고 있습니다: 관리된 워크플로우 설정, 권한 처리, 안전한 결과 파싱, 사용자가 파일을 선택한 후 업로드하는 패턴입니다. 커스텀 네이티브 설정에서 작업하는 경우, Expo 개발 클라이언트 워크플로우와의 차이점을 이해하는 것도 도움이 됩니다.
마틴 도나디우
Expo Image Picker와 함께 시작하기
제품 매니저가 프로필 사진을 요청합니다. 1주일 후, 동일한 기능이 또한 수령 증명서 업로드, 사고 보고서에 대한 카메라 캡처, 사용자가 처음으로 권한을 거부할 때 다시 시도할 수 있도록 합니다. 이미지 입력은 빠르게 확장됩니다. 이는 네이티브 권한, OS 소유의 UI, 임시 파일 처리, 백엔드 업로드 흐름과 관련이 있습니다.
expo-image-picker Expo SDK 모듈은 그 일을 처리하는 Expo 모듈입니다. 플랫폼 픽커 또는 카메라 UI를 열고 선택한 미디어를 React Native code가 처리할 수 있는 형식으로 반환합니다. JavaScript API는 작습니다. 주된 난제는 관리형 및 bare 프로젝트에서 네이티브 설정, 권한 흐름, 결과 처리를 올바르게 하기 때문입니다.
주된 트레이드 오프는 간단합니다. iOS와 Android가 자신의 미디어 UI를 표시하도록 허용합니다. 일반적으로 더 좋은 결과를 제공합니다: 사용자는 시스템 화면을 이미 이해하고 있습니다. 권한 프롬프트는 OS가 기대하는 대로 동작하고, 팀은 JavaScript에서 갤러리 구현을 유지 관리하지 않습니다.
이 기능은 React 인터페이스를 사용하는 네이티브 통합 기능으로 처리하십시오.
이 마음가짐이 도움이 되는 이유는 버튼이 호출하는 픽커의 실패 모드가 거의 드물기 때문입니다. 일반적으로 실패 모드는 다음 세 가지 곳에서 발생합니다:
- 네이티브 구성: __CAPGO_KEEP_0__ 플러그인 설정이 누락되거나, 권한 문자열이 잘못 설정되거나, 구성이 변경된 후 빌드가 오래된 상태가 된 경우
- 런타임 동작: 사용자가 접근 거부, iOS에서 라이브러리 접근을 제한하거나, 선택을 하지 않고 흐름을 취소할 수 있기 때문에
- 결과 분석: API이 현재 반환하는 값은
assets배열이기 때문에, 이전 예제가 직접 읽을 수 있는 경우result.uri오래된 예제가 직접 읽을 수 있는 경우
워크플로 선택도 설정 경로를 변경합니다. 관리형 Expo 앱의 경우, 대부분의 네이티브 작업은 앱 구성에서 수행되며, 구성이 변경될 때 다시 빌드해야 합니다. bare 앱의 경우, 여전히 Expo 모듈 API을 사용할 수 있지만, iOS와 Android 프로젝트 설정을 직접 확인해야 합니다. 팀이 Expo Go 대신 사용하는 커스텀 클라이언트를 사용하는 경우, 이 안내서가 Capgo의 네이티브 모듈 테스트에 대한 설명과 잘 어울립니다. __CAPGO_KEEP_1__.
That split matters for the rest of the guide because the happy path is only half the story. A picker implementation is solid when it works in both workflows, handles platform-specific permission quirks without surprising the user, and passes a usable file to your upload layer instead of stopping at a local preview.
설치 및 필수 설정
설치는 한 명령어로 완료되지만, native 설정을 올바르게 구성하는 것이 실제 장치, 커스텀 개발 클라이언트, 그리고 프로덕션 빌드에서 픽커가 작동하는지 여부를 결정한다.
expo-image-picker Capacitor에서 React에 대응하는 API를 제공하여 사진, 비디오, 카메라 캡처를 위한 플랫폼 픽커를 관리한다. 자바스크립트 호출은 간단하지만, 설정은 복잡하다. 이는 iOS와 Android에서 사진 접근 및 카메라 접근을 제어하기 때문이다.
Expo의 버전에 의한 설치 도구를 시작한다.
npx expo install expo-image-pickerUse expo install 대신 npm install 또는 yarn add. Expo는 패키지 버전을 SDK와 일치시켜서 네이티브 호환성 문제를 피할 수 있다. 만약 Expo 모듈이 릴리즈 프로세스에 어떻게 포함되는지 비교하고 싶다면, 이 Expo 도구 개요 는 유용한 참고 자료이다.
관리 워크플로우 설정
관리 워크플로우에서 앱 구성에서 플러그인을 선언하여 Expo가 빌드 시간에 네이티브 변경을 적용할 수 있도록 합니다.
예시와 함께 app.json:
{
"expo": {
"plugins": ["expo-image-picker"]
}
}그것은 최소한의 설정입니다. 실제로는 iOS에서 시스템 프롬프트가 앱이 접근 권한이 필요한 이유를 설명해야 하므로, 팀은 일반적으로 권한 텍스트도 추가합니다. 사용자 액션에 대한 구체적인 단어를 사용하세요. "프로필 사진을 업로드하세요"가 "미디어 접근 권한이 필요합니다"보다 낫습니다.
일상 운영의 한 세부 사항이 많은 시간을浪費합니다. 권한 문자열이나 다른 네이티브 구성 변경은 다시 빌드할 때만 적용됩니다. JavaScript를 다시 로드하면 변경 사항이 적용되지 않습니다. Expo Go에서는 클라이언트가 이미 포함한 것에 의해 제한됩니다. 개발 빌드 또는 프로덕션 빌드에서 네이티브 프로젝트는 구성이 새로 빌드된 후에만 반영됩니다. pluginsbare React Native 설정 세부 사항
bare 앱에서 패키지 __CAPGO_KEEP_0__은 동일하지만 네이티브 프로젝트를 더 자체적으로 확인해야 합니다. iOS 사용 설명서는 첫 번째로 확인해야 하는 항목입니다. 라이브러리를 열 수 있는 흐름, 카메라를 열 수 있는 흐름, 오디오와 함께 비디오 녹음을 할 수 있는 흐름이 있는 경우, 해당 권한 문자열을
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 실제 프로젝트에 대한 실용적인 체크리스트는 다음과 같습니다.
설치
- Install
expo-image-picker__CAPGO_KEEP_0__npx expo install expo-image-picker. - 프로젝트가 Expo config 플러그인 사용 시 플러그인 구성 추가.
- iOS 사용 설명이 노출하는 기능과 일치하는지 확인합니다.
- iOS 및 Android 앱을 재구성하십시오. native config 변경 후에.
권한이 없는 텍스트는 종종 런타임 오류처럼 보인다. UI code은 정상이고 버튼 핸들러가 실행되지만 실패는 스택의 아래에 있습니다. 일반적으로 나는 Info.plist, 앱 구성과 현재 빌드가 최신 native 변경 사항을 포함하는지 확인하기 전에 컴포넌트 code을 조작하지 않습니다.
설정 프로세스를 예측할 수 있는 몇 가지 습관이 있습니다.
- 권한 텍스트를 실제 액션에 맞춰 작성하십시오. 사용자는 왜 프롬프트를 보는지 이해해야 합니다.
- 카메라와 라이브러리를 별도로 구성하십시오. 한쪽이 작동하는 동안 다른 쪽이 실패할 수 있습니다.
- native 변경 후에 재구성하십시오. hot reload 및 fast refresh는 native 권한을 업데이트하지 않습니다.
- 장치에서 테스트: 시뮬레이터 동작은 권한 및 카메라 문제를 숨길 수 있습니다.
개발 중에 픽커가 작동하는 경우 테스트 플라이트 또는 플레이 스토어 빌드에서 깨지면 먼저 구성 문제로 간주하십시오. 대부분의 경우, 그것은 그렇습니다.
카메라 및 미디어 라이브러리에 접근하기
사용자가 “사진 업로드”를 탭하면 카메라 또는 라이브러리가 열리고, 그 순간 앱의 일은 하나입니다. 올바른 시스템 UI를 열고, 거부 또는 취소 시 화면을 깨지지 않도록 처리하고, 미리보기를 위해 업로드를 위해 사용할 수 있는 로컬 파일 참조를 반환하십시오.
iOS 및 Android에서 관리형 및 bare 빌드 모두를 테스트할 때, JavaScript API은 compact하지만 런타임 동작은 여전히 OS提示, 장치 하드웨어 및 이전에 구성된 네이티브 권한에 따라 달라집니다.
안전한 구성 요소의 최소 버전
엑스포 관리형 및 bare 워크플로 프로젝트 모두에서 코어 흐름은 일관적입니다. 관련된 권한을 요청하고 픽커를 시작하고, 사용자가 취소했는지 확인하고, 첫 번째 자산을 읽습니다. result.assets.
기본 구성 요소는 다음과 같습니다.
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>
);
}세 가지 세부 사항이 중요합니다.
- 라이브러리 및 카메라 권한을 별도로 요청하십시오. 독립적으로 실패합니다.
- Treat cancellation as a normal user action, not an error state.
- 에서 읽기
assets[0], because the picker returns an asset array rather than a top-leveluri.
사진 앨범 및 카메라 흐름
사진 앨범 흐름으로 시작하면 가장 빠른 기능을 구현하는 경로를 선택할 수 있습니다. 테스트가 더 쉬우며, 시뮬레이터 설정에서 더 많이 작동하며, 카메라 하드웨어의 경계 사례를 피할 수 있습니다. 카메라 지원을 추가하기 전에 결과 처리 경로가 안정되면 카메라 지원을 추가하세요.
개발 단계에서 카메라 경로가 더 많은 방법으로 실패할 수 있습니다. iOS 시뮬레이터 지원이 제한적이며, Android 에뮬레이터는 실제 장치와 일치하지 않는 카메라 동작을 노출하지 않을 수 있습니다. bare 프로젝트에서는 실제 문제는 네이티브 구성 또는 테스트 환경일 수 있지만 컴포넌트 code를 확인하게 됩니다.
사용자에게 원본을 요청하는 정결한 UI 패턴은 픽커 API를 호출하기 전에 사용자에게 원본을 요청하는 것입니다.
const showPickerOptions = () => {
Alert.alert('Upload image', 'Choose a source', [
{ text: 'Camera', onPress: takePhoto },
{ text: 'Photo Library', onPress: pickFromLibrary },
{ text: 'Cancel', style: 'cancel' },
]);
};이 분리로 각 함수가 집중되며, 분석, 기능 플래그, 또는 백엔드 특정 규칙을 추가하는 것이 더 쉬워집니다. 예를 들어, 프로필 사진 업로드를 허용하는 팀이 있지만 신원 확인을 위해 최신 카메라 캡처를 요구하는 경우가 있습니다.
Expo 외의 broader 앱이 파일 접근 패턴을 지원하거나, native 스택의 전반적인 규칙을 비교하는 경우, Capacitor 사진 앨범 참조 이것은 유용한 맥락입니다.
짧은 데모는 팀원이나 QA에게 이 흐름을 보여줄 때 도움이 됩니다.
What to expect from the system UI
expo-image-picker 플랫폼 선택기 또는 카메라 UI를 열립니다. 앱은 그 흐름 내의 모든 화면을 제어하지 않습니다. 그 차이점은 중요합니다. "내 장치에서 작동한다"는 말은 "테스트한 경로에 OS가 허용했다"는 말과 같습니다.
iOS에서 사용자는 제한된 라이브러리 접근 권한을 부여할 수 있고, Android에서는 OS 버전과 벤더 스킨에 따라 픽커 동작이 달라질 수 있습니다. 관리된 워크플로 프로젝트에서는 Expo가 더 많은 네이티브 와이어링을 처리합니다. 바레 워크플로 프로젝트에서는 네이티브 권한 변경이 포함된 빌드된 앱이 포함되었는지 확인해야 합니다. JavaScript 호출 사이트는 두 경우 모두 동일할 수 있지만 런타임 결과는 달라질 수 있습니다.
일반적으로 이러한 경우를 테스트하기 전에 기능이 완료된 것으로 간주합니다:
- 첫 번째 권한 요청
- 거부된 권한
- 사용자 취소
- 라이브러리 선택 성공
- 물리 장치에서 카메라 캡처 성공
- 반환된 로컬 URI의 즉각적인 미리보기
이러한 경우는 실제 생산 동작과 일대일로 매핑됩니다. 또한 서버에 파일을 전송하거나 중재 파이프라인 또는 "__CAPGO_KEEP_0__"와 같은 Instagram 미디어 공유에 파일을 전송할 때 다음 단계를 깨끗하게 설정합니다. Instagram media publishing API.
Handling Picker Results and Options
picker 결과를 처리하고 옵션을 읽는 방법
picker 결과는 실제 프로덕션 로직이 필요한 부분입니다. 시스템 UI는 구조화된 객체를 반환하고, 작은 실수는 일반적으로 깨진 미리보기, 비어있는 업로드 또는 사용자가 취소한 후 충돌로 이어집니다.
picker 결과 객체를 올바르게 읽는 방법 result.assets[0].uri현재 Expo 앱에서 중요하는 결과 형태는 result.uri. That detail affects both managed and bare workflow projects because the JavaScript API is the same even though native setup differs underneath.
가 아닌 것입니다. 이 세부 사항은 관리형 및 바레 워크플로 프로젝트 모두에 영향을 미치며, JavaScript __CAPGO_KEEP_0__은 native 설정이 다르더라도 동일합니다.
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);This handles the two failure cases I see most often. A canceled picker does not give you an asset to read, and code that assumes result.assets[0] 이 패턴은 두 가지 가장 흔한 실패 사례를 처리합니다. 취소된 picker는 asset를 읽을 수 없으며 __CAPGO_KEEP_0__가 항상 존재하는 것으로 가정하면 런타임에 실패합니다.
URI를 얻은 후 미리보기 렌더링은 직관적입니다.
<Image source={{ uri: imageUri }} style={{ width: 240, height: 240 }} />미리보기 렌더링을 계획한다면, URI만 유지하는 대신 전체 asset 객체를 유지하십시오. 실제로, fileName, mimeType, width, height및 fileSize 는 유효성 검사, 로깅, 또는 더 깨끗한 멀티파트 요청을 빌드하는 데 유용합니다.
아래스트림 동작을 변경하는 옵션
선택 화면 이외에도 몇 가지 픽커 옵션은 파일 크기, 편집 동작 및 백엔드가 수락해야 하는 내용을 결정합니다.
| 옵션 | 타입 | 무엇을 변경하는가 | 일반적인 사용 |
|---|---|---|---|
mediaTypes |
배열 | 사용자가 선택할 수 있는 것을 제한합니다. | API가 이미지를만 받는 경우에만 이미지 선택을 제한합니다. |
allowsEditing |
부울 | OS에서 지원하는 경우 UI를 편집하거나 편집할 수 있도록 해줍니다. | Avatar, 정사각형 커버, 영수증 캡처 |
quality |
number | 지원하는 이미지를 압축합니다. | 모바일 네트워크에서 업로드 크기를 줄입니다. |
base64 |
boolean | 결과에 인코딩된 이미지 데이터를 추가합니다. | 직접 인라인 이미지 데이터를 요구하는 통합만 해당합니다. |
몇 가지 트레이드 오프는 쉽게 놓치게 됩니다.
allowsEditing이미지 슬롯이 고정된 모양 또는 크기를 가지고 있는 경우 유용합니다. 서버가 자신의 크롭 PIPELINE을 가지고 있고 원본 파일을 원하는 경우에는 덜 유용합니다.quality업로드 시간, 메모리 압박, 서버 저장소에 영향을 미칩니다.quality: 1자동으로 올바른 선택이 아닙니다.mediaTypes__CAPGO_KEEP_0__은 서버가 비디오를 거부하면 픽커가 반환하지 않도록 해야 합니다.base64__CAPGO_KEEP_0__은 메모리에서 수신 서비스가 요구하지 않는 한 피해야 합니다.
__CAPGO_KEEP_0__은 메모리가 낮은 장치에서 중요합니다. 미리보기 및 멀티파트 업로드를위한 로컬 파일 URI는 보통 더 좋은 전달 방법입니다. Base64은 유효한 사용이 있지만 파일 참조를 전달하는 것과 비교하여 비용이 많이 들습니다.
__CAPGO_KEEP_0__ versus base64
대부분의 앱의 규칙은 간단합니다.
- __CAPGO_KEEP_0__ URI 미리보기에 사용하세요.
- __CAPGO_KEEP_0__ URI 파일 업로드에 사용하세요.
- __CAPGO_KEEP_0__ base64 받는 시스템이 인코딩된 콘텐츠를 명시적으로 요청할 때만 인코딩된 콘텐츠를 전송합니다.
picker code의 크기를 작게 유지하고 테스트가 더 쉬워지도록 하며, 백엔드 미디어 흐름의 많은 서비스, 특히 외부 플랫폼으로 콘텐츠를 게시하는 서비스와 일치합니다. Instagram 미디어 게시 API.
앱 업데이트 시 이미지 크기 결정이 PIPELINE의 나머지 부분으로 영향을 미치므로, 팀이 자주 OTA 업데이트를 배포하거나 이미지-heavy 자산을 앱 배포를 통해 전달할 경우, 이 가이드는 앱 업데이트 시 이미지 최적화 picker 구성과 함께 유용한 동반자입니다.
실제 앱에서 더 안전한 결과 패턴
데모 code의 경우, 저장할 필요가 없지만, 프로덕션 환경에서는 normalized 객체를 저장하여, 다음 단계인 미리보기, 검증, 업로드, 또는 다시 시도할 때, raw picker 응답을 재해석할 필요가 없도록 합니다. imageUri 이러한 패턴은 앱 내부에서 일관된 형태를 제공하며, 관리형 및 bare 프로젝트를 유지하기가 더 쉬워집니다. 또한, 앱 __CAPGO_KEEP_0__의 안정성이 유지되며, 네이티브 차이점을 해결하는 동안 앱의 안정성을 유지할 수 있습니다.
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,
});This gives you one predictable shape inside the app. It also makes managed and bare projects easier to keep aligned because the app code stays stable while you work through native differences elsewhere.
One final check helps. Do not enable extra result fields just in case. Request the data you know you need, and keep the picker focused on selection rather than turning it into a general file-processing step.
고급 패턴과 플랫폼 차이
픽커 기능이 일반적으로 선택된 이미지가 재시도, 인증 헤더, 네이티브 권한 차이, 실제 업로드 엔드포인트와 같은 요소로 간단해지지 않는 순간에 복잡해집니다. expo-image-picker 선택을 잘 처리합니다. 기능의 나머지 부분은 앱에 달려 있습니다.
실용적인 업로드 패턴
파일 업로드를 기대하는 API에 대해 FormData __CAPGO_KEEP_0__이 업로드 경로가 작동하는지 증명하는 충분한 증거입니다. 그러나 프로덕션 앱은 일반적으로 추가层가 필요합니다. 선택된 자산에서 가능한 경우, 인증을 픽커 함수 외부에 첨부하고 업로드 상태를 픽커 상태와 분리하여 실패한 요청이 사용자가 라이브러리를 다시 열도록 강요하지 않도록 하세요.
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();
}That code is enough to prove the path works, but production apps usually need one more layer. Derive name Confirm the local type __CAPGO_KEEP_0__
__CAPGO_KEEP_0__
- __CAPGO_KEEP_0__
uri요청을 만들기 전에 존재하는지 확인합니다. - 업로드하기 전에 미리보기 렌더링하여 사용자가 잘못된 파일을 빠르게 발견할 수 있도록 합니다.
- 요청이 진행 중일 때 반복적인 탭을 방지합니다.
- 네트워크 오류, 픽커 취소 또는 권한 오류와 분리하여 처리합니다.
- 서버가 큰 파일, 지원되지 않는 MIME 타입, 또는 인증 정보가 누락된 경우를 거부하는 백엔드 검증을 기대합니다.
서버가 base64 대신 multipart를 요구하는 경우, 일반적으로 서버 제약이 아니라 픽커 요구사항이 아닙니다. multipart는 메모리 사용이 저렴하고 모바일에서 더 쉽게 이해할 수 있습니다.
플랫폼 차이점이 실제로 중요할 때
픽커 UI는 네이티브이므로 네이티브 동작을继承합니다. 그로 인해 사용자에게 보이는 것과 code가 가정해야 하는 것 모두가 영향을 받습니다.
iOS에서 편집 흐름과 권한 프롬프트는 Apple의 규약을 따릅니다. Photos에 대한 제한된 접근 권한은 테스트 계정에서 완전히 허용된 기기에서 보았던 자산의 좁은 세트만 반환할 수 있습니다. Android에서는 OS 버전과 제조업체의 스킨에 따라 픽커 동작이 더 다양합니다. 특히 앨범, 파일 이름, 카메라 캡처가 반환되는 방식에 대한 것입니다. Bare React Native 앱은 이러한 차이를 더 직접적으로 느끼지만 관리형 Expo 앱도 픽커를 플랫폼에 맞게 다루는 code가 필요합니다.
실제 앱에서 몇 가지 예시가 중요합니다.
편집 및 크롭:
- Editing and cropping: iOS와 Android 사이의 UI 및 작물 동작은 동일하지 않습니다.
- Returned metadata:
fileName,mimeType, andfileSize와 - 없거나 불일치할 수 있으므로 대체 항목을 추가하세요. Permissions:
- iOS의 사진 접근 권한은 선택한 항목에만 제한될 수 있지만 Android의 동작은 OS 버전과 시스템 픽커 지원에 더 의존합니다. Camera output:
캡처된 이미지는 라이브러리 자산과 다른 이름, 방향, 압축 특성과 함께 돌아올 수 있습니다. 팀이 Expo 외부에서도 일한다면 이 DesignStack 앱 개발 가이드
Android 미디어 처리 결정을 보여주는 단일 라이브러리 외부에서 나타나는 유용한 Android 컨텍스트를 제공합니다.
이 시점에서 설정 옵션은 실제로 작동에 영향을 미치기 시작합니다.
관리 워크플로우에서, 권한 문자열과 플러그인 구성은 일반적으로 앱 구성에서 저장되어 있으며, 새로운 빌드를 생성할 때 네이티브 변경이 적용됩니다. 이로 인해 자바스크립트 표면 영역이 깨끗해지지만, 구성 수정은 다음 네이티브 빌드까지 보이지 않습니다. OTA 업데이트는 누락된 네이티브 권한을 패치하지 않습니다.
bare 워크플로우에서 동일한 기능은 더 많은 구성 요소를 갖습니다. iOS 사용 설명서, Android 매니페스트 동작, 패키지 설치, 빌드 타이밍을 확인해야 합니다. 이로 인해 제어권이 있습니다. 그러나 픽커 문제는 네이티브 구성으로 인해 발생할 수 있습니다. 이는 자바스크립트 호출 사이트가 아닌 네이티브 구성 때문입니다.
Teams that switch between Expo and Capacitor often underestimate how different these abstraction layers are. Capgo has a useful explanation of 내 선호도는 두 워크플로우 모두에서 일관적입니다. 픽커를 Capacitor narrow하고, 결과를 한 번만 정규화하고, __CAPGO_KEEP_1__ layer를 통해 업로드하고, 플랫폼별 동작을 가정하지 않고 명시적으로 구성하고 테스트하십시오.일반적인 문제 해결
My preference is consistent across both workflows. Keep picker code narrow, normalize the result once, upload through a dedicated API layer, and treat platform-specific behavior as something to configure and test explicitly rather than smooth over with assumptions.
Troubleshooting Common Issues
Most Expo Image Picker bugs fall into a small set of categories. The fastest fix is usually to identify which layer is failing: config, permission, result handling, or rendering.
빠른 실패 검사
픽커가 열리지 않거나 권한이 실패하면 먼저 네이티브 설정을 확인하십시오. 특히 바레 앱에서 iOS 사용 설명서가 누락된 경우가 흔합니다.
사용자가 픽커를 닫은 후 앱이 충돌하는 경우, 결과 처리를 확인하십시오. 많은 구현은 여전히 직접 URI를 가정하고 skip check를 수행합니다. canceled 몇 가지 빠른 매핑을 확인하십시오:
권한이 거부된 오류:
- 앱 구성과 네이티브 권한 문자열을 확인한 후 다시 빌드하십시오. 이미지 URI:
undefined읽기 ,result.assets?.[0]?.uri취소 후 아무것도 일어나지 않습니다:result.uri.- Nothing happens after cancel: 그것이 정확할 수 있습니다. 취소 처리를 무작위 상태로 처리합니다.
- 이미지 렌더링되지 않음: URI가 상태에 저장되었는지 확인하고 전달되었는지 확인합니다.
<Image source={{ uri }} />. - 카메라가 시뮬레이터에서 이상하게 작동합니다. 물리적 장치에서 테스트하기 전에 라이브러리 버그를 추적하기 전에 테스트하세요.
출시 준비를 위한 짧은 체크리스트
배송 전에 마지막으로 사용하세요.
- Expo 도구를 사용하여 설치하세요. 이것을 사용하세요.
npx expo install expo-image-picker. - 자연적인 부분을 구성하세요. 플러그인과 필요한 권한 설명을 추가하세요.
- 권한을 의도적으로 요청하세요. 카메라와 미디어 라이브러리 흐름을 분리하세요.
- 결과를 보호하세요: 확인
result.canceled안전하게 읽기assets[0]. - URI 기반 업로드를 선호하세요. base64을 특별한 경우에만 유지하세요.
- 실제 장치에서 테스트하세요. 특히 카메라 캡처와 권한提示에 대해.
Capacitor 또는 Electron 앱과 React Native 프로젝트를 함께 배포하는 팀이 있다면 Capacitor는 JavaScript, CSS, config, 및 asset 업데이트를 저장소 검토 없이 모든 변경에 대기하지 않고 배포할 수 있는 옵션입니다. 이미지 관련 수정이 웹层에 존재할 때, 업로드 UI, 유효성 검사 규칙, 복사본, 또는 픽커 흐름과 관련된 자산 처리와 같은 경우에 관련이 있습니다. Capgo __CAPGO_KEEP_0__
