react-navigationでページ毎にtabの背景色とかactiveTintColorを変えたい的なお話

React Nativeで公式推奨されているreact-navigationを使って開発しているんだけれども、
困ったことにreact-navigationで微妙に欲しい機能がなかったりする。
そのうちの一つがtabStyleのOverrideというか上書きというかなんというか。

各ScreenのnavigationOptionsでtabBarOptionsも上書きできればいいんだけどできないわけで。
ってことで今回はtabBarの設定をscreen毎に変更する的なお話をば。

こちらがgist：react-navigationのtabNavigatorの背景色を変更する
ソースコードはこんな感じ。

ざっくり説明すると、tabBarComponentをカスタムで設定してあげるっていう感じ。
もちろん1から書くのは面倒なので、既存のtabBarBottomを上書きしてあげる感じ。
今現在がどのtabIndexであるかを見て、変更したいところでstyleを上書きしてあげる的な。
もちろんtintColorとかも上書きできるし、tabBarOptionsに記述するものも多分ほぼここにpropsとして渡るはず。

ってな感じでやってあげればなんとかなる感じ。
もうちょっとカスタマイズ性があるライブラリだったりすると便利だけどまぁしょうがないよね的なみたいな。