如何在 React Native 上动态隐藏 TabNavigator [英] How to hide TabNavigator dynamically on React Native

问题描述

所以我有一个带有本机导航器的应用程序，我的应用程序计划是在用户第一次启动应用程序时显示教程，我使用 react-copilot 对它来说，它真的很好用，但问题是，React copilot 需要时间来启动，它在 react-navigator 之前启动.>

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

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

上 navigationOptions 的代码片段

TabMenu.navigationOptions = ({ navigation, screenProps }) =>{const childOptions = getActiveChildNavigationOptions(navigation, screenProps);返回 {标题:childOptions.title，tabBarVisible: childOptions.tabBarVisible,标头:空};};

这里是组件上的静态值

静态导航选项 = {tabBarVisible: 假}

它有效，但问题是当教程结束并且我将静态值设置为 true 时，tabBar 不会出现.有没有办法解决这个问题?

提前致谢

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

解决方案

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

评论后的新建议:

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

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

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

this.props.navigation.setParams({ "title": '全新名称') })

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

So i have an app with react native navigator, what I plan for my app is to show a Tutorial when the user first launches the app, I use react-copilot for it, it works really great, but the problem is, React copilot takes time to initiate, and it launches BEFORE the react-navigator.

The problem is that the user can click the navigator thus breaking the tutorial or even crashing the system because the tutorial did not initiate properly.

I plan to make the navigator to be disabled dynamically when the tutorial not yet started. Here's the snippet of the code from the navigationOptions on the appNavigation

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

and here's the static value on the component

static navigationOptions = {
    tabBarVisible: false
    }

It works, but the problem is when the tutorial ends and I set the static value to true, the tabBar doesn't appear. Is there any way around this?

Thank you in advance

EDIT : i need to clarify that what i need is to make the tabbar appear and dissapear within the same page after certain activity (in this case tutorial) finished without the need to reload/navigate to the same page

解决方案

I would try putting all the tutorial from react-copilot into a different page which is not inside the bottom navigation bar or maybe even in a Modal (which by default cover the whole application). After the react-copilot instructions are done you are free to navigate to the bottom navigation bar or dismiss the Modal.

NEW SUGGESTION AFTER COMMENT:

I think you could change some values in the navigationOptions by doing the following:

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

and then in a function inside the component calling the following:

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

This works for me on an app where I had to change the header title of a page after a button was clicked. But I'm not sure if that would work with the attribute tabBarVisible. Would you mind giving it a try?

这篇关于如何在 React Native 上动态隐藏 TabNavigator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！