UpdateProfileScreen 에서 사진 버튼 클릭시 오류발... - 인프런

핸즈온 리액트 네이티브

9.14 :: file 경로 받아오기

UpdateProfileScreen 에서 사진 버튼 클릭시 오류발생.

작성

수정됨

UpdateProfileScreen 에서

 <Pressable
    onPress={() => navigation.navigate(MainRoutes.IMAGE_PICKER)}
style={styles.imageButton}
  >...</Pressable>

여기 클릭 후 ImagePicker.js로 이동시

이 오류가 발생하는 상태인데요

getLocalUri는 onSubmit 누를때 사용하게 되는 상태가
그전에 ImagePicker로 이동한후

getPhotos함수에서 assets 를 가져올때 오류가 발생하는거 같은데...

문제와 해결방법이 뭔지 궁금해서 질문드립니다!.

깃주소는 :
https://github.com/dvrakry/rn-photo2
입니다 감사합니다!

react-native

답변 2

김범준

지식공유자

안녕하세요,

이 문제는 React Native에서 제공하는 Image 컴포넌트의 문제입니다.

촬영 시기와 현재 버전에 차이가 있어서 생긴 문제이니 양해 부탁드립니다.

ph:// uri를 지원하는 expo-image 를 사용해서 해결하는 것이 가장 쉬운 방법입니다. https://docs.expo.dev/versions/unversioned/sdk/image/

expo-image 의 사용방법이 RN의 Image컴포넌트와 크게 차이가 없고, 문서가 잘 작성되어 있어서 찾아보며 적용하기 쉽습니다. import 부분만 조금 변경하면 되기때문에 수정할 부분도 적습니다.

dvdve

질문자

아 버전 차이로 인한 문제였군요 감사합니다 선생님
바로 수정/해결 했습니다!!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. dvdve님.

질문하신 문제는 iOS에서 발생하는 ph://로 시작하는 이미지 URI를 처리하는 과정에서 흔히 발생하는 오류입니다. 이 오류는 React Native 환경에서 expo-image-picker 혹은 expo-media-library 사용 시 자주 보고됩니다.

원인:

iOS에서는 사진 라이브러리에 접근할 때 ph://로 시작하는 URI를 반환합니다. 이 URI는 파일 경로가 아닌 참조 값이기 때문에, 이를 직접적으로 사용하려고 하면 오류가 발생할 수 있습니다. No suitable URL request handler found와 같은 오류 메시지가 나타납니다.

해결 방법:

expo-media-library를 통해 getAssetInfoAsync 사용: 이미지 정보를 가져올 때 getAssetInfoAsync 함수를 활용하여 localUri를 얻어내고, 이를 사용하여 이미지를 처리합니다.
라이브러리 업데이트: expo-image-picker 또는 expo-media-library의 최신 버전을 사용하고 있는지 확인합니다. 최신 버전으로 업데이트하면, iOS와의 호환성이 보다 잘 지원됩니다.
권한 설정: Info.plist 파일에서 iOS의 사진 접근 권한이 제대로 설정되어 있는지 확인합니다.

참고할 만한 사례:

iOS에서의 사진 접근 문제 해결에서 비슷한 문제 해결 법을 설명하고 있습니다.
공식 가이드를 참조하여 설정을 점검해 보세요.

위의 방법들을 시도하여 문제를 해결해 보시길 추천드립니다. 라이브러리의 최신 가이드를 확인하고, Info.plist 파일에서의 권한 설정을 체크하여 문제가 해결되는지 확인해 보세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

UpdateProfileScreen 에서 사진 버튼 클릭시 오류발생.

원인:

해결 방법:

참고할 만한 사례: