注意：該組件已廢除，因?yàn)?React Navigation 默認(rèn)的 BottomTab 也做了同樣的處理，所以該組件必要性不大了。

默認(rèn)支持了 badge 角標(biāo)功能，移除了原版的 tabBarOptions 屬性，將 tabBarOptions 屬性合并到 options 中了，即支持在任意 Screen 設(shè)置原 tabBarOptions 支持的屬性

<Tab.Navigator
    initialRouteName={String}
    backBehavior={String}
    lazy={}
    tabBar={}

    screenOptions={}
    injectTabs=[]
>
  <Tab.Screen
      name={String}
      listeners={}
      component={}
      initialParams={}

      options={}
  />
</Tab.Navigator>

一、 屬性說明

與原版相同，作用如下：

• initialRouteName ：載入時(shí)顯示的頁面
• backBehavior ：在 Tab 界面時(shí)， 響應(yīng) android 物理返回鍵的方式
  • initialRoute: 返回到 initialRouteName 定義的頁面
  • order: 跳轉(zhuǎn)到前一個(gè) tab 頁面
  • history: 跳轉(zhuǎn)到上次瀏覽的 tab 頁面
  • none: 不監(jiān)聽
• lazy：是否懶加載頁面，在進(jìn)入 tab 頁面時(shí)才開始渲染（默認(rèn) true）
• tabBar：自定義 Bottom Tab Bar 組件
• screenOptions 是 Screen.options 的默認(rèn)配置，二者屬性值完全相同，下面會(huì)說明
• injectTabs 可以向 tabBar 注入自定義按鈕。

說明：screenOptions 、injectTabs 包括 Screen.options 屬性僅針對默認(rèn) tabBar，若自定義 tabBar，屬性無效

二、screenOptions / Screen.options

定義方式

options || screenOptions = {
    activeOpacity, activeTintColor, activeBackgroundColor, ........
}

// 或通過函數(shù)返回
options || screenOptions = { ({route, navigation}) => {
    return {
       activeOpacity, activeTintColor, activeBackgroundColor, ........
    }
}}

以下屬性為原版的 tabBarOptions 支持屬性，現(xiàn)在將其轉(zhuǎn)移到了 options 中，這些屬性無論是在 Navigator.screenOptions 或 Screen.options 中定義，都將影響整個(gè) TabBar，比如在某一個(gè) Screen.options 定義 props.showIcon=false，那么 TabBar 上的所有 Tab 都不再顯示 Icon 圖標(biāo)，而不是僅僅是所屬 Screen 的 Tab 隱藏 Icon；

activeTintColor

處于激活狀態(tài)的 Tab 字體顏色

• activeBackgroundColor: 處于激活狀態(tài)的 Tab 背景顏色
• inactiveTintColor: 未激活的 Tab 字體顏色
• inactiveBackgroundColor: 未激活的 Tab 背景顏色
• showLabel: 是否顯示 Tab 中的文字
• allowFontScaling: 是否允許文字隨系統(tǒng)字體大小進(jìn)行縮放
• showIcon: 是否顯示 Tab 中的圖標(biāo)
• adaptive: 默認(rèn)情況下，Tab 中的圖標(biāo)/文字為上下排列；如果屏幕寬度大于 768 （如平板）或手機(jī)處于橫屏狀態(tài)，Tab 的圖標(biāo)/文字排列方式將自動(dòng)轉(zhuǎn)為左右排列；可使用 adaptive=false 關(guān)閉該特性
• labelPosition: 強(qiáng)制指定 Tab 中圖標(biāo)/文字的排列方式，若設(shè)置，adaptive 屬性失效，可用值：
  • below-icon - 上下排列
  • beside-icon - 左右排列
• keyboardHidesTabBar: 是否在鍵盤彈出的時(shí)隱藏 TabBar，默認(rèn)為 false
• safeAreaInset: 安全區(qū)域設(shè)置，默認(rèn)為 { bottom: 'always', top: 'never' }；可用屬性有 top | bottom | left | right，可用設(shè)置有 'always' | 'never'
• style: 自定義 TabBar 樣式
• tabStyle: 自定義 Tab 樣式
• labelStyle: 自定義 Tab 中的文字所在的 View 容器的樣式
• activeOpacity: 按下 Tab 時(shí)的透明度，android/iOS 通用，默認(rèn)為 1（即無效果 ）
• rippleColor: 按下 Tab 時(shí)的水波紋顏色，僅在 Android API level 21+ 生效，優(yōu)先級(jí)高于 activeOpacity
• badgeStyle: 自定義 Tab 中角標(biāo)樣式
• dotStyle: 自定義 Tab 中圓點(diǎn)角標(biāo)樣式

以下屬性為 Tab 屬性，一般在 Screen.options 中設(shè)置，僅針對當(dāng)前 Screen 的 Tab；但對于支持函數(shù)的屬性也可以在 Navigator.screenOptions 中設(shè)置，只需根據(jù)參數(shù)返回不同 Tab 屬性即可。

• tabBarIcon: Tab 中的 Icon 圖標(biāo)，屬性值必須為 Function，其中 route 結(jié)構(gòu)參見 官方文檔

tabBarIcon=({
    index: number,  // Tab 序號(hào)
    route: Route,  // Tab 所屬 Screen 的 route
    focused: boolean,  //  當(dāng)前是否處于激活狀態(tài)
    color: string,  // 當(dāng)前顏色（根據(jù) focused 返回的 activeTintColor 或 inactiveTintColor）
    size: number, // 圖標(biāo)大小（由排列方式的不同[上下/左右]返回的推薦值）
}) => {
    
    // 需返回一個(gè) react native 組件
    return ReactComponent;
}

• tabBarLabel: Tab 中的 文字，可直接指定為 string；也可設(shè)置為 Function

tabBarLabel=({
    index: number,  // Tab 序號(hào)
    route: Route,  // Tab 所屬 Screen 的 route
    focused: boolean,  //  當(dāng)前是否處于激活狀態(tài)
    color: string,  // 當(dāng)前顏色（根據(jù) focused 返回的 activeTintColor 或 inactiveTintColor）
    showIcon: boolean,   // 當(dāng)前 Tab 是否顯示 icon
    beside: boolean,   // 當(dāng)前 Tab 是否為圖標(biāo)/文字左右排列
}) => {
   
    // 返回文字 或 react native 組件
    return string || ReactComponent;
}

• badge: 角標(biāo)，支持直接設(shè)置為以下屬性，也支持通過 Function 返回以下屬性:
  • null , 不顯示角標(biāo)
  • Number(0), 顯示為圓點(diǎn)角標(biāo)
  • number|string， 顯示為文字角標(biāo)

badge=({
    index: number,  // Tab 序號(hào)
    route: Route,  // Tab 所屬 Screen 的 route
}) => {
     return null | number | string
}

• tabBarButton: Tab 組件，包裹 tabBarIcon 、 tabBarLabel、badge 的父組件，類型為 Function 或 RN Component

tabBarButton = (props) => {
   return <TouchableOpacity {...props} />
}

• title: 標(biāo)題，僅支持 string，若 Tab Navigator 嵌套在 Stack Navigator 中，會(huì)作為標(biāo)題欄的 title fallback；同時(shí)也作為 tabBarLabel 的 fallback

• tabBarVisible: 隱藏 TabBar，當(dāng)前 Tab 引導(dǎo)進(jìn)入的頁面不想顯示 TabBar 可設(shè)置為 true，需自行在頁面中給予返回的導(dǎo)航按鈕。

• tabBarAccessibilityLabel: 輔助功能標(biāo)簽，當(dāng)用戶點(diǎn)擊選項(xiàng)卡時(shí)，屏幕閱讀器會(huì)讀取該內(nèi)容；若沒有設(shè)置 tabBarLabel 或 showLabel=false，建議設(shè)置該項(xiàng)

• tabBarTestID: 當(dāng)前 Tab 的測試 ID

• unmountOnBlur: 當(dāng)所屬 Screen 被切換走，是否卸載 Screen 組件，再次進(jìn)入時(shí)重建；這樣會(huì)清除之前的狀態(tài)，默認(rèn)為 false

2. 備注

• TabBar 在 “圖標(biāo)/文字上下排列” 時(shí)，style.height=50
• 在 “左右排列” 時(shí)，style.height=40
• options 中自定義的 style 屬性可以通過 style.height 重置 “圖標(biāo)/文字上下排列” 的高度；另外支持一個(gè)不符合規(guī)范的 style.landHeight 同時(shí)設(shè)置 “左右排列” 時(shí)的高度。
• TabBar 的實(shí)際高度為 style.height + safeAreaInset.bottom

三、injectTabs

有時(shí)，需要在 TabBar 顯示一些其他導(dǎo)航元素，比如添加一個(gè) Tab 按鈕，點(diǎn)擊打開另外一個(gè) stack 頁面，或彈出一個(gè)互動(dòng)窗口等；僅靠 Tab.Screen 定義就無能為力了，所以新增一個(gè) injectTabs，可以注入自定義的 Tab 到 TabBar 中。定義方式如下

injectTabs={[
      {
          index:number,  // 插入位置
          tabButton: ReactComponent || (Function  => ReactComponent) // 插入組件
      }
      // 可注入多個(gè)
      ......
]}

// 如
injectTabs={[
  {
      index:3,
      // 注意: tabButton 是在數(shù)組中, 所以需要指定 key 屬性
      tabButton: <View key="xxx" style={{
            flex:1,
            alignItems: 'center',
            justifyContent:"center"
       }><TouchableOpacity style={{
            width:40,
            height:40,
            backgroundColor:'red'
       }} onPress={() => {
           console.log('inject')
       }}/></View>
   }
]}