注意：該組件已廢除，因?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 屬性僅針對(duì)默認(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è)置址遇，僅針對(duì)當(dāng)前 Screen 的 Tab熄阻；但對(duì)于支持函數(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>
   }
]}

React Navigation BottomTab 拓展版

React Navigation BottomTab 拓展版

一瞎暑、屬性說明

二之剧、screenOptions / Screen.options

`activeTintColor`

2. 備注

三、injectTabs

React Navigation BottomTab 拓展版

一瞎暑、 屬性說明

二之剧、screenOptions / Screen.options

activeTintColor

2. 備注

三、injectTabs

一瞎暑、屬性說明

`activeTintColor`