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

我需要

OtherStack

来包含

BottomTabNavigator

，但它在上面不可见。我只想在

抽屉中访问它

，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;

给你：

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 }
);

如果要隐藏主选项卡的底部栏，需要将其设置为这样。

给您：

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 }
);

---

如果要隐藏主选项卡的底部栏，需要这样设置。

可以通过在项目导航选项中将抽屉标签设置为空来实现：

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

---

您可以通过在项目导航选项中将抽屉标签设置为null来实现这一点：

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

---

这不是我想要的结果。更具体地说，当我在OtherStack中时，我应该在BottomTab中有Home和Settings，OtherStack本身不会出现或出现在任何其他屏幕上。问题是，现在它在所有屏幕上都是可见的，并且看不到。您可以仅为OtherStack部分设置此选项。然后它在任何地方都不可见，但如果我只将此选项设置为

OtherStack

part，当我进入OtherScreen时，它将隐藏整个底部选项卡，对吗？我希望

其他

项始终隐藏，但其他项通常可见。这不是我想要的结果。更具体地说，当我在OtherStack中时，我应该在BottomTab中有Home和Settings，OtherStack本身不会出现或出现在任何其他屏幕上。问题是，现在它在所有屏幕上都是可见的，并且看不到。您可以仅为OtherStack部分设置此选项。然后它在任何地方都不可见，但如果我只将此选项设置为

OtherStack

part，当我进入OtherScreen时，它将隐藏整个底部选项卡，对吗？我希望

其他

项目始终处于

隐藏状态

，但其他项目通常可见。