Navigator

使用导航器可以让你在应用的不同场景(页面)间进行切换。导航器通过路由对象来分辨不同的场景。利用renderScene方法,导航栏可以根据指定的路由来渲染场景。

可以通过configureScene属性获取指定路由对象的配置信息,从而改变场景的动画或者手势。查看Navigator.SceneConfigs来获取默认的动画和更多的场景配置选项。

译注:本文档的说明较为简略,使用上有一定的难度。论坛中有一篇更为详细的教程,推荐阅读。

截图#

基本用法#

<Navigator
    initialRoute={{name: 'My First Scene', index: 0}}
    renderScene={(route, navigator) =>
      <MySceneComponent
        name={route.name}
        onForward={() => {
          var nextIndex = route.index + 1;
          navigator.push({
            name: 'Scene ' + nextIndex,
            index: nextIndex,
          });
        }}
        onBack={() => {
          if (route.index > 0) {
            navigator.pop();
          }
        }}
      />
    }
  />

导航方法#

如果你得到了一个navigator对象的引用(译注:再次推荐仔细阅读此教程,理解如何在renderScene方法中传递navigator对象,否则直接调用会报undefined错误),则可以调用许多方法来进行导航:

  • getCurrentRoutes() - 获取当前栈里的路由,也就是push进来,没有pop掉的那些。
  • jumpBack() - 跳回之前的路由,当然前提是保留现在的,还可以再跳回来,会给你保留原样。
  • jumpForward() - 上一个方法不是调到之前的路由了么,用这个跳回来就好了。
  • jumpTo(route) - 跳转到已有的场景并且不卸载。
  • push(route) - 跳转到新的场景,并且将场景入栈,你可以稍后跳转过去
  • pop() - 跳转回去并且卸载掉当前场景
  • replace(route) - 用一个新的路由替换掉当前场景
  • replaceAtIndex(route, index) - 替换掉指定序列的路由场景
  • replacePrevious(route) - 替换掉之前的场景
  • resetTo(route) - 跳转到新的场景,并且重置整个路由栈
  • immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
  • popToRoute(route) - pop到路由指定的场景,在整个路由栈中,处于指定场景之后的场景将会被卸载。
  • popToTop() - pop到栈中的第一个场景,卸载掉所有的其他场景。

属性#

configureScene function #

可选的函数,用来配置场景动画和手势。会带有两个参数调用,一个是当前的路由,一个是当前的路由栈。然后它应当返回一个场景配置对象

(route, routeStack) => Navigator.SceneConfigs.FloatFromRight
  • Navigator.SceneConfigs.PushFromRight (默认)
  • Navigator.SceneConfigs.FloatFromRight
  • Navigator.SceneConfigs.FloatFromLeft
  • Navigator.SceneConfigs.FloatFromBottom
  • Navigator.SceneConfigs.FloatFromBottomAndroid
  • Navigator.SceneConfigs.FadeAndroid
  • Navigator.SceneConfigs.HorizontalSwipeJump
  • Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
  • Navigator.SceneConfigs.VerticalUpSwipeJump
  • Navigator.SceneConfigs.VerticalDownSwipeJump

initialRoute object #

定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象。initialRoute必须是initialRouteStack中的一个路由。initialRoute默认为initialRouteStack中最后一项。

initialRouteStack [object] #

提供一个路由集合用来初始化。如果没有设置初始路由的话则必须设置该属性。如果没有提供该属性,它将被默认设置成一个只含有initialRoute的数组。

navigationBar node #

可选参数,提供一个在场景切换的时候保持的导航栏。

navigator object #

可选参数,提供从父导航器获得的导航器对象。

onDidFocus function #

每当导航切换完成或初始化之后,调用此回调,参数为新场景的路由。

onWillFocus function #

会在导航切换之前调用,参数为目标路由。

renderScene function #

必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。

(route, navigator) =>
  <MySceneComponent title={route.title} navigator={navigator} />

sceneStyle View#style #

将会应用在每个场景的容器上的样式。