_handlePhotoBtnPress 의 함수가 실행이 않되어 ... - 인프런

처음 배우는 리액트 네이티브

_handlePhotoBtnPress 의 함수가 실행이 않되어 내폰안의 파일에 접근하는 스크린이 열리지 않습니다

해결된 질문

작성

218

const Image = ({url, showButton}) => {
   // useEffect >>> 사진접근권한을 요청
   useEffect(() => {
      (async () => {
         if (Platform.OS !== 'web') {
            const {status} =
               await ImagePicker.requestMediaLibraryPermissionsAsync();
            if (status !== 'granted') {
               Alert.alert('사진접근권한이 필요합니다', '접근권한을 켜세요');
            }
         }
      })();
   }, []);

   const _handlePhotoBtnPress = async () => {
      let result = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.Images,
         allowsEditing: true,
         aspect: [1, 1],
         quality: 1,
      });

      console.log(result);

      if (!result.cancelled) {
         setImage(result.uri);
      }
   };

   return (
      <Container>
         <ProfileImage source={{uri: url}} />
         {showButton && <PhotoButton onPress={_handlePhotoBtnPress} />}
      </Container>
   );
};
 
 
전체 코드는 깃헙에 올려두었습니다
https://github.com/dongguntechnology/rn-chat
 
테스트기기는 안드로이드 갤럭시 s10 입니다

react-native javascript

답변 2

shafeel2

질문자

감사합니다

좀더 면밀히 코드를 분석하도록 하겠습니다

김범준

지식공유자

안녕하세요 shafeel2님,

components/Image.js 파일 26line을 다음과 같이 수정하세요.

전달된 onPress 함수를 BtuttonContainer에 전달하지 않아서, 함수 실행이 되지 않는 문제입니다.

대부분 오타는 아주 사소해서 잘 보이지 않을때가 많습니다.

차분하게 천천히, 처음부터 하나씩 보면서 찾는 연습을 하면 도움이 됩니다.

가장 좋은 방법은, 본인의 생각과 다르게 동작하는 부분의 코드를 하나씩 다라가보는것을 추천합니다.

예를 들어, 지금같은 경우에는

문제) 버튼을 클릭했는데 함수(사진첩 열기)가 동작하지 않는다

1) 함수 정의 확인 => 57line _handle~ 함수
2) 버튼 클릭 부분 확인 => 75line <PhotoButton onPress={_handle~} />
3) <PhotoButton ~/> 정의 확인 => 24line const PhotoButton
4) PhotoButton 으로 전달된 onPress가 호출되는 부분 확인 => 26line에서 전달된 onPress가 <BtuttonContainer>로 전달되어야 하지만 전달되지 않음

이런 과정을 통해 에러 혹은 본인이 놓친 부분을 확인하는 연습을 해보시기 바랍니다.

즐거운 하루 되세요

감사합니다.

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

_handlePhotoBtnPress 의 함수가 실행이 않되어 내폰안의 파일에 접근하는 스크린이 열리지 않습니다