[React-Native] React-Navigation 정리

** 아직 정리중인 게시글

공식문서 - 자주 쓰는 prop만 발췌

---

• navigate - go to another screen, figures out the action it needs to take to do i
• goBack - close active screen and move back in the stack
• reset - wipe the navigator state and replace it with a new route
• setParams - make changes to route's params
• addListener - subscribe to updates to events from the navigators

 

---

공식문서 - 네비게이터 종류에 따른 종속 기능 (navigate, goBack의 대안)

---

# Stack Navigator

• replace - replace the current route with a new one
• push - push a new route onto the stack
• pop - go back in the stack
• popToTop - go to the top of the stack

# Tab Navigator

• jumpTo - go to a specific screen in the tab navigator

# Drawer Navigator

• jumpTo - go to a specific screen in the drawer navigator
• openDrawer - open the drawer
• closeDrawer - close the drawer
• toggleDrawer - toggle the state, ie. switch from closed to open and vice versa

 

---

Prop 정리

---

• navigate - 다른 화면으로 이동

onPress={() => navigation.navigate('NextPage')}

• goBack - 현재 화면을 닫고 바로 이전 화면으로 이동

onPress={() => navigation.goBack()}

• reset - 화면 새로고침 (상태 초기화, route 초기화or변경)

onPress={() => navigation.reset({index: 0, routes: [{ name: 'Profile' }],})}

• setParams - 상태 유지, route 변경

onPress={() =>
  setParams({
    friends:
      route.params.friends[0] === 'Brent'
        ? ['Wojciech', 'Szymon', 'Jakub']
        : ['Brent', 'Satya', 'Michaś'],
    title:
      route.params.title === "Brent's Profile"
        ? "Lucy's Profile"
        : "Brent's Profile",
  })
}