Как динамически скрыть TabNavigator в React Native

Question

Итак, у меня есть приложение с реагирующим родным навигатором. Я планирую показать свое приложение, когда пользователь впервые запускает приложение, я использую для него act-copilot , оно отлично работает. , но проблема в том, что для запуска React copilot требуется время, и он запускается ДО реактивного навигатора.

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

Я планирую сделать динамическое отключение навигатора, когда учебник еще не начался. Вот фрагмент кода из navigationOptions для appNavigation

TabMenu.navigationOptions = ({ navigation, screenProps }) => {
  const childOptions = getActiveChildNavigationOptions(navigation, screenProps);
  return {
    title: childOptions.title,
    tabBarVisible: childOptions.tabBarVisible,
    header: null
  };
};

и вот значение stati c для компонента

static navigationOptions = {
    tabBarVisible: false
    }

Это работает, но Проблема в том, что когда учебник заканчивается, и я установил значение c stati true, tabBar не появится. Есть ли способ обойти это?

Заранее спасибо

РЕДАКТИРОВАТЬ: мне нужно уточнить, что мне нужно, чтобы заставить панель вкладок появляться и исчезать на той же странице после определенного действия (в это учебное пособие) завершено без перезагрузки / перехода на ту же страницу

Answer 1

Это как ответ Габриэля

static navigationOptions = ({ navigation, screenProps }) => {
    const { tabBarVisible = true } = navigation.state.params
      ? navigation.state.params
      : {};
  return {
    tabBarVisible: tabBarVisible
  };
};

Поместите параметры навигации в любой элемент вкладки и обновите свойство tabBarVisible следующим образом.

this.props.navigation.setParams({
   tabBarVisible: false
});

Answer 2

Я бы попробовал поместить весь учебник из react-copilot на другую страницу, которая не находится внутри нижней панели навигации или, возможно, даже в модальном режиме (который по умолчанию охватывает все приложение). После того, как инструкции по реагированию второго пилота выполнены, вы можете перейти к нижней панели навигации или отклонить модал.

НОВОЕ ПРЕДЛОЖЕНИЕ ПОСЛЕ КОММЕНТАРИИ:

Я думаю, что вы можете изменить некоторые значения в navigationOptions, выполнив следующее:

static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: navigation.getParam('title', ''),
        }
    };

и затем в функции внутри компонента, вызывающей следующее:

this.props.navigation.setParams({ "title": 'brand new name') })

Это работает для меня в приложении, где мне пришлось изменить заголовок страницы после нажатия кнопки. Но я не уверен, будет ли это работать с атрибутом tabBarVisible. Не могли бы вы попробовать?