React-Native TabBarIOS笔记

好记性不如烂笔头！！！实现效果如下：

效果图

上一篇就可以轻松搞定任务版、工作台、主页、我的这四个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

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

<TabBarIOS.Item icon={ require("./tabbar_plus.png") } renderAsOriginal={true} verticalOffet={6}>
      <Test/>
</TabBarIOS.Item>