[ReactNative_study_5]Stack / Tab navigator 결합

1) 결합방법

- 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="stack_1"> 
        </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",
    },
  },
}

      

여기서 route 안에 params로 위에서 보내온 값을 확인할 수 있다 . 위의 코드를 정리하면

// Stack navigator 내의 Detail component에서 route : {params} 로 받아온다.
const Detail = ({navigation,route:{params}})=>{
    console.log(params)
    return( <Container></Container>)
}

// console.log로 받아온 것 확인
Object {
  "originalTitle": "Venom: Let There Be Carnage",
}