React-navigation 4.x tabBarButtonComponent的使用和自定義

其實標題不算準確, 這裏的自定義是指 自定義React-navgation4.x 中, bottomTabBar中的幾個可以點擊的
bottomTabbarButton ( 底部tabBar按鈕), 姑且我這樣描述,

參考鏈接:
1.React Navigation 3x系列教程』createBottomTabNavigator開發指南
2.React-navigation4.x 官網
3.自定義react-navigation的TabBarComponent
4.React Navigation（一）-Navigation屬性(API)

先看效果

---

1. 常規的創建 React-navigation (4.x) TabBar

import { createBottomTabNavigator } from 'react-navigation-tabs';
createBottomTabNavigator(RouteConfigs, TabNavigatorConfig);

具體的實現網上也很多

如果要自定義呢?

import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';

const TabBarComponent = props => <BottomTabBar {...props} />;

const TabScreens = createBottomTabNavigator(
  {
    // other screens
  },
  {
    tabBarComponent: props => (
      <TabBarComponent {...props} style={{ borderTopColor: '#605F60' }} />
    ),
  }
);

官網也講的很明白, 就是 通過 tabBarComponent這個參數來返回一個自定義的 TabBarComponent組件,其實就是用 BottomTabBar 這個組件, 來創建, 但是這也僅僅就是用來修改 整個底部tabBar的容器而已, 真正的其中的icon/title , 還需要在各個screen的navigationOptions:{}中做修改

那麼來吧

---

上代碼

 Home: {
        screen: Home,
        navigationOptions: {
           /*----常規的icon/title  -----*/
          tabBarOnPress: ({navigation, defaultHandler}) => {
          //tabBarOnPress 用來在系統自動切換選項卡的時候, 提供一用來插入自己要執行的代碼的鉤子函數
            defaultHandler(); // 如果使用常規方式, 又想在點擊icon的時候做點自定義的事情,就可以在這裏添加一些事件,defaultHandler(); 是系統自己提供的切換選項卡方法, 不寫就無法切換屏幕,
          },
          tabBarLabel: '首頁',
          tabBarIcon: ({focused, tintColor}) => (
            <Image
              style={[styles.im]}
              source={
                focused ? Images.bottomTabBarIcon_mine_show : Images.bottomTabBarIcon_mine_hide
              }
            />
          ),


          /*---- 自定義的api及返回的自定義動畫組件 -----*/
          // tabBarButtonComponent, 用來自定義按鈕和文字的api, 
          // 當實現 tabBarButtonComponent 這個api的時候, react-navigation 自動創建的icon/title就失效
          tabBarButtonComponent: (() =>
            (<BottomBarAnimatedItem
              onPress={() => {
                SetItemsArray(0);
                DeviceEventEmitter.emit('TabBarClick')
                this.navProps.jumpTo("Home")
              }}
              ItemsArray={ItemsArray}
              itemNum={0}
            />)),
        },
      },

上面是一個screen 的具體路由信息及配置, 上面我沒有刪除常規的創建icon/title 的代碼, 是留着做個記錄和備忘

具體整理一下過程吧

1. 首先我們需要改造 createBottomTabNavigator(RouteConfigs, TabNavigatorConfig);這個函數中的TabNavigatorConfig, 添加 tabBarComponent, 用來返回一個自定義底部tabbarComponent 父容器,這樣才能將自定義的icon/title 合理佈局, 不然就會這樣
   

2.其次我們需要改造 createBottomTabNavigator(RouteConfigs, TabNavigatorConfig);這個函數中RouteConfigs中的每個navigationOptions, 通過 tabBarButtonComponentapi來返回我們自定義的動畫組件,

3. 重點, 當我們完成上面兩個步驟, 會發現, 系統自動的切換選項卡的能力失效了, 我猜測也是因爲我們使用了自定義, 可能覆蓋或者讓系統不再創建默認的icon/title 組件, 也就導致無法觸發系統自己的切換能力,
   經過一番查找, 發現我們在第一步的時候, 其實獲取了一個蠻重要的props
   

通過這個props, 我們可以拿到 jumpTo 方法, 就可以實現切換選項卡的功能了

   this.navProps.jumpTo("Home")

---

大致就是以上了, 希望能幫助大家, 也給自己留個記錄,好以後回來翻翻.(^▽)