组件Navigator的使用

二、Navigator


     1. 很多时候，我们需要导航器来应对不同场景间的切换，它通过路由对象来分辨不同的场景，我们这里采用的是renderScene方法，根据指定的路由来渲染

     2. 常用的属性

         1) initialRoute Object  初始化路由
           
           1. 对象格式

              {
                id:"main"
              }

           2. 这个对象主要作为路由的参数

         2) renderScene function  根据每个页面的路由信息返回一个页面并渲染

           1. 函数格式

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

              route: 路由

              navigator: 导航器，帮助我们做页面切换

              <MySceneComponent> 页面

           2. 只要涉及到页面切换都会调用这个方法，包括首页。比如，当首页加载时route对象就是initialRoute指定的对象

         3) configureScene function 配置场景动画

             ()=>{

                return Navigator.SceneConfigs .HorizontalSwipeJump;           
             }
              
             可以看这个目录:node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳转的时候的方向)
   
     3. 导航器常用的方法

         1) getCurrentRoutes()

           返回当前路由的列表信息

         2) push(route)    

           导航切换到一个新的页面中，新的页面进行压入栈。通过jumpForward()方法可以回退过去

         3) pop()   

           当前页面弹出来，跳转到栈中下一个页面，并且卸载删除掉当前的页面

         4) replace(route)   

           只用传入的路由的指定页面进行替换掉当前的页面

         5) popToTop()  

           进行弹出页面，导航到栈中的第一个页面，弹出来的所有页面会被卸载删除          
              

实例：

  <Navigator

    initialRoute={{name:componentName,component:component}}
    configureScene={()=>{
        return Navigator.SceneConfigs.PushFromRight;
    }}
    renderScene={(route,navigator)=>{
        let Component = route.component;
        return <Component {...route.passProps} navigator={navigator}/>;
    }}

 />