一、导航栏分类

StackNavigator: 类似于普通的Navigator，实现不同的页面进行跳转
TabNavigator: 屏幕上方或下方的标签栏，不同的tabs互相切换。
DrawerNavigator: 抽屉效果，侧边滑出

二、TabNavigator的应用

1. 这里根组件是定义一个栈导航，在栈导航中嵌套了一个标签导航TabNavigatorDemo

const Root =StackNavigator(
  {
    DemoCollections:{screen:DemoCollections},
    IntelligentPage:{screen:IntelligentPage},
    NavBarDemo2:{screen:NavBarDemo2},
    NavBarDemo:{screen:NavBarDemo},
    AnimateDemo:{screen:AnimateDemo},
    AnimateDemo2:{screen:AnimateDemo2},
    TabViewExample:{screen:TabViewExample},
    ListViewSwiper:{screen:ListViewSwiper},
    FlatListDemo:{screen:FlatListDemo},
    TabNavigatorDemo:{screen:TabNavigatorDemo} //栈导航嵌套标签导航
  },
  {
    initialRouteName:'DemoCollections',
    headerMode:'none' //让导航栏隐藏
  }
);


AppRegistry.registerComponent('Wuba', () => Root);

2.标签导航TabNavigatorDemo的设置如下

const  TabNavigatorDemo = TabNavigator({
  Chat:{screen:Chat},
  Tong: {screen: Tong},
  Find: {screen: Find}
},{
  tabBarPosition: 'bottom', //设置标签栏在屏幕最上方还是最下方
  swipeEnabled: true,//是否允许通过手势滑动来切换标签页
  animationEnabled: true,//标签页切换时是否有动画效果
  lazy: true,//是否只渲染需要显示的标签页
  initialRouteName:'Tong',//初始标签页的名称
  backBehavior: 'none',//Android默认返回initialRouteName指向的标签页，将backBehavior指向为非initialRouteName值将让返回键直接结束应用
  tabBarOptions: //用来配置标签栏
    {
    activeTintColor: '#4BC1D2', //标签栏激活时的染色
    inactiveTintColor: '#000', //标签非栏激活时的染色
    showIcon: true, //是否显示标签图标
    showLabel: true, //是否显示标签栏
    upperCaseLabel: false,//标签英文是否大写
    pressColor: '#788493',//android按下时涟漪效果的颜色
    pressOpacity: 0.8,//按下标签时的透明度
    style: {//标签栏样式
      backgroundColor: '#fff',
      height:60
    },
    labelStyle: {//标签样式
      fontSize: 12
    },
    indicatorStyle: {height: 0}
  }
});

其中TabNavigator（RouteConfigs,TabNavigatorConfig)接口的RouteConfigs部分和StackNavigator的完全一样。TabNavigatorConfig的各个参数如代码注释

3.导航路由组件的代码示意

class Chat extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>聊天界面</Text>
      </View>
    );
  }
  static navigationOptions = {
    tabBarLabel: '聊天',
    tabBarIcon: ({ focused }) =>
    {
      if (focused) {
        return (
          <Image style={styles.tabBarIcon} source={{uri:'https://img.58cdn.com.cn/escstatic/fecar/pmuse/intelligent_guide/sellcar.png'}}/>
        );
      }
      return (
        <Image style={styles.tabBarIcon} source={{uri:'https://img.58cdn.com.cn/escstatic/fecar/pmuse/inteliigent_guide/%E4%BC%B0%E8%BD%A6%E4%BB%B7%E5%BA%95%E9%83%A8%E5%B0%8F%E5%9B%BE@2x.png'}}/>
      );
    },
  };
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  tabBarIcon: {
    width: 30,
    height: 30
  }
});

最终效果如下图