好記性不如爛筆頭!\ⅰ鸳劳!實(shí)現(xiàn)效果如下:
上一篇就可以輕松搞定任務(wù)版、工作臺(tái)歧强、主頁(yè)、我的這四個(gè)TabBarItem,現(xiàn)在主要解決的是中間的加號(hào)按鈕脓斩。
中間的加號(hào)按鈕是一張圖片,直接使用的TabBarIOS.Item畴栖。如果不設(shè)置title随静,效果如下:
不管怎樣設(shè)置style,都沒(méi)法讓它在垂直方向上居中顯示吗讶。
閑著沒(méi)事想著能不能直接給TabBarIOS.Item添加一個(gè)屬性控制原生UITabBarItem.imageInsets的top和bottom實(shí)現(xiàn)這樣的效果燎猛,所以就有了這篇筆記。
先去看了看折騰范兒の味精的文章照皆,相關(guān)系列總共三篇重绷。
下面是簡(jiǎn)單的幾個(gè)步驟:
1、用Xcode打開(kāi)項(xiàng)目(xxxx.xcodeproj)膜毁,然后在Libraries/React/Views下找到RCTTabBarItem昭卓,在h文件中添加你想要的屬性愤钾,比如verticalOffset。然后在m文件中重寫該屬性的setter方法候醒。
- (void)setVerticalOffet:(CGFloat)verticalOffet {
_verticalOffet = verticalOffet;
self.barItem.imageInsets = UIEdgeInsetsMake(_verticalOffet, 0, -_verticalOffet, 0);
}
//UIEdgeInsets UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)
2绰垂、在RCTTabBarItemManager.m文件中使用RCT_EXPORT_VIEW_PROPERTY暴露該屬性。
RCT_EXPORT_VIEW_PROPERTY(verticalOffet, CGFloat)
3火焰、在node_modules/react-native/Libraries/Components/TabBarIOS找到TabBarItemIOS.ios.js文件劲装,在propTypes中添加verticalOffet屬性,并設(shè)置類型為number類型昌简。
verticalOffet : React.PropTypes.number
就這些步驟占业,然后在你需要使用的地方直接加上這個(gè)屬性就行了。
<TabBarIOS.Item icon={ require("./tabbar_plus.png") } renderAsOriginal={true} verticalOffet={6}>
<Test/>
</TabBarIOS.Item>