特定のページでBottomTabを非表示にしたい

デザインの都合で、ボトムタブを非表示にするページがある

↑今ページの例では、Page数が5つしかないのでこれで十分だが、Page数が多くなってくると、この修正はかなり面倒

まず、Stackを定義している箇所を変える必要があるし、

pushなどのページ遷移関数を呼び出している側も変更の必要がある

どうするか

NavigatorかScreenの2箇所で使用できる

code:ts

<BottomTab.Navigator

screenOptions={({ route }) => ({ // ここか

tabBarVisible: false

})}

<BottomTab.Screen

name='Timeline'

component={Timeline}

options={{ tabBarVisible: false }} // ここ

/>

<BottomTab.Screen name='Shop' />

...

</BottomTab.Navigator>

案1 Reduxを経由しない方法

非表示にしたいページの名前は事前に決まっているので、

Navigator内で、「今表示しているPage名」がわかれば、条件分岐でどうにかできる

案2 Reduxを経由する方法