如何使 tabBarNavigator 的屏幕在 TabBar 上不可见?
How to make screen from tabBarNavigator invisible on TabBar?
我使用的是 react-navigation 版本 3.x。如何使 tabBarNavigator 的屏幕在 TabBar 上不可见?
我需要从 tabBar 中删除主屏幕(它应该是不可见的)但是 TabBar 必须在主屏幕上。
我的屏幕结构如下:
const AppStackNavigator = createStackNavigator({
loginFlow: {
screen: createStackNavigator({
intro: { screen: Intro },
login: { screen: Login },
registration: { screen: Registration }
})
},
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someTab: {
screen: createBottomTabNavigator({
main: { screen: Home },
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
}
});
你的问题措辞怪异,但我会根据我的两种解释给你答案:
如果您想要从标签栏中删除一个屏幕,只需将其注释掉即可:
// main: { screen: Home },
如果您希望主屏幕与标签栏的其余部分位于同一堆栈中,但不希望它显示在标签栏中,您可以将其嵌套在 switchNavigator
中:
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someSwitch: createSwitchNavigator({
main: { screen: Home },
someTab: {
screen: createBottomTabNavigator({
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
})
}
其实我只是用了自己的TabBar组件。只需要使用 tabBarComponent
属性。
我使用的是 react-navigation 版本 3.x。如何使 tabBarNavigator 的屏幕在 TabBar 上不可见?
我需要从 tabBar 中删除主屏幕(它应该是不可见的)但是 TabBar 必须在主屏幕上。
我的屏幕结构如下:
const AppStackNavigator = createStackNavigator({
loginFlow: {
screen: createStackNavigator({
intro: { screen: Intro },
login: { screen: Login },
registration: { screen: Registration }
})
},
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someTab: {
screen: createBottomTabNavigator({
main: { screen: Home },
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
}
});
你的问题措辞怪异,但我会根据我的两种解释给你答案:
如果您想要从标签栏中删除一个屏幕,只需将其注释掉即可:
// main: { screen: Home },
如果您希望主屏幕与标签栏的其余部分位于同一堆栈中,但不希望它显示在标签栏中,您可以将其嵌套在 switchNavigator
中:
mainFlow: {
screen: createStackNavigator({
// settings: { screen: SettingsScreen },
someSwitch: createSwitchNavigator({
main: { screen: Home },
someTab: {
screen: createBottomTabNavigator({
Tab1: { screen: Tab1 },
Tab2: { screen: Tab2 },
Tab3: { screen: Tab3 },
Tab4: { screen: ChatMain }
})
}
})
})
}
其实我只是用了自己的TabBar组件。只需要使用 tabBarComponent
属性。