Блог

Я хочу скрыть панель вкладок на некоторых экранах, если быть более точным, на экранах после главного экрана каждой вкладки.

Я использую reac navigation 5 React native с крючками

У меня следующий макет, я использую ящик, вкладки и стек.

Я хочу, чтобы панель вкладок отображалась нормально, когда пользователь останавливается на вкладке корзины покупок, но когда пользователь нажимает кнопку, которая переводит его на другой экран корзины покупок, я хочу, чтобы панель вкладок больше не была видна.

То есть панель вкладок присутствует только на основных экранах вкладок, на других экранах ее не должно быть.

Такое поведение удовлетворительно для Home, но не для других вкладок.

Я действительно ценю любую помощь, я получаю комментарии, предложения и все, что угодно, чтобы сделать этот навигационный дистрибутив намного лучше.

Я сделал это в своем приложении следующим образом:

   import { useFocusEffect } from '@react-navigation/native';

  { ... }

  // Hide parent tab bar on focus
  useFocusEffect(
    useCallback(() => {
      // Do something when the screen is focused
      const parent = dangerouslyGetParent();
      if (parent) {
        parent.setOptions({
          tabBarVisible: false,
        });
      }

      return () => {

      };
    }, [dangerouslyGetParent]),
  );
  

Однако будьте осторожны. Чтобы это действительно работало при использовании navigation.pop() или возврате к предыдущему экрану, вам нужно будет добавить этот же код к компонентам, которые вы хотите убедиться, что панель вкладок отображается, поскольку это изменяет саму конфигурацию навигатора. Таким образом, вы бы просто сделали то же самое на экранах, на которые осуществляется навигация с отключенного экрана панели вкладок с помощью приведенного выше кода sub tabBarVisible: true

Я действительно не нашел лучшего способа из исследования, когда копался. Хотелось бы, чтобы другие решения были более элегантными, но это, по крайней мере, поможет вам начать и функциональность заработает.