（筆記）react navigation

[gracekrcx]

Fundamentals

moving between screens

Let's break this down:

• navigation: the navigation prop is passed in to every screen component (definition) in the native stack navigator (more about this later in "The navigation prop in depth"). stack navigator 會把 props : navigation 傳入每個 screen component
• navigate('Details') - we call the navigate function (on the navigation prop — naming is hard!) with the name of the route that we'd like to move the user to. 在 navigation 裡的 navigate function 帶入特定 route

  call navigation.navigate with a defined route name

• navigation.navigate() V.S navigation.push()

Passing parameters to routes

用 route 去接 parameters route.params

API Reference

Navigation prop

Each screen component in your app is provided with the navigation prop automatically.

• 不同的 navigator 有些 additional functions present on navigation prop stack navigator: replace, push, pop, popToTop tab navigator: jumpTo drawer navigator: jumpTo, openDrawer, closeDrawer, toggleDrawer

Navigators

Native Stack Navigator

• screenOptions : Default options 設定，底下的 screen 都會吃 (Default options to use for the screens in the navigator.)，但如各別 screen 有自己的設定，可以寫在自己的 options={}

Hooks

useNavigation

如果 component 拿不到 navigation object 可以使用 useNavigation

useRoute

useRoute is a hook which gives access to route object.

[gracekrcx]

Stack Navigator 和 Native Stack Navigator 差別？