我是 react-navigation
的新手,并试图了解如何执行以下操作:
鉴于此导航结构:
RootTabNavigator
LoggedOut_StackNavigator
...
LoggedIn_StackNavigator
LoggedIn_TabNavigator <-- TabBar rendered by this Navigator
TabA_StackNavigator
ScreenA
ScreenB
我希望能够使用典型的“从右侧滑入”过渡从 ScreenA
导航到 ScreenB
,这样 TabBar
在ScreenA
上可见,但在ScreenB
上不可见。换句话说,当我导航到 ScreenB 时,我希望它占据整个窗口。
用户从 ScreenA
转换到 ScreenB
后,他们可以按后退按钮返回到 ScreenA
,或者导航到新的使用相同转换的路由,但 TabBar
仍然不可见。
我尝试过的:
navigationOptions.tabBarVisible
:此属性似乎仅在应用于TabA_StackNavigator
本身时才起作用,这意味着所有屏幕在其堆栈中还隐藏了TabBar
。将其添加到 StackNavigator 内的屏幕没有任何效果。添加一个新的
AllScreens_StackNavigator
作为LoggedIn_TabNavigator
的同级并导航到此导航器内的路线,我收到错误:Expect nav state to have路由和索引,{"routeName":"ScreenB", "params": {}, "key": "init-id-1516..."}
。我派出的导航操作尝试执行此操作:{ "action": Object { "params": Object {}, "routeName": "ScreenB", "type": "Navigation/NAVIGATE", }, "params": Object {}, "routeName": "AllScreens_StackNavigator", "type": "Navigation/NAVIGATE", }
非常感谢任何帮助!
最佳答案
编辑:此答案与 react-nagivation
v1.~(v2.0 之前)
根据评论中的建议,请参阅此问题:
https://github.com/react-navigation/react-navigation-tabs/issues/19
<小时/>显然,内部组件的 navigationOptions
也会影响包含导航器的父导航器。
解决方案
这意味着这段代码应该适合您:
class ScreenB extends React.Component {
static navigationOptions = {
header: () => null, //this will hide the Stack navigator's header (TabA_StackNavigator)
tabBarVisible: false //this will hide the TabBar navigator's header (LoggedIn_TabNavigator)
}
说明
首先,您可以设置每个屏幕(组件)的导航选项。您可以在上面或此处的代码片段中查看如何操作:React Navigation - Screen Navigation Options
第二,您尝试过:
Adding it to the screens inside the StackNavigator has no effect.
它不起作用,因为隐藏 StackNavigator 的 header 需要将 header
字段设置为 null
。
来自React Navigation documentation:
React Element or a function that given HeaderProps returns a React Element, to display as a header. Setting to null hides header
第三,使用tabBarVisible实际上是正确的,但它只影响 TabNavigator。为了使其仅对一个选项卡而不是对所有选项卡消失,您需要在特定屏幕上进行设置。在您的情况下,ScreenB
。
希望这有帮助!
关于reactjs - 从嵌套的 StackNavigator 中隐藏 TabBar 的 react 导航屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48301365/