3

所以我有一个带有 react native navigator 的应用程序，我的应用程序计划是在用户第一次启动应用程序时显示一个教程，我使用react-copilot，它真的很棒，但问题是，React copilot 需要是时候启动了，它在 react-navigator 之前启动。

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

我计划在教程尚未开始时动态禁用导航器。navigationOptions这是从上的代码片段appNavigation

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

这是组件上的静态值

static navigationOptions = {
    tabBarVisible: false
    }

它可以工作，但问题是当教程结束并且我将静态值设置为 时true，tabBar 不会出现。有没有办法解决？

先感谢您

编辑：我需要澄清我需要的是在某些活动（在本例中为教程）完成后使标签栏出现和消失在同一页面内，而无需重新加载/导航到同一页面

4

2 回答 2

1

就像加布里埃尔的回答

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

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

this.props.navigation.setParams({
   tabBarVisible: false
});
于 2020-04-16T14:00:06.660 回答
0

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

评论后的新建议：

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

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

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

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

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

于 2020-04-10T08:08:52.987 回答