<Navigator />

実例

Stack navigation

The Navigator is a component that provides stack based navigation. It is a very common navigation pattern in mobile apps.

After pushing a page to the top of the stack it will be displayed using transition animation. When the user goes back to the previous page the top page will be popped from the top of the stack and hidden with an corresponding transition animation.

Basic usage

The Navigator maintains a stack of route objects. These objects can be arbitrary objects and are rendered into pages with the renderPage property. The renderPage property must be set to a function that returns a Page component.

To push a new page on top of the stack, the pushPage(route) method is used. Similarly, a page is popped from the stack with the popPage() method.

The stack must be initialized with either the initialRoute or initialRouteStack, depending on whether the the stack needs to be initialized with one or more pages.

The back button

The BackButton component can be used to put a back button in the navigation bar. The component will automatically find the Navigator component and pop a page when pressed.

<Toolbar>
  <div className='left'>
    <BackButton>Back</BackButton>
  </div>
  <div className='center'>
    Title
  </div>
</Toolbar>

Customizing the animation

There are several animations available for the Navigator component. To change the animation the animation property is used. Available animations are slide, lift and fade. Setting the property to none will make the transition instantly.

It is also possible to customize the duration, delay and timing function of the animation using the animationOptions property.

<Navigator
  initialRoute={...}
  renderPage={...}
  animation='fade'
  animationOptions={{duration: 0.2, timing: 'ease-in'}}
/>

For iOS’ “swipe to pop” feature, add the swipeable prop. Note that this behavior is automatically removed on Android platforms unless swipeable={'force'} is specified.

Prop一覧

名前 型 / デフォルト値 概要
renderPage function This function takes the current route object as a parameter and returns a React component. (翻訳中) 必須
initialRouteStack array

This array contains the initial routes from the Navigator, which will be used to render the initial pages in the renderPage method.

(翻訳中)
Optional.
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 function
() => null
Called just before a page is pushed. It gets an event object with route information. (翻訳中) Optional.
onPostPush function
() => null
Called just after a page is pushed. It gets an event object with route information. (翻訳中) Optional.
onPrePop function
() => null
Called just before a page is popped. It gets an event object with route information. Optional.
onPostPop function
() => null
Called just after a page is popped. It gets an event object with route information. (翻訳中) Optional.
animation String

Animation name. Available animations are "slide", "lift", "fade" and "none". These are platform based animations. For fixed animations, add "-ios" or "-md" suffix to the animation name. E.g. "lift-ios", "lift-md". Defaults values are "slide-ios" and "fade-md".

(翻訳中)
Optional.
animationOptions object Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. (翻訳中) Optional.
swipeable bool Enables swipe-to-pop functionality for iOS. (翻訳中) Optional.
swipePop function Optional function called on swipe-to-pop. If provided, must perform a popPage with the given options object. (翻訳中) Optional.
onDeviceBackButton function Custom handler for device back button. (翻訳中) Optional.

議論

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。