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

【问题标题】：How do you hide the bottom tab navigator when navigating away from a certain screen in React Native v.5?在 React Native v.5 中导航离开某个屏幕时，如何隐藏底部选项卡导航器？
【发布时间】：2021-01-19 22:26:07
【问题描述】：

我只希望底部标签导航器在主屏幕中可见；之后，我希望隐藏底部的选项卡导航器，直到用户返回主屏幕。下面是他们提供的示例，但它只提供好像您在 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>
  );
}

【问题讨论】：

标签： javascript react-native react-native-navigation react-navigation-bottom-tab

【解决方案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>
)
}

【讨论】：