本文共 10310 字，大约阅读时间需要 34 分钟。

1.简介

导航组件Navigator可以让app在不同页面进行切换。为达到这样的功能，Navigator提供了路由对象功能进行区分每个页面。 
我们可以通过renderScene方法，Navaigator根据指定的路由进行渲染指定的界面。 
除了以上功能之外，为了改变页面切换的动画或者页面的手势，该组件还提供configureScene属性来进行获取指定路由页面的配置对象信息。 
对于页面切换动画或者更多的屏幕配置选项信息详情可以查看Navigator.SceneConfigs

2.动画手势属性

PushFromRight 
FloatFromRight 
FloatFromLeft 
FloatFromBottom 
FloatFromBottomAndroid 
FadeAndroid 
HorizontalSwipeJump 
HorizontalSwipeJumpFromRight 
VertivalUpSwipeJump 
VertivalDownSwipeJump 
更多属性，可以去修改NavigatorSceneConfigs.js这个文件。

3.Navigator方法

在使用导航器的时候，如果你已经获取了导航器对象的引用，我们可以进行调用以下一些方法来实现页面导航功能:getCurrentRoutes() 该进行返回存在的路由列表信息 
getCurrentRoutes() 返回存在的路由列表信息 
jumpBack() 回退操作，但是不会卸载（删除）当前页面 
jumpForward() 跳转到相对于当前页面的下一个页面 
jumpTo(route) 根据传入的路由信息，跳转到一个指定的页面（该页面不会卸载删除） 
push(route) 导航切换到一个新的页面，新的页面进行压入栈。通过jumpForward()方法可以回退过去 
pop 当前页面弹出来，跳转到栈中下一个页面，并且卸载删除掉当前的页面 
replace(route) 只用传入的路由的指定页面进行替换掉当前的页面 
replaceAtIndex(route, index) 传入路由以及位置索引，使用该路由指定的页面跳转到指定位置的页面 
replacePrevious(route) 传入路由，通过指定路由的页面替换掉前一个页面 
resetTo(route) 进行导航到新的界面，并且重置整个路由栈 
immediatelyResetRouteStack(routeStack) 该通过一个路由页面数组来进行重置路由栈 
popToRoute(route) 进行弹出相关页面，跳转到指定路由的页面，弹出来的页面会被卸载删除 
popToTop() 进行弹出页面，导航到栈中的第一个页面，弹出来的所有页面会被卸载删除

4.Navigator属性风格

configureScene －－ function 方法， 该为可选的方法进行配置页面切换动画和手势。该会通过路由和路由栈两个参数调用，进行返回一个页面参数配置对象：(route, routeStack) => Navigator.SceneConfigs.FloatFromRight 
initialRoute －－ object 参数对象， 进行设置导航初始化的路由页面。路由是标识导航器渲染标识每一个页面的对象。initialRoute必须为initialRouteStack中的路由。同时initialRoute默认为initialRouteStack中路由栈的最后一项 
initialRouteStack －－ [object] 参数对象数组 该是一个初始化的路由数组进行初始化。如果initalRoute属性没有设置的话，那么就必须设置initialRouteStack属性，使用该最后一项作为初始路由。 如果initalRouteStack属性没有设置的话，该会生成只包含initalRoute值的数组 
navigationBar －－ node 该为可选的参数，在页面切换中用来提供一个导航栏 
navigator －－ object 该为可选参数，可以从父类导航器中获取导航器对象 
onDidFoucs －－ function 该方法已经废弃，我们可以使用navigationContext.addListener(‘didfocus’,callback)方法进行替代。该会在每次页面切换完成或者初始化之后进行调用该方法。该参数为新页面的路由 
onWillFocus －－function 该方法已经废弃，我们可以使用navigationContext.addListener(‘willfocus’,callback)方法进行替代。该会页面每次进行切换之前调用 
renderScene －－ function 该为必须调用的方法，该用来渲染每一个路由指定的页面。参数为路由以及导航器对象两个参数，具体是方法如下:

(route, navigator) =>
    
 
  1 
  
 
  1

sceneStyle －－ 样式风格，该继承了View视图的所有样式风格。该设置用于每个页面容器的风格

5.实例

'use strict';import React, { Component }  from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Navigator,    TouchableHighlight,} from 'react-native';class NavButton extends Component {
       render() {        return (            
                   
    
     {
  this.props.text}
                
           );    }}class HomeScene extends Component {
       render() {        return(            
                   
    
      {                        this.props.navigator.push({                            component: ConfigsScene,                            name: '手势属性',                        });                    }}                    text='手势属性'                />                
     
       {                        this.props.navigator.push({                            component: MethodsScene,                            name: '方法',                        });                    }}                    text='方法'                />            
     
    
           );    }}class ConfigsScene extends Component {
       render() {        return (            
                   
    
     {
  this.props.message}
                    
    
      {                        this.props.navigator.pop();                    }}                    text="返回上一页"                />                
     
       {                        this.props.navigator.push({                            component: EndScene,                            sceneConfig: Navigator.SceneConfigs.PushFromRight,                        });                    }}                    text="PushFromRight default"                    />                
      
        {                        this.props.navigator.push({                            component: EndScene,                            sceneConfig: Navigator.SceneConfigs.FloatFromRight,                        });                    }}                    text="FloatFromRight"                    />                    
       
         {                        this.props.navigator.push({                            component: EndScene,                            sceneConfig: Navigator.SceneConfigs.FloatFromLeft,                        });                    }}                    text="FloatFromLeft"                    />                
        
          { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.FloatFromBottom, }); }} text="FloatFromBottom" /> 
         
           { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.FloatFromBottomAndroid, }); }} text="FloatFromBottomAndroid" /> 
          
            { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.FadeAndroid, }); }} text="FadeAndroid" /> 
           
             { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJump, }); }} text="HorizontalSwipeJump" /> 
            
              { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJumpFromRight, }); }} text="HorizontalSwipeJumpFromRight" /> 
             
               { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.VerticalUpSwipeJump, }); }} text="VerticalUpSwipeJump" /> 
              
                { this.props.navigator.push({ component: EndScene, sceneConfig: Navigator.SceneConfigs.VerticalDownSwipeJump, }); }} text="VerticalDownSwipeJump" /> 
              
             
            
           
          
         
        
       
      
     
    
           );    }}class MethodsScene extends Component {
       render() {        return (            
                   
    
     Current Routes length: {
  this.props.navigator.getCurrentRoutes().length}
                    
    
      {                        this.props.navigator.jumpBack();                    }}                    text='jumpBack'                />                
     
       {                    }}                    text='jumpForward'                />                
      
        {                    }}                    text='jumpTo'                />            
      
     
    
           );    }}class EndScene extends Component {
       render() {        return (            
                   
    
      {                        this.props.navigator.pop();                    }}                    text="返回上一页"                />                
     
       {                        this.props.navigator.popToTop();                    }}                    text="退到栈中第一个页面"                />            
     
    
           );    }}export default class NavigatorMazouri extends Component {
       render() {        return (            
   
     {                    let Component = route.component;                    if(route.component) {                    return 
                        }                }}                configureScene={
  (route) => {                    if (route.sceneConfig) {                        return route.sceneConfig;                    }                    return Navigator.SceneConfigs.PushFromRight;                }}            />        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        backgroundColor: '#F5FCFF',    },    messageText: {        fontSize: 17,        fontWeight: '500',        padding: 15,        marginTop: 50,        marginLeft: 15,    },    button: {        backgroundColor: 'white',        padding: 15,        borderBottomWidth: StyleSheet.hairlineWidth,        borderBottomColor: '#CDCDCD',    },}); 
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32 
  33 
  34 
  35 
  36 
  37 
  38 
  39 
  40 
  41 
  42 
  43 
  44 
  45 
  46 
  47 
  48 
  49 
  50 
  51 
  52 
  53 
  54 
  55 
  56 
  57 
  58 
  59 
  60 
  61 
  62 
  63 
  64 
  65 
  66 
  67 
  68 
  69 
  70 
  71 
  72 
  73 
  74 
  75 
  76 
  77 
  78 
  79 
  80 
  81 
  82 
  83 
  84 
  85 
  86 
  87 
  88 
  89 
  90 
  91 
  92 
  93 
  94 
  95 
  96 
  97 
  98 
  99 
  100 
  101 
  102 
  103 
  104 
  105 
  106 
  107 
  108 
  109 
  110 
  111 
  112 
  113 
  114 
  115 
  116 
  117 
  118 
  119 
  120 
  121 
  122 
  123 
  124 
  125 
  126 
  127 
  128 
  129 
  130 
  131 
  132 
  133 
  134 
  135 
  136 
  137 
  138 
  139 
  140 
  141 
  142 
  143 
  144 
  145 
  146 
  147 
  148 
  149 
  150 
  151 
  152 
  153 
  154 
  155 
  156 
  157 
  158 
  159 
  160 
  161 
  162 
  163 
  164 
  165 
  166 
  167 
  168 
  169 
  170 
  171 
  172 
  173 
  174 
  175 
  176 
  177 
  178 
  179 
  180 
  181 
  182 
  183 
  184 
  185 
  186 
  187 
  188 
  189 
  190 
  191 
  192 
  193 
  194 
  195 
  196 
  197 
  198 
  199 
  200 
  201 
  202 
  203 
  204 
  205 
  206 
  207 
  208 
  209 
  210 
  211 
  212 
  213 
  214 
  215 
  216 
  217 
  218 
  219 
  220 
  221 
  222 
  223 
  224 
  225 
  226 
  227 
  228 
  229 
  230 
  231 
  232 
  233 
  234 
  235 
  236 
  237 
  238 
  239 
  240 
  241 
  242 
  243 
  244 
  245 
  246 
  247 
  248 
  249 
  250 
  251 
  252 
  253 
  
 
  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 
  13 
  14 
  15 
  16 
  17 
  18 
  19 
  20 
  21 
  22 
  23 
  24 
  25 
  26 
  27 
  28 
  29 
  30 
  31 
  32 
  33 
  34 
  35 
  36 
  37 
  38 
  39 
  40 
  41 
  42 
  43 
  44 
  45 
  46 
  47 
  48 
  49 
  50 
  51 
  52 
  53 
  54 
  55 
  56 
  57 
  58 
  59 
  60 
  61 
  62 
  63 
  64 
  65 
  66 
  67 
  68 
  69 
  70 
  71 
  72 
  73 
  74 
  75 
  76 
  77 
  78 
  79 
  80 
  81 
  82 
  83 
  84 
  85 
  86 
  87 
  88 
  89 
  90 
  91 
  92 
  93 
  94 
  95 
  96 
  97 
  98 
  99 
  100 
  101 
  102 
  103 
  104 
  105 
  106 
  107 
  108 
  109 
  110 
  111 
  112 
  113 
  114 
  115 
  116 
  117 
  118 
  119 
  120 
  121 
  122 
  123 
  124 
  125 
  126 
  127 
  128 
  129 
  130 
  131 
  132 
  133 
  134 
  135 
  136 
  137 
  138 
  139 
  140 
  141 
  142 
  143 
  144 
  145 
  146 
  147 
  148 
  149 
  150 
  151 
  152 
  153 
  154 
  155 
  156 
  157 
  158 
  159 
  160 
  161 
  162 
  163 
  164 
  165 
  166 
  167 
  168 
  169 
  170 
  171 
  172 
  173 
  174 
  175 
  176 
  177 
  178 
  179 
  180 
  181 
  182 
  183 
  184 
  185 
  186 
  187 
  188 
  189 
  190 
  191 
  192 
  193 
  194 
  195 
  196 
  197 
  198 
  199 
  200 
  201 
  202 
  203 
  204 
  205 
  206 
  207 
  208 
  209 
  210 
  211 
  212 
  213 
  214 
  215 
  216 
  217 
  218 
  219 
  220 
  221 
  222 
  223 
  224 
  225 
  226 
  227 
  228 
  229 
  230 
  231 
  232 
  233 
  234 
  235 
  236 
  237 
  238 
  239 
  240 
  241 
  242 
  243 
  244 
  245 
  246 
  247 
  248 
  249 
  250 
  251 
  252 
  253