Tab / Stack navigator 결합

결합 방법

1-1. Tab 안에 Stack 집어 넣는 방법 : 많이 사용하진 않음

<Tab.Navigator> <Stack> </Tab.Navigator>

1-2. root 라는 native stack navigator를 만들고 그 안에 Tab/Stack을 집어 넣는 방법

이 때 root에서 headerShown : false를 해줘야 header가 2개가 안생김

<Root.Navigator>
  <Tabs>
  	<Tab.screen name="tab1" />
  </Tabs>

  <Stack>
      <Stack.screen name="stack1" />
  </Stack>
<Root.Navigator>

이때 navigation.navigate를 할 때 Tabs에서 Stack으로 navigation간에 넘어갈 수가 없음.

navigation.navigate("Stack"(Stack nav이름 ), {screen : "Stack nav 안에 있는 component name" } ) 으로 사용가능

반대도 가능함 stack --> tab

ex) onPress={()=>{navigate("Stack",{screen:"stack_2"})}}
      onPress={()=>{navigate("Tabs",{screen:"tab_1"})}}

2. Parameter 보내기

-> Tabs navigator 내에서 Stack navigator로 이동 시 parameter를 보낼 때 사용

ex) 영화 정보에서 Detail Page로 이동 시 선택한 영화에 대한 정보를 보내야 할 때 사용

// tabs navigator 내에서 stack으로 보내야 할 때 
   
   const navigation=useNavigation();
    const goToDetail=()=>{
        navigation.navigate("Stack",{screen:"Detail",params:{originalTitle }})
      }

// Stack navigator 내의 component 에서 props로 가져온 정보를 살펴보면

const Detail = (props)=>{

    console.log(props)

    return( <Container></Container>)

    
}

/// props 안에있는 정보
Object {
  "navigation": Object {
    "addListener": [Function addListener],
    "canGoBack": [Function canGoBack],
    "dispatch": [Function dispatch],
    "getParent": [Function getParent],
    "getState": [Function anonymous],
    "goBack": [Function anonymous],
    "isFocused": [Function isFocused],
    "navigate": [Function anonymous],
    "pop": [Function anonymous],
    "popToTop": [Function anonymous],
    "push": [Function anonymous],
    "removeListener": [Function removeListener],
    "replace": [Function anonymous],
    "reset": [Function anonymous],
    "setOptions": [Function setOptions],
    "setParams": [Function anonymous],
  },
  "route": Object {
    "key": "Detail-26yWq6NTome2wLP4pg-Rn",
    "name": "Detail",
    "params": Object {
      "originalTitle": "Dear Evan Hansen",
    },
  },
}