动态隐藏 React 导航中的标签栏答案

【问题标题】：Hide tabbar in React navigation dynamically动态隐藏 React 导航中的标签栏
【发布时间】：2018-02-27 05:10:54
【问题描述】：

我的 react native 应用程序有以下嵌套导航结构

例如

这种结构的一个问题是，在堆栈的内部嵌套页面（聊天或任务）中，我需要隐藏底部的标签栏。我可以使用https://reactnavigation.org/docs/tab-navigator.html#tabbarvisible 来控制可见性。

但是，这不会在加载时发生，因为隐藏是堆栈中内页的动态活动。

在连接到 redux 时，我可以在 tabbar 组件中获取属性，但是设置 tabbar 可见性然后重新渲染组件。

对于这种常见的android导航模式还有其他方法吗？

【问题讨论】：

【解决方案1】：

您可以通过重新排列屏幕堆栈来隐藏特定屏幕中的标签栏，如版本 5.x 的官方文档中所示 https://reactnavigation.org/docs/hiding-tabbar-in-screens/

【讨论】：

这个文档一点也不清晰，给初学者带来了更多的困惑。这不能解决这样的场景：TabNav(A -> Home, B -> Setting), Stack (Home -> Latest, Popular)。我想在选择 A、B 时显示标签栏，但当我在最新、流行时隐藏它
stackoverflow.com/a/51692805/5895297检查这个答案，也许它可以帮助

【解决方案2】：

我通过使用高度来修复它，它就像魅力一样。

style: {
     height: isFullScreen ? 0 : null
}

如果您想从任何特定屏幕发送此布尔值，您可以使用 setParams 来完成

 navigation.setParams({
     isFullScreen: true      // or false
 });

那么就可以用

得到这个参数了

const { isFullScreen } = route.params;

【讨论】：

【解决方案3】：

在要隐藏标签栏的屏幕中，使用以下代码

static navigationOptions = {
    tabBarVisible: false,
}

【讨论】：