react-navigation 动态修改 tabBar 样式

使用react-navigation 做路由系统，由于react-navigation自己集成了redux，导致我们想要通过state动态修改tabBar变得很困难，google上也有蛮多问怎么动态修改的，但是都没有答案，于是就特意去看了文档，发现react-navigation提供了一种方法可以实现(我用的V1.5)

现在就分享给大家怎么实现上滑隐藏下方的 tabBar
首先我们在初始化react-navigation 的页面会有这个设置初始样式的步骤

image.png

然后react-navigation 提供了一个属性给我们给每个screen 自定义tabBar的样式

image.png

就是这个 navigationOptions，可以用来合并公共的样式，这个属性可以有两种形式，一种就是直接就是一个对象，另外一种就是这样一个回调函数。返回的是个对象就可以了。
这个函数的参数默认有三个参数，我们这里只要去navigation这个就可以了。

接下来就很快了
首先我们要用到params（为什么用它？因为我只找到了这一种方法），因为页面刚加载的时候params是个undefined, 所以我们判断一下，然后就给需要动态修改的属性赋值吧（如上图所示）。

这样我们就完成了绑定的问题，那怎么来修改呢？
这个问题问的很好！
组件提供了这个api用来修改params

image.png

所以我们就在事件里用它就可以了，如下图

image.png

这样我们的上拉隐藏tabBar，下拉显示就完成了！