react-native 中的Navigator 导航

 

Navigator

在GitHub上修改这篇文档支持我们

使用导航器可以让你在应用的不同场景（页面）间进行切换。导航器通过路由对象来分辨不同的场景。利用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 

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

 

转载于:https://my.oschina.net/u/3154680/blog/852161