inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

배달앱 클론코딩 [with React Native]

React Navigation 중 Drawer Navigation 방법을 사용하는 방법?

해결된 질문

1089

이진우

작성한 질문수 1

0

안녕하세요 제로초님 간단하게 Stack이나 Tab 방식이 아닌 Drawer방식을 한번 사용하고자, 다음과 같은 모듈들을 다운로드 받고 코드를 작성하였습니다.
 
npm install @react-navigation/native
npm install react-native-screens
npm install react-native-safe-area-context
npm install @react-navigation/drawer
npm install react-native-gesture-handler
npm install react-native-reanimated
 
해당 코드 작성입니다.
 
 
Drawer가 실행되어 To Do page 또는 Profile page로 이동이 가능하도록 설계하고 싶었습니다.
 
 
 
 
npm run android로 실행을 해보았지만, 다음과 같은 에러가 발생하여, 밑의 링크대로 고쳐보고 다시 시도를 해보았지만, 똑같은 에러가 지속적으로 발생하였습니다.
 
 
그리고 스마트폰 화면에는 아무것도 나오지 않았습니다...
 
관련 에러를 복사하여 구글링을 한 결과 다음과 같은 대답을 찾게 되었고, 그대로 이행해 보았습니다.
https://stackoverflow.com/questions/70710318/react-navigation-drawer-giving-me-invariant-violation-module-appregistry-is-not
 
 
 
그리고 난 뒤, android 파일로 가서 ./gradlew clear를 한 뒤, 다시 전 폴더로 돌아가 npm run android를 실행해 보았지만
똑같은 에러를 마주하게 되었습니다...
 
혹시, 수업 내용에서는 나오지 않았지만 Drawer를 에러없이 이용하기 위해서는 어떤 방법을 사용해야할 지 여쭈어볼 수 있을까요? 감사합니다!
 
 

react-native

답변 1

1

제로초(조현영)

왜 스택오버플로우에서 마지막 명령어는 안 따라하셨나요?

 

https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

0

이진우

빠른 답변 감사드립니다! 올려주신 링크에 있던 내용 중 제가 추가하지 못한 Proguard 부분을 추가하고 다시 ./gradlew clean을 실행하였습니다!

 

 

그 뒤 제로초님 말씀처럼 마지막 명령어 

npx react-native run-android -- --reset-cache  
를 실행했지만, 지속적으로 Error가 발생하고 있습니다...ㅠㅜ
 
 
 

혹시 저에게 이 문제를 해결할 다른방법이 있을까요..? 아님 프로젝트를 뒤엎고 다시 시작해야하는 심각한 문제인가요...?

0

제로초(조현영)

혹시 메트로 서버 껐다가 켜신 게 맞나요??

0

이진우

네! 찜찜한 구석을 남기고 싶지 않아서, 코드 줄 바꿀 때 마다 지속적으로 android 폴더로 들어가 ./gradlew clean을 실행하고 다시 전 폴더로 돌아가 메트로 서버를 시작했습니다!

0

제로초(조현영)

제 강좌 토대로 똑같이 세팅해서 해본 결과 잘 됩니다. 뭔가 과정중에 꼬이신 것 같습니다.

0

이진우

답변 감사드립니다 ㅠㅜ 프로젝트 말끔하게 지우고나서 다시 한번 시도해보도록 하겠습니다!

0

이진우

스택오버플로우를 계속 뒤지고 나서 한 답변을 발견하게 되었고 문제를 해결할 수 있었습니다...

 

https://stackoverflow.com/questions/67130651/reanimated-2-failed-to-create-a-worklet-maybe-you-forgot-to-add-reanimateds-ba

 
npm install react-native-reanimated@~2.2.0

이 방법을 사용하니까 warning은 나오지만 잘 작동하네요 ㅠㅜㅠㅜㅠㅜㅠ

If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/installation

이 warning이 나와도 무리없이 정상적인 앱 출시를 위해 사용할 수 있을까요?

0

제로초(조현영)

저도 모릅니다. 출시용 apk나 aab를 만들어봐야 압니다.

0

이진우

결국 답을 찾아냈습니다!!!!!!!

./gradlew clean 을 하고 추가적으로 ./gradlew build --refresh-dependencies 명령어를 실행한 후  마지막으로 전 디렉토리로 돌아가

npx react-native run-android -- --reset-cache 를 입력하니

찜찜하게 @~2.2.0을 다운로드 하지 않고 시원하게 npm install react-native-reanimated 로 설치 된 react-native-reanimated가 정상적으로 작동되는 것을 확인했습니다!!

도와주셔서 정말 감사합니당 ㅠㅜㅠㅜㅠㅜ

앱실행시 네이버맵 [401] 에러

0

1065

2

스타일링 라이브러리

0

160

2

expo, cli 선택 중에 고민이 있습니다.

0

180

2

JDK 버전이 달라도 괜찮나요?

0

240

2

dimenstion usewindowdeminstion

0

130

3

[맥 전용]환경 설정하기 1편 & [맥 전용]환경 설정하기 2편의 영상이 안나옵니다.

0

218

1

jdk11 버전과 gradle 버전의 호환성 관련 질문드립니다.

0

407

2

강의 외 질문입니다!

0

164

2

react native랑 맞는 ui 라이브러리 어떤게 좋을까요?

0

1554

2

react native와 spring boot 연결

0

365

1

java가 아닌 .kt에서 code push 에러가 발생합니다.

0

223

2

flipper 239 에러가 발생합니다.

0

173

2

package.json에 /lib/panino.js 문제입니다.

0

481

2

window - mac 협업 과정 질문합니다

0

221

1

ios 빌드 중 RCTBridgeDelegate.h import 오류

0

294

2

ios 앱 빌드 중 hermesEnabled 관련 오류발생

0

249

2

Socket 연결시 질문 드립니다.!

0

158

2

wifi 환경에서 axios 통신이 로컬서버에서 안됩니다.

0

430

2

iOS render error 질문드립니다.

0

417

2

iOS 가상머신 오류

0

173

2

npc react init 명령어 실행시 발생되는 오류

0

224

1

nom start 시 오류

0

122

1

NextJS 기반으로 만들어서 웹뷰 React Native로 배포 가능한가요?

0

1019

2

안드로이드 rn75 버전에 맞게 설정 중에 android13 다운로드에 대해서 막혔습니다!

0

187

2