React-Native TabBarIOS笔记

好记性不如烂笔头!!!实现效果如下:

React-Native TabBarIOS笔记_第1张图片
效果图

上一篇就可以轻松搞定任务版、工作台、主页、我的这四个TabBarItem,现在主要解决的是中间的加号按钮。

中间的加号按钮是一张图片,直接使用的TabBarIOS.Item。如果不设置title,效果如下:


图1

不管怎样设置style,都没法让它在垂直方向上居中显示。

闲着没事想着能不能直接给TabBarIOS.Item添加一个属性控制原生UITabBarItem.imageInsets的top和bottom实现这样的效果,所以就有了这篇笔记。

先去看了看折腾范儿の味精的文章,相关系列总共三篇。

下面是简单的几个步骤:
1、用Xcode打开项目(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属性,并设置类型为number类型。

verticalOffet : React.PropTypes.number

就这些步骤,然后在你需要使用的地方直接加上这个属性就行了。


      

你可能感兴趣的:(React-Native TabBarIOS笔记)