react-navigation

TabNavigator的使用

　　 定義一個總體的tab屬性

import {TabNavigator,StackNavigator,TabBarBottom} from 'react-navigation'

const MyTab = TabNavigator({
  Home: {
      screen: Main,
      navigationOptions: ({navigation}) => ({  
        tabBarLabel:'主頁'  
      }),  
  },
  Manage: {
      screen: UserManage,
      navigationOptions: ({navigation}) => ({  
        tabBarLabel:'管理'  
      }),  
  },
  Today: {
      screen: UserToday,
      navigationOptions: ({navigation}) => ({  
        tabBarLabel:'今日'  
      }),  
  }
}, {
    tabBarComponent:TabBarBottom,，
    animationEnabled: false, // 切換頁面時是否有動畫效果
    tabBarPosition: 'bottom', // 顯示在底端，android 默認是顯示在頁面頂端的
    swipeEnabled: true, // 是否能夠左右滑動切換tab
    backBehavior: 'none', // 按 back 鍵是否跳轉到第一個Tab(首頁)， none 爲不跳轉
    lazy:true, 
    tabBarOptions: {
        activeTintColor: '#ff8500', // 文字和圖片選中顏色
        inactiveTintColor: '#999', // 文字和圖片未選中顏色
        showIcon: false, // android 默認不顯示 icon, 須要設置爲 true 纔會顯示
        indicatorStyle: {
            height: 0  // 如TabBar下面顯示有一條線，能夠設高度爲0後隱藏
        }, 
        style: {
            backgroundColor: '#fff', // TabBar 背景色
            // height: 30
        },
        labelStyle: {
            fontSize: 20, // 文字大小
        },
    },
});
Main、UserManage、UserToday是react組件

tabBarComponent:TabBarBottom //這一條必定要加，不加跳轉有卡頓，TabBarBottom引用自react-navgition

// 渲染返回定義好的tab
render(){
　　return(<MyTab/>)
}