前言

这十篇学完以后你已经了解了RN开发的基本模式和基本模块，后面我们再写一个小项目，就结束本阶段的RN学习。本篇的内容如下：

• TabNavigator
• Navigator

一、TabNavigator

• TabNavigator就是我们QQ上下面的用来切换页面的一排按钮，RN里有一个TabBarIOS组件，专门用来做iOS的开发的，android的目前还没有，我们需要解决第三方的模块来实现这个功能

• 在项目中安装TabNavigator模块

  1. 将命令行定位到当前项目的路径

  2. 安装

      npm install react-native-tab-navigator --save
     

  3. 引入组件

      //引入tabbar支持包  
      import TabNavigator from 'react-native-tab-navigator';
     

  4. 相应组件的意义

      <TabNavigator>组件指的就是下面那个横条
     
      TabNavigator.Item是每一个横条中的每一个选项
     
      <TabNavigtor.Item></TabNavigator.Item>中间放一个View做为这个选项卡对应的组件
     

• 基本使用

  //tabBarStyle设置下面横条的样式
  <TabNavigator tabBarStyle={{style}}>
  
        <TabNavigator.Item 
  
         //指定的函数返回一个icon作为未选中时的icon
         renderIcon: PropTypes.func 
         //指定的函数返回一个icon作为选中时的icon
         renderSelectedIcon: PropTypes.func
  
         //角标数字
         badgeText: string 
         //角标的icon
         renderBadge: PropTypes.func
  
         //标题
         title: PropTypes.string
         //默认标题的样式 
         titleStyle: Text.propTypes.style
         //选中标题的样式
         selectedTitleStyle: Text.propTypes.style
  
         //tab的样式  
         tabStyle: View.propTypes.style
  
         //当前选项卡是否被选中 
         selected: PropTypes.bool
  
         //点击事件 
         onPress: PropTypes.func
         
       >
  
         {homeView}
  
       </TabNavigator.Item>
  </TabNavigator> 
  

• 源码示例

二、Navigator

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

• 常用的属性

  1. initialRoute Object 初始化路由

  • 对象格式
    {
    id:"main"
    }

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

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

  • 函数格式

    (route,navigator)=><MySceneComponent title={route.title} navigator={navigator}>
    
       route: 路由
    
       navigator: 导航器，帮助我们做页面切换
    
       <MySceneComponent> 页面
    

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

  3. configureScene function 配置场景动画

  ()=>{
  
       return Navigator.SceneConfigs .HorizontalSwipeJump;           
  }
          
  可以看这个目录:node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳转的时候的方向)
  

• 导航器常用的方法

  1. getCurrentRoutes()

     返回当前路由的列表信息
     

  2. push(route)

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

  3. pop()

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

  4. replace(route)

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

  5. popToTop()

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

  6. 其他方法

     5) jumpBack()    
     
           该进行回退操作  但是该不会卸载(删除)当前的页面
     
     6) jumpForward()   
     
            进行跳转到相当于当前页面的下一个页面
     
     7) jumpTo(route)    
     
             根据传入的一个路由信息，跳转到一个指定的页面(该页面不会卸载删除)
     
     8) replaceAtIndex(route,index)     
     
             传入路由以及位置索引，使用该路由指定的页面跳转到指定位置的页面
     
     9) replacePrevious(route)    
     
             传入路由，通过指定路由的页面替换掉前一个页面
     
     10) resetTo(route)  
     
          进行导航到新的界面，并且重置整个路由栈
     
     11) immediatelyResetRouteStack(routeStack)   
     
             该通过一个路由页面数组来进行重置路由栈
     
     12)popToRoute(route)   
     
           进行弹出相关页面，跳转到指定路由的页面，弹出来的页面会被卸载删除
     

• 源码示例