在 React Native v.5 中离开某个屏幕时如何隐藏底部选项卡导航器？

Question

我只想在主屏幕中看到底部的标签导航器；之后我希望隐藏底部选项卡导航器，直到用户返回主屏幕。下面是他们提供的示例，但它只提供好像您在 App.js 文件中工作，而我不是。

const Tab = createBottomTabNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
    </Tab.Navigator>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeTabs} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Answer 1

import { createStackNavigator } from '@react-navigation/stack';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Stack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();    

function Screen ({navigation}) { //this is the name of your file
        return (
  <Stack.Navigator>
<Stack.Screen name = "HomeScreen1" component={HomeScreens}/> //This is the name of your function below
 <Stack.Screen 
      name = "Home" 
      component={HomeScreen} 
      options= {{
        title: '',
        headerLeft: () => (
          <Icon.Button name = "md-arrow-back" size={15} backgroundColor= "black" onPress={ () => navigation.navigate('HomeScreens')}> </Icon.Button> //This will let you back after you navigate to the next page
          ),         
      }}/>

...

</Stack.Navigator>

)
}

export default Screen;


function HomeScreens({navigation}){

return(

<Tab.Navigator
...
>

<Tab.Screen 
  name = " " 
  component={LandingScreen} //Screen you want the bottom tab to exist in
  options = {{
   tabBarColor = ({'#fff'}) => (
     <Icon name = "icon-name"
   )
}}
/>

<Tab.Screen 
  name = " " 
  component={LandingScreen2} //Other screen you want the bottom tab to exist in
  options = {{
   tabBarColor = ({'#fff'}) => (
     <Icon name = "icon-name"
   )
}}
/>

</Tab.Navigator>
)
}