react-native之navigatorIOS和tabbarIOS联合使用以及详情页面隐藏tabbar

项目需求，没有react-native基础的我，花了一周撸了一个项目，总结一下，就是满满的知识点啊。

这一篇主要讲一下navigatorIOS和tabbarIOS联合使用。说实话，官网的教程真的挺难理解的。

先上两张图：

首页

搜索页面

首页有tabbar和navigator，跳转搜索页隐藏navigator。

实现思路：

1.tabbar和navigator的联合使用

我是将tabbar和navigator放在一个组件里面，在app.js里面引用

app.js

在组件里面：

   如果需要navigator和tabbar联合使用，需要将NavigatorIOS嵌套在TabBarIOS.Item中

如图：

联合使用

2.搜索页隐藏tabbarIOS

利用tabbarIOS的marginBottom来达到隐藏的目的

隐藏tabbar

然后在组件里面定义一个方法，实现tabbar的显示和隐藏

隐藏和显示方法

bottom可以根据hiddenTab来定义数值  let bottom = this.state.hiddenTab == true ? -100 : 0;

在搜索页隐藏tabbar首先要将隐藏和显示的方法通过passProps传给搜索页面

传递方法

接着搜索的页面接受到方法后：生命周期开始时，隐藏tabbar；生命周期结束时，显示tabbar

显示，隐藏tabbar

到此，react-native之navigatorIOS和tabbarIOS联合使用以及详情页面隐藏tabbar就实现了，因为才学习了一周所以还有很多不足，最近才看了react-navigation感觉很强大。联合使用和隐藏tabbar以及一些自定义导航都比较全面。这个功能会用react-navigation在写一遍，到时候应该会简单很多。

如有不足，敬请指教~