如何使用 navigation.navigate 导航到新页面，而无需在 react native 中使用选项卡栏

Question

我在其中一个选项卡中有一个选项卡导航和导航栏。我想导航到下一个屏幕。我在 https://snack.expo.io/@react-navigation/stacks-in-tabs 中试用了本教程，并在代码中添加了这一行：

static navigationOptions = ({navigate, navigation}) => ({
title: "NOTIFICATION HISTORY",
headerTitleStyle: {
fontWeight: "bold",
color: Colors.tintColor,
alignSelf: "center"
},
headerStyle: {
backgroundColor: "white",
shadowOpacity: 0,
shadowOffset: {
height: 0
},
shadowRadius: 0,
borderBottomWidth: 0,
elevation: 0
} 
});

export const NotiStackNavigator = StackNavigator(
{
Noti: {
screen: NotiScreen
},
NotiHistory: {
screen: NotiHistScreen
}
},
{
navigationOptions: () => ({
// gesturesEnabled: false,
headerTitleStyle: {
fontWeight: "bold",
color: Colors.tintColor,
alignSelf: "left"
},
headerStyle: {
backgroundColor: "white",
shadowOpacity: 0,
shadowOffset: {
height: 0
},
shadowRadius: 0,
borderBottomWidth: 0,
elevation: 0
}
})
}
export const MainTabNavigator = TabNavigator(
{
Home: {
screen: HomeStackNavigator
},
Noti: {
screen: NotiStackNavigator
},
Settings: {
screen: SettingsScreen
}
},
{
navigationOptions: ({ navigation }) => ({
// Set the tab bar icon
tabBarIcon: ({ focused }) => {
const { routeName } = navigation.state;
let iconName;
switch (routeName) {
case "Home":
iconName = "home";
break;
case "Noti":
iconName = "bell-o";
break;
case "Settings":
iconName = "cog";
}
return (
<FontAwesome
name={iconName}
size={24}
color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
);
}
}),
// Put tab bar on bottom of screen on both platforms
tabBarComponent: TabBarBottom,
tabBarPosition: "bottom",
// Disable animation so that iOS/Android have same behaviors
animationEnabled: false,
swipeEnabled: false,
// Show the labels
tabBarOptions: {
showLabel: true,
activeTintColor: Colors.tabIconSelected,
inactiveTintColor: Colors.tabIconDefault,
style: {
backgroundColor: Colors.tabBar
}
}
}
);

我可以让选项卡和导航继续。当导航转到下一个屏幕时，选项卡仍然存在，选项卡的名称更改为新的 屏幕的名称。进入下一个屏幕时如何摆脱标签？

Answer 1

在 StackNavigator 的详细信息屏幕中，替换为以下行：

Details: { screen: DetailsScreen, navigationOptions: { tabBarVisible: false  } },

或将其设置为导航中特定屏幕的道具选项