底部选项卡导航器隐藏项目可见性

Question

我需要OtherStack来包含BottomTabNavigator但它在上面不可见。我只想在Drawer中访问它，React Native 中的导航对我来说太混乱了。

我得到的最接近的结果是，OtherStack可以通过抽屉访问并且还包含BottomTab，但它是可见的，我不想要它。

// Stacks
const LogInStack = createStackNavigator({
Login: {
screen: LoginScreen,
},
});
const HomeStack = createStackNavigator({
Home: {
screen: HomeScreen,
},
HomeDetail: {
screen: HomeDetailScreen,
},
});
const SettingsStack = createStackNavigator({
Settings: {
screen: SettingsScreen,
},
SettingsDetail: {
screen: SettingsDetailScreen,
},
});

const OtherStack = createStackNavigator({
OtherStack: {
screen: OtherScreen,
},
});
// Bottom tab
const MainTabs = createBottomTabNavigator(
{
Home: {
screen: HomeStack,
},
Settings: {
screen: SettingsStack,
},
// Other is here because it should contain bottomTabBar,
// but Other should not be visible here, only in Drawer can I access it.
Other: {
screen: OtherStack,
},
},
);
// Drawer
const MainDrawer = createDrawerNavigator(
{
Home: {
screen: MainTabs,
},
},
{
contentComponent: DrawerComponent,
}
);
// Switch auth
const App = (isSigned = false) =>
createAppContainer(
createSwitchNavigator(
{
Auth: {
screen: LogInStack,
},
App: {
screen: MainDrawer,
},
},
{
initialRouteName: isSigned ? 'App' : 'Auth',
}
)
);
export default App;

Answer 1

你去吧：

const defaultNavigationOptions = {
tabBarVisible: false,
header: null
};

您可以使用此代码段隐藏底部栏。代码中的示例：

// Bottom tab
const MainTabs = createBottomTabNavigator(
{
Home: {
screen: HomeStack,
},
Settings: {
screen: SettingsStack,
},
// Other is here because it should contain bottomTabBar,
// but Other should not be visible here, only in Drawer can I access it.
Other: {
screen: OtherStack,
},
},
{ defaultNavigationOptions }
);

如果要隐藏MainTabs的底部栏，则需要这样设置。

Answer 2

您可以通过在项目导航选项上将抽屉标签设置为 null 来实现此目的：

// Bottom tab
const MainTabs = createBottomTabNavigator(
{
Home: {
screen: HomeStack,
},
Settings: {
screen: SettingsStack,
},
Other: {
screen: OtherStack,
navigationOptions: () => {
return {
drawerLabel: () => null,
}
}
},
},
);