javascript - 在 React Native v.5 中导航离开某个屏幕时,如何隐藏底部选项卡导航器?
问题描述
我只希望底部标签导航器在主屏幕中可见;之后,我希望隐藏底部选项卡导航器,直到用户返回主屏幕。下面是他们提供的示例,但它只提供好像您在 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>
);
}
解决方案
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>
)
}
推荐阅读
- contour - 如何使用 imshow 作为等高线图来扩展数据
- reactjs - 如何将 react 集成到 Yii2 Basic
- r - 通过共享字符对数据框进行子集化
- python - 每次我在点云上执行加载功能时,我的观点都会改变到点云的中间
- javascript - o's 和 x's 压缩函数
- javascript - 使用带有 jQuery 的 Waypoints/Inview 在所有部分重复相同的命令
- powershell - SAMAccountName 20 个字符或更少
- javascript - ASP.NET Core 和 JavaScript Ajax API 调用另一个主机
- javascript - 画布宽度和高度在移动设备中不起作用
- azure-functions - 完成日志的间歇记录