• 카테고리

    질문 & 답변
  • 세부 분야

    모바일 앱 개발

  • 해결 여부

    해결됨

padding-top: ${({insets: {top}}) => top}px; 이부분에서 에러가 발생하는군요

21.12.04 16:29 작성 조회수 143

1

List Screen 에서 Home 버튼을 누르면

아래에러가 발생하는군요

늘 건강하시고 부자되세요

 

TypeError: Cannot read properties of undefined (reading 'top')

깃헙주소 >>> https://github.com/dongguntechnology/Stack-Navigation

답변 2

·

답변을 작성해보세요.

0

shafeel2님의 프로필

shafeel2

질문자

2021.12.04

아 그렇군요

참 님의 아래의 깃헙주소

https://github.com/Alchemist85K/inflearn-react-native 

 

이곳에 들어가도 해당파일을 찾을수 없는데

제가 뭔가 잘못알고 있는 것 같군요

https://github.com/Alchemist85K/inflearn-react-native 로 이동하면 폴더 2개가 있습니다. 
rn-todo-app 폴더는 할일관리 프로젝트
rn-chat 폴더는 채팅 프로젝트가 있습니다. 

  

예를 들어 rn-chat 폴더로 들어가면 프로젝트가 올라가있는걸 볼 수 있습니다.
그 중 src 폴더에 모든 소스 코드가 있습니다. 
소스코드 및 폴더 구조는 강의에서 사용한것과 동일합니다. 

질문하신 내용과 관련된 부분의 코드를 찾고 계시면,
rn-chat > src > screens > Signin.js 로 이동하시면 됩니다. 

  

프로젝트를 제외한 나머지 강의에 대한 코드는 따로 제공하지 않습니다. 
프로젝트 진행 강의가 아닌 강의는 코드의 양이 많거나 강의의 길이가 길지 않으니,
강의를 다시 보면서 잘못된 부분을 비교하며 찾아보시기 바랍니다. 

  

즐거운 하루 되세요
감사합니다. 

0

안녕하세요 shafeel2 님, 

   

대부분 에러 메시지를 보면 원인을 파악할 수 있습니다. 

에러를 보면 undefined인데 top속성에 접근하려 해서 나타난 에러라고 설명하고 있습니다. 

top을 사용한 부분은 제목에 작성해주신대로 insets의 top을 받아오는 부분입니다. 

그렇다면 insets가 undefined라는 얘기입니다. 

insets를 props로 넘겨주지 않으면 insets가 undefined가 됩니다. 

코드를 보면 Container를 사용할 때, props로 insets를 전달하지 않고 있습니다. 

코드를 다음과 같이 변경해 보세요

return (

        <Container insets={insets}>

... (이하 생략)

);

    

버전이 변경되면서 사용법이 바뀌지 않는다면 대부분 오타이거나 무언가 누락된 경우가 대부분입니다. 

강의를 다시 보면서 잘 확인해 보시기 바랍니다. 

혹은, 제 깃헙에 공개된 최종 파일과 비교를 해보는것도 한가지 방법입니다. 

  

즐거운 하루 되세요

감사합니다.