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

Question

我的反应原生应用程序具有以下嵌套导航结构

例如

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

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

在连接到 redux 时，我可以在标签栏组件中获取属性，但设置标签栏可见性然后重新呈现组件。

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

Answer 1

我的React本机应用程序具有以下嵌套的导航结构

例如

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

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

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

在android中这种通用的导航模式还有其他方法吗？

Answer 2

我的React本机应用程序具有以下嵌套的导航结构

例如

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

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

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

在android中这种通用的导航模式还有其他方法吗？

Answer 3

您可以使用navigation.setOptions动态隐藏它

 const hideTabBar = () => {
   navigation.setOptions({
     tabBarStyle: { display: 'none' },
   });
 };
 const showTabBar = () => {
   navigation.setOptions({
     tabBarStyle: { display: 'flex' },
   });
 };

Answer 4

我的React本机应用程序具有以下嵌套的导航结构

例如

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

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

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

在android中这种通用的导航模式还有其他方法吗？