在嵌套堆栈导航中隐藏自定义选项卡

Question

我有一个如下所示的标签栏。在每个选项卡中，我都有一个嵌套的堆栈导航器。每当堆栈不在其初始路线上时，我想隐藏标签栏。在文档中，说明应该将堆栈放在初始堆栈导航器中。

https://reactnavigation.org/docs/hiding-tabbar-in-screens/

但是，这没有意义，因为我有我的注册和客户未登录的所有路线，我认为将整个应用程序放在一个堆栈导航器中是违反直觉的。此外，它首先削弱了使用选项卡导航的目的。

我也试过 tabBarVisible 道具并有条件地改变它。但是，这给我带来了一些问题。首先，它似乎不适用于 mu 自定义 tabBar。此外，它为我提供了每个渲染的每个选项卡的状态。因此它会导致一些不需要的行为。最后，文档中不推荐这样做。

<Tab.Navigator
 tabBar={props => (
  <TabBar
     onPress={tabIndex => changeTab(tabIndex, props)}
     display={false}
     values={[
       { title: "Balance", icon: 'view-dashboard'},
       { title: "Faktura", icon: 'file-pdf'},
       { title: "Rabatter", icon: 'gift'},
       { title: "Profil", icon: 'account-details'},
       { title: "Mere", icon: 'dots-horizontal' }
     ]}/>
   )}>
  <Tab.Screen
  name="Balance"
  component={BalanceStackNavigator}
  />
  <Tab.Screen
  name="Invoice"
  component={InvoiceStackNavigator}
  />
  <Tab.Screen
  name="BlueBenefit"
  component={BlueBenefitStackNavigator}
  />
  <Tab.Screen
  name="User"
  component={UserStackNavigator}
  />
  <Tab.Screen
  name="CrossSale"
  component={CrossSaleStackNavigator}
  />
</Tab.Navigator>

所以基本上我的问题是，如何以最佳方式实现不在初始路线上时隐藏选项卡的行为？

Answer 1

我最终使用了文档推荐的方法，即将我的所有屏幕放在我的应用程序堆栈中，而不是单独的嵌套堆栈中。

在嵌套堆栈导航中隐藏自定义选项卡

Hidding custom tabbar in nested stack navigation

react-native

react-native-navigation

expo