Question

我需要OtherStack来包含BottomTabNavigator，但是它不可见。我只想在Drawer中访问它，React Native中的导航令我感到困惑。

我得到的最接近的结果是Drawer访问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
};

您可以使用此代码段隐藏bottomBar。代码示例：

// 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

您可以通过将NavigationOptions上的抽屉标签设置为null来实现此目的：

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

BottomTabNavigator隐藏项目可见性

2 个答案: