我是react-navigation
的新手,并试图绕过如何执行以下操作:
鉴于此导航结构:
RootTabNavigator
LoggedOut_StackNavigator
...
LoggedIn_StackNavigator
LoggedIn_TabNavigator <-- TabBar rendered by this Navigator
TabA_StackNavigator
ScreenA
ScreenB
我希望能够使用典型的“从右侧滑入”转换,从ScreenA
导航到ScreenB
,以TabBar
为< / strong> ScreenA
上可见,但ScreenB
上 可见。换句话说,当我导航到ScreenB
时,我希望它占据整个窗口。
用户从ScreenA
转换为ScreenB
后,可以按后退按钮返回ScreenA
,或使用与{TabBar
相同的转换导航到新路线1}}仍然不可见。
我尝试了什么:
navigationOptions.tabBarVisible
:此属性在应用于TabA_StackNavigator
时本身似乎无效,这意味着其堆栈中的所有屏幕也隐藏了{{ 1}}。将其添加到StackNavigator内的屏幕无效。
添加新的TabBar
作为AllScreens_StackNavigator
的兄弟并导航到此导航器中的路由,我收到错误:LoggedIn_TabNavigator
。我发送的导航操作试图执行此操作:
Expect nav state to have routes and index, {"routeName":"ScreenB", "params": {}, "key": "init-id-1516..."}
非常感谢任何帮助!
答案 0 :(得分:2)
编辑:此答案与getColor
v1相关.~(pre v2.0)
根据评论中的建议,请参阅此问题:
https://github.com/react-navigation/react-navigation-tabs/issues/19
显然,内部组件的react-nagivation
也会影响包含导航器的父导航器。
这意味着此代码应该适合您:
navigationOptions
首先,您可以设置每个屏幕(组件)的导航选项。您可以在上面或此处的代码段中查看:React Navigation - Screen Navigation Options
第二,你试过了:
将其添加到StackNavigator内的屏幕无效。
它没有用,因为隐藏StackNavigator的标题需要将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)
}
字段设置为header
。
来自React Navigation documentation:
React Element或给定HeaderProps返回React的函数 元素,显示为标题。 设置为空隐藏标题
第三,使用tabBarVisible实际上是正确的,但它只影响TabNavigator。并且要使其仅在一个选项卡而不是所有选项卡中消失,您需要在特定屏幕上设置它。在你的情况下null
。
希望这有帮助!
答案 1 :(得分:0)
以下是最终为我工作的内容,所以我发布了希望它可以帮助他人。我还没有机会尝试@talzaj
的实施,所以我会把它留给其他人来支持那些对他们最有效的东西。以下解决方案对我来说效果很好,包括嵌套导航器内部。
我更新了导航结构,以便:
LoggedIn_StackNavigator
仍然有LoggedIn_TabNavigator
作为其中一个屏幕,而LoggedIn_TabNavigator
是使用LoggedIn_StackNavigator
设置的initialRouteName
的初始路线。LoggedIn_StackNavigator
还包含每个屏幕的路线,该屏幕需要全屏显示并隐藏标签栏。 (如果您正在重新使用屏幕,其中一些显示标签栏可见而其他屏幕不可见,确保使用唯一键用于重复使用同一屏幕的路线。因此,导航结构如下:
RootTabNavigator
LoggedOut_StackNavigator
LoggedIn_StackNavigator
ScreenA // ( reuse screen component, different route key )
ScreenB // ( reuse screen component, different route key )
LoggedIn_TabNavigator <-- TabBar rendered by this Navigator
TabA_StackNavigator
ScreenA
ScreenB
LoggedIn_StackNavigator
LoggedIn_StackNavigator
看起来像:
import { StackNavigator } from 'react-navigation';
import LoggedIn_TabNavigator from './LoggedIn_TabNavigator';
import {
ScreenA,
ScreenB,
} from './LoggedIn_TabNavigator/TabA_StackNavigator/Screens';
const LoggedIn_StackNavigator = StackNavigator({
WithoutTabBar_ScreenA: {
screen: ScreenA
},
WithoutTabBar_ScreenB: {
screen: ScreenB
},
LoggedIn_TabNavigator: {
screen: LoggedIn_TabNavigator
}
}, {
initialRouteName: 'LoggedIn_TabNavigator'
});
export default LoggedIn_StackNavigator;
从那里,我写了一个帮助HOC来推送全屏路线:
import React from 'react';
import { withNavigation } from 'react-navigation';
import { fullScreenRoutePrefix } from './somewhere';
export default function withNavigateFullScreen(Child) {
@withNavigation
class WithNavigateFullScreenHOC extends React.Component {
navigateToFullScreenRoute = (routeName, params) => {
this.props.navigation.navigate(
`${fullScreenRoutePrefix}${routeName}`, params
);
}
render() {
return (
<Child
{...this.props}
navigateFullScreen={this.navigateToFullScreenRoute}
/>
);
}
}
return WithNavigateFullScreenHOC;
}
然后我可以导航到全屏路线,如下:
import React from 'react';
import { withNavigateFullScreen } from 'components/higher-order';
import { Text } from 'react-native';
@withNavigateFullScreen
export default class ScreenA extends React.Component {
goToScreenB = () => {
this.props.navigateFullScreen('ScreenB');
}
render() {
return <Text onPress={this.goToScreenB}>Go To Screen B</Text>;
}
}