При разработке мобильных приложений часто встречаются экраны, которые не должны быть видны в главном меню приложения. Эти экраны могут служить определенным целям, например, административным функциям или скрытым функциям. В этой статье мы рассмотрим различные способы добавления экранов, не отображая их в панели, а также приведем примеры кода.

Метод 1: скрытый элемент ящика
Один из способов скрыть экран из ящика — использовать скрытый элемент ящика. Этого можно добиться, создав собственный элемент ящика и установив для него скрытую видимость. Вот пример во Flutter:

Drawer(
  child: ListView(
    children: <Widget>[
      ListTile(
        title: Text('Home'),
        onTap: () {
          // Navigate to the home screen
        },
      ),
      Offstage(
        offstage: true, // Set the visibility to hidden
        child: ListTile(
          title: Text('Hidden Screen'),
          onTap: () {
            // Navigate to the hidden screen
          },
        ),
      ),
    ],
  ),
)

Метод 2. Условная навигация
Другой подход — условный переход к скрытому экрану на основе определенных критериев. Например, вы можете проверить, есть ли у пользователя определенная роль или разрешение, прежде чем переходить к скрытому экрану. Вот пример в React Navigation:

const AppNavigator = createStackNavigator({
  Home: { screen: HomeScreen },
  HiddenScreen: { screen: HiddenScreen },
});
const DrawerNavigator = createDrawerNavigator(
  {
    Home: { screen: AppNavigator },
  },
  {
    contentComponent: CustomDrawerContentComponent,
  }
);
const CustomDrawerContentComponent = (props) => {
  const { navigation } = props;
  const user = getCurrentUser(); // Retrieve user information
  return (
    <View>
      <DrawerItems {...props} />
      {user.role === 'admin' && (
        <TouchableOpacity
          onPress={() => navigation.navigate('HiddenScreen')}
        >
          <Text>Hidden Screen</Text>
        </TouchableOpacity>
      )}
    </View>
  );
};

Метод 3: отдельный стек навигации
Вы также можете создать отдельный стек навигации для скрытого экрана и условно переходить к нему, не включая его в ящик. Вот пример в React Navigation:

const AppNavigator = createStackNavigator({
  Home: { screen: HomeScreen },
});
const HiddenNavigator = createStackNavigator({
  HiddenScreen: { screen: HiddenScreen },
});
const DrawerNavigator = createDrawerNavigator(
  {
    Home: { screen: AppNavigator },
  },
  {
    contentComponent: CustomDrawerContentComponent,
  }
);
const CustomDrawerContentComponent = (props) => {
  const { navigation } = props;
  const user = getCurrentUser(); // Retrieve user information
  return (
    <View>
      <DrawerItems {...props} />
      {user.role === 'admin' && (
        <TouchableOpacity
          onPress={() => navigation.navigate('HiddenScreen')}
        >
          <Text>Hidden Screen</Text>
        </TouchableOpacity>
      )}
    </View>
  );
};

Используя элементы скрытых ящиков, условную навигацию или отдельные стеки навигации, вы можете добавлять экраны в свое приложение, не отображая их в главном ящике. Эти методы обеспечивают гибкость и контроль над видимостью определенных экранов, позволяя легко включать скрытые функции или функции администрирования.