리액트 네이티브

React React Native
1

안녕하세요.
리액트 네이티브를 공부할겸 개인 프로젝트로 써보는 중입니다.
이제 막 입문단계인데요.

yomybaby 이종은 님이 쓰신 react-native Navigation에 관한 글(react-native의 지옥 1호 : navigation)을 읽고
react-native-navigation을 써보려고 합니다.

react-native init 으로 프로젝트를 생성했고
react-native-navigation 팀의 playground 소스를 참고해 진행하다 막히는 부분이 있어 질문드립니다.

생성된 프로젝트는 AppRegistry.registerComponent()를 통해 root component를 마운트 하는 식인데
playground 소스는 Navigation.setRoot()를 통해 root component를 마운트하는 것으로 보입니다.

처음에는 react-native 방식을 따라서
AppRegistry.registerComponent()로 마운트된 app component에서 Navigation.setRoot()를 실행시켰더니
Navigation.setRoot가 undefined라고 뜨고,
(콘솔창에는 function이 있다고 뜨는데 call하면 undefined라고 뜹니다)

이번에는 playground 방식을 따라서
Navigation.setRoot()를 root component에서 바로 실행하니 (AppRegistry.registerComponent()없이)
정상적인 react-native 마운트 방식이 아니라는 에러가 뜨더라구요.

react-native-navigation 관련 예제를 찾기가 조금 어려워서 그런데
setRoot를 어떤 식으로 사용하면 react-native와 호환할 수 있는지 조언 부탁드립니다.

2

v2를 쓰나보군요. 저는 아직 v2로 가지 못했습니다. 다음 프로젝트에서는 v2를 사용할 예정입니다.

RNN(react-native-navigation)에서는 AppRegistry.registerComponent 와 유사한 일을 하는 Navigation.registerComponent로 특정 컴포넌트를 등록하고 Navigation.setRoot에서 해당 컴포넌트를 Navigation.registerComponent에서 등록한 이름을 가지고 화면에 표현 할 수 있는 방식입니다.

제가 질문을 정확히 이해했는지 모르겠는데요. https://wix.github.io/react-native-navigation/v2/#/docs/Installing 에 나와있듯이 네이티브 구동 코드까지 바꿔야 정상작동합니다. RNN의 단점이 초반에 할일이 생각보다 많다는 점입니다. :slight_smile:

1개의 좋아요
3

아! create-react-native-app 쓰면 자동으로 해결되는 설명인줄 알고 스킵했더니
그 부분을 주의깊게 봤어야 했네요 ㅎㅎ

답변해주신 내용이 정확히 제가 궁금했던것 같습니다.
다시 읽어보니 제가 너무 장황하게 상황설명만 했군요 ㅎㅎ

직접 답변까지 해주실줄은…그것도 빠르게! ㅋㅋ
감사합니다^^

1개의 좋아요