This component is responsible for page transitioning and managing the pages of your OnsenUI application. In order to manage to display the pages, the navigator needs to define the renderPage
method, that takes an route and a navigator and converts it to an page.
<Navigator
renderPage={(route, navigator) =>
<MyPage
title={route.title}
onPop={() => navigator.popPage()}
/>
}
initialRoute={{
title: 'First Page'
}} />
}
}
Name | Type | Description |
---|---|---|
renderPage | func | This function takes the current route object as a parameter and returns a React component. Required. |
initialRouteStack | array |
This array contains the initial routes from the Navigator,
which will be used to render the initial pages in the |
initialRoute | object |
This array contains the initial route of the navigator, which will be used to render the initial pages in the renderPage method. Optional. |
onPrePush |
func
() => null |
Called just before a page is pushed. It gets an event object with route information. Optional. |
onPostPush |
func
() => null |
Called just after a page is pushed. It gets an event object with route information. Optional. |
onPrePop |
func
() => null |
Called just before a page is popped. It gets an event object with route information. Optional. |
onPostPop |
func
() => null |
Called just after a page is popped. It gets an event object with route information. Optional. |
animation | string |
Animation name. Available animations are |
animationOptions | object |
Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'} .
Optional.
|
swipeable | union | Enables swipe-to-pop functionality for iOS. Optional. |
swipePop | func | Optional function called on swipe-to-pop. If provided, must perform a popPage with the given options object. Optional. |
onDeviceBackButton | func | Custom handler for device back button. Optional. |
Signature | Description |
---|---|
resetPage(route, options = {}) | Resets the current page |
resetPageStack(route, options = {}) | Resets the navigator to the current page stack |
pushPage(route, options = {}) | Pushes a page to the page stack |
popPage(options = {}) | Pops a page out of the page stack |
Resets the current page
Returns: Promise which resolves to the revealed page.
Name | Type | Description |
---|---|---|
route | Object | The route that the page should be reset to. |
options |
Resets the navigator to the current page stack
Returns: Promise which resolves to the revealed page.
Name | Type | Description |
---|---|---|
routes | Array | The routes that the navigator should be reset to. |
options |
Pushes a page to the page stack
Returns: Promise which resolves to the revealed page.
Name | Type | Description |
---|---|---|
route | Object | The route that the navigator should push to. |
options |
Pops a page out of the page stack
Returns: Promise which resolves to the revealed page.
Name | Type | Description |
---|---|---|
options |
If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.
For bug reports and feature requests use our GitHub Issues page.