react-native 之 Navigator

大家都知道，在 react-native 中若要使用导航的话，有两种选择：

• Navigator
• NavigatorIOS

从 API 的写法上也能够看出来，NavigatorIOS 只针对 iOS 平台有限，那么在开发中，若要兼容 iOS 与 Android 两个平台的话，选择 NavigatorIOS 就不是那么明智了。当然了，在使用方面，NavigatorIOS 会更加方便和具体，在 UI 和 属性 设置方面更加接近 iOS

在这里针对 Navigator 的使用做一些记录。

render() {
    return (
         {
            return 
        }}
        navigationBar={
            
        } />
    );
}  

从上面的代码中可以看出使用了 Navigator 的几大要素：

• initialRoute: 定义启动时加载的路由, 与 initialRouteStack 二者之中必须要实现一个。
• configureScene: 用来配置场景动画和手势。可选，默认为 Navigator.SceneConfigs.PushFromRight。
• renderScene: 必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。
• ** navigationBar**: 导航栏，可选。

这里主要对导航栏的实现提供两种方式：

1. 直接在 Navigator 里配置 navigatorBar 属性：这时候要配置 routeMapper , routeMapper 是一个对象，属性名必须是 LeftButton, RightButton, Title 。

   class NavigationBar extends Navigator.NavigationBar {
      render() {
        let routes = this.props.navState.routeStack;
        if (routes.length) {
          let route = routes[routes.length -1];
          if (route.display === false) {
              return null;
          }
        }
        return super.render();
      }
    } // 从这个 class 中可以看出，navigationBar 属性已经帮我们实现了一个导航栏了，如果不想要的话，可以直接返回 null。
   
    routeMapper = {
      LeftButton: (route, navigator, index, navState) => {
         if (route.index > 0) {
            return (
                 {if (index > 0) {navigator.pop()}}}>
                     Back
                
             );
         } else {
              return null
         }
       },
       RightButton: (route, navigator, index, navState) => {
          return null;
       },
       Title: (route, navigator, index, navState) => {
           return ({route.title});
       }
    };   
   

2. 不提供 navigationBar，这样实际上是没有导航栏的，但是我们可以在每个页面单独配置自己的 “导航栏”。

   export default class Header extends Component {
      render() {
        let obj = this.props.initObj;
        return (
          
             this._pop()}>
                
                {obj.backName}
            
   
            
                {obj.title}
            
        
        );
      }
   
       _pop() {
          this.props.navigator.pop();
       }
    }
   

上面的代码是将头部封装起来，然后在需要应用的页面直接使用：

参考这里。