如何在 React Native 上动态隐藏 TabNavigator

Question

所以我有一个带有 React Native Navigator 的应用程序，我为我的应用程序计划的是在用户首次启动该应用程序时显示一个教程，我为此使用了 react-copilot，它确实很棒，但是问题是，React copilot 需要时间来启动，并且它在 react-navigator 之前启动。

问题是用户可以点击导航器从而破坏教程甚至导致系统崩溃，因为教程没有正确启动。

我计划在教程尚未开始时动态禁用导航器。这是 appNavigation

上 navigationOptions 的代码片段

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

这里是组件的静态值

static navigationOptions = {
    tabBarVisible: false
    }

它有效，但问题是当教程结束并且我将静态值设置为 true 时，tabBar 没有出现。有什么解决办法吗？

提前致谢

编辑：我需要澄清的是，我需要的是在某些 activity（在本例教程中）完成后使标签栏在同一页面内出现和消失，而无需 reload/navigate 到同一页面[=16] =]

Answer 1

我会尝试将 react-copilot 中的所有教程放入不同的页面，该页面不在底部导航栏内，甚至可能在模态（默认情况下覆盖整个应用程序）中。 react-copilot 说明完成后，您可以自由导航到底部导航栏或关闭模式。

评论后的新建议：

我认为您可以通过执行以下操作来更改 navigationOptions 中的某些值：

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

然后在组件内部的函数中调用以下内容：

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

这适用于我必须在单击按钮后更改页面的 header 标题的应用程序。但我不确定这是否适用于属性 tabBarVisible。你介意试一试吗？

Answer 2

就像加布里埃尔的回答

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

将导航选项放在任何选项卡项内，并像这样更新 tabBarVisible 属性。

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

如何在 React Native 上动态隐藏 TabNavigator

How to hide TabNavigator dynamically on React Native

react-native

react-navigation

react-navigation-bottom-tab