제가 웹으로만 react와 react-router를 사용해봐서 app의 route는 개념이 살짝 애매합니다.
따라서 글이 조금 이상하더라도 이해해주시면 감사하겠습니다.
웹에서 url 기반으로 앞뒤 페이지를 가는 것과는 달리
ios 앱에서는 UiViewController를 쓰는것 같습니다.
react-native-navigation에서는 UiControllerView를
setRoot와 stack, sideMenu로 구현한 것 같은데요.
setRoot는 일반적으로 단일 컴포넌트를 올리는 방식인것 같고
sideMenu는 좌/우 Drawer를 넣을 때 쓰는 것처럼 보입니다. (맞는지 모르겠네요 ㅎㅎ)
stack은 순서가 있는 페이지들을 보여줄 때 쓰는 것 같은데…
stack은 children으로 array를 던져서 마지막 페이지부터 보여주더군요.
보통 순서가 있는 페이지라면 앞에서부터 순서대로 보여주는게 맞지 않나 싶은데요
(물론 stack을 모두 호출하면 마지막 페이지가 맨 위에 올라오는게 맞지만, 처음 stack에 들어갔을때)
지금 구현하려는 페이지가 1,2,3 페이지가 있다고 하면
stack으로 해당 route를 구현할 경우 처음부터 3페이지를 보여주니 조금 난감하더군요.
children array에 거꾸로 던져볼까도 생각해봤는데
header에서 이미 뒤로가기가 제공되기 때문에…정상적인 활용방법은 아닌것 같습니다.
react-native-navigation을 쓰는 분들은 stack을 어떤 식으로 활용하시나요? ㅎㅎ
1페이지 부터 보여주는 다른 방법이 있나요?
혹시 참고할 코드라도 알려주시면 너무 감사하겠습니다~^^
대개 구동 코드에서는 stack에 하나만 넣습니다. 그리고 화면 전환이 필요할 때 stack에 push합니다.
Stack에 배열로 넣는 시니리오를 하나 들자면 다음과 같습니다.
- A앱을 켜면 첫 화면이 글 목록이다
- 글 목록에서 글작성 버튼을 누른다
- Stack에 글 작성 화면이 나와서 사용자가 글을 입력할 수 있다.
- 글 작성 시 현재 내용을 계속 자동 저장한다.
- (베터리 방전이나 앱의 버그, 혹은 다른 앱으로 이동해서 오래사용하는 등등 글이 일부 작성된 채로 앱이 크래쉬 난다)
- 앱을 다시 켜면 작성 중이단 글이 있었으므로 [ 글 목록, 글 에디터 ] 두 스크린으로 스택을 초기화 해서 앱 구동과 동시에 글 에디터 화면이 나오게 된다.
- 뒤로가기를 누르면 글 목록 화면이 나온다.
생각 나는데로 작어봤는데 잘못된 내용이나 궁금한 내용이 있으면 알려주세요.
2개의 좋아요
이해가 잘 되게 써주셨어요!
저는 5번 케이스를 간과하고 있었네요 ㅎㅎ
stack에 언제 children을 쓰는지 이해했어요
그리고 그냥 스택에 하나만 넣고 push push 하는 방법자체를 몰랐네요~
미리 선언해야지만 이동 가능하다고 생각해서 ^^;
지난번에도 답글 주셨는데 이번에도 해결해주셔서 감사합니다~~
p.s
처음에 stack에 하나만 넣고 push 하는게 작동을 안하더라구요.
remote debugger나 terminal console에서는 이벤트가 일어나는데
막상 화면은 바뀌지가 않더라구요.
근데 stack을 선언하는 곳에서 root.stack.id를 push 하려는 id (push의 첫번째 파라미터)와 똑같이 해주니까 작동하네요.
react-native-navigation에서 layout들에 id를 쓰는데 정확히 어떤 이유로 쓰는지 잘 모르겠습니다.
특히 component name, componentId(첫번째 파라미터), root.stack.id의 차이점이 뭔지… 이해가 잘 안되네요ㅜㅜ
공식문서에는 정확하게 설명이 안된거 같아서요 ㅜㅜ
저는 아직 v2를 실제 프로젝트에 적용은 못해봤습니다. 현재 v1을 사용중이고 시간이 허락한다면 조만간 v2를 적용하고 싶네요. 
헷갈려하시는 부분은 두가지로 정리됩니다.
- component name :
Navigation.registerComponent 함수로 리액트 컴포넌트를 등록할 때 지정한 이름입니다. 이 함수를 통해서 고유의 이름을 지정해야만 해당 이름을 이용하여 push, pop, showOverlay등에서 해당 컴포넌트를 보여줄 수 있습니다.
- componentId : 이건 Navigation이 해당 component를 생성할 때 인스턴스 마다 각각 다르게 지정되는 id입니다. 이 id는 현재 어느 화면(리액트 컴포넌트)에서 해당 navigation 동작이 이뤄지게 하기 위해서 쓰입니다. 예를 등어 push, pop등은 비동기로 처리되다보니 엉뚱한 곳에서 push가 되거나 pop되는 문제가 해결됩니다. 이 id는 stack이나 tab에 임의로 지정해서 사용할 수 있습니다. stack에 id를 지정할 경우 push 할때 해당 id를 넘기면 해당 stack에 push하게됩니다. 현재 화면이 속한 stack에 push 하고자 하는 경우에는
push(this.props.componentId,...) 이런 식으로 현재 화면의 componentId를 넘겨주면됩니다.
주저리주저리 적어봤습니다. 도움이 되었길 바랍니다. 혹 잘못된 내용이 있다면 알려주세요. 
1개의 좋아요
잘 이해가 됐습니다 감사합니다^^
rnn 도큐먼트에는 자세한 설명이 없어서 라이브러리를 좀 들여다 봤더니
결국 ios native 코드까지 접근해야해서 대략적인 감만 잡을 수 있었는데
@codejong 님 덕에 이해가 잘 됐습니다!
안타까운건…그래도 코드가 작동을 안하네요 ㅜㅜ ㅋㅋ
아 이제 작동합니다!
이유는 모르겠지만…같은 소스인데 yarn으로 빌드업하면 안되고 npm으로 빌드업하니 되네요.
자바스크립트 개발자 포럼