React native 反应导航5，在第二个堆栈屏幕上隐藏底部选项卡栏？

我正在开发一个有堆栈导航和底部选项卡导航的应用程序，我需要在第一个堆栈屏幕中显示底部选项卡栏，但在第二个屏幕中不显示。以下是我的导航代码：

const BottomTab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
    <NavigationContainer>
      <BottomTab.Navigator>
        <BottomTab.Screen name='StackNavigation' component={StackNavigation} options={{
          tabBarButton: (props) => <BottomTabStyle label='home' {...props} />,
        }} />
        <BottomTab.Screen name='SecondTab' component={SecondTab} options={{
          tabBarButton: (props) => <BottomTabStyle label='shoppingBag' {...props} />,
        }} />
        <BottomTab.Screen name='Offers' component={Offers} options={{
          tabBarButton: (props) => <BottomTabStyle label='discount' {...props} />,
        }} />
        <BottomTab.Screen name='Profile' component={Profile} options={{
          tabBarButton: (props) => <BottomTabStyle label='profile' {...props} />,
        }} />
      </BottomTab.Navigator>
    </NavigationContainer>
  )
}

const BottomTab=createBottomTabNavigator（）；
const BottomTabNavigator=（）=>{
返回(
,
}} />
,
}} />
,
}} />
,
}} />
)
}

下面是我的堆栈导航：

const StackNavigator = createStackNavigator();

const StackNavigation = () => {
  return (
    <StackNavigator.Navigator>
      <StackNavigator.Screen name="Home" component={Home} options={{ headerShown: false }} />
      <StackNavigator.Screen name="CardDetails" component={CardDetails} options={{ headerShown: false }} />
      <StackNavigator.Screen name="OfficeDetails" component={OfficeDetails} options={{ headerShown: false }} />
    </StackNavigator.Navigator>
  );
}

const StackNavigator=createStackNavigator（）；
常量堆栈导航=（）=>{
返回(
);
}

---

此代码正在工作，但仅适用于第一个堆栈导航，对于OfficeDetails页面，我需要隐藏我的选项卡栏。如何实现这一点？

默认情况下，您必须将

BottomTabNavigator

navigator作为组件传递到

StackNavigationWithTabs

并导出

StackNavigationWithoutTabs

const StackNavigationWithTabs=createStackNavigator（）；
const StackNavigationWithTabs=（）=>{
返回(
);
}

const BottomTab=createBottomTabNavigator（）；
const BottomTabNavigator=（）=>{
返回(
,
}} />
,
}} />
,
}} />
,
}} />
)
}

const StackNavigator=createStackNavigator（）；
const stackNavigationwithout选项卡=（）=>{
返回(
);
}

感谢您的回答，但此解决方案也将从第一个堆栈屏幕（CardDetails）中删除选项卡栏。我已更新了我的答案，请检查并让我了解此方法。双堆栈导航是此锁的关键。非常感谢。