如何隐藏本地NavigationBar
如何隐藏本地NavigationBar
提问于 2015-05-12 22:44:37
我在Navigator下有NavigatorIOS，并且希望隐藏Navigator的NavigationBar以使用NavigatorIOS的栏。有办法这样做吗？
这是我见过的屏幕截图。我需要NavigatorIOS的后端。
我想要构建的结构如下：
├── NavigatorRoute1
│ ├── NavigatorIOSRoute1
│ ├── NavigatorIOSRoute2
│ └── NavigatorIOSRoute3
└── NavigatorRoute2下面是我的代码。(基本上是从UIExplore示例中获得的。
导航器
render: function(){
return (
<Navigator
initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}
initialRouteStack={ROUTE_STACK}
style={styles.container}
renderScene={this.renderScene}
navigationBar={
<Navigator.NavigationBar
routeMapper={NavigationBarRouteMapper}
style={styles.navBar}
/>
}
/>
);
}NavigatorIOS
render: function(){
var nav = this.props.navigator;
return (
<NavigatorIOS
style={styles.container}
ref="nav"
initialRoute={{
component: UserSetting,
rightButtonTitle: 'Done',
title: 'My View Title',
passProps: {nav: nav},
}}
tintColor="#FFFFFF"
barTintColor="#183E63"
titleTextColor="#FFFFFF"
/>
);}
用我的解决方案更新
我添加了一个函数来更改处理Navigator呈现的状态，并将支柱传递给组件以更改状态。
hideNavBar: function(){
this.setState({hideNavBar: true});
},
render: function(){
if ( this.state.hideNavBar === true ) {
return (
<Navigator
initialRoute={ROUTE_STACK[0]}
initialRouteStack={ROUTE_STACK}
renderScene={this.renderScene}
/>
);
}else{
return (
<Navigator
initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}
initialRouteStack={ROUTE_STACK}
style={styles.container}
renderScene={this.renderScene}
navigationBar={
<Navigator.NavigationBar
routeMapper={NavigationBarRouteMapper}
style={styles.navBar}
/>
}
/>
);
}}
和
render: function(){
var hideNavBar = this.props.hideNavBar;
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
component: UserSetting,
rightButtonTitle: 'Done',
title: 'My View Title',
passProps: {hideNavBar: hideNavBar},
}}
tintColor="#FFFFFF"
barTintColor="#183E63"
titleTextColor="#FFFFFF"
/>
);}
回答 11
Stack Overflow用户
回答已采纳
发布于 2015-05-12 23:04:55
在Navigator类中，它看起来像是在传递导航条。您可以在那里添加逻辑，以传递Navigator.NavigationBar或NavigatorIOS条，这取决于您想要使用的是什么。要做到这一点，您需要在Navigator中指定一个状态变量，在您想要更改条形图时更新它。
Stack Overflow用户
发布于 2017-05-12 10:17:03
由于一些旧的方法被废弃了，所以我使用了堆栈导航器。如果您使用的是StackNavigator，那么它对我是有效的。
//******For Older Versions. But Will be Deprecated in future*******
//static navigationOptions = { title: 'Welcome', header: null };
//For Latest Version Use:
static navigationOptions = { title: 'Welcome', headerShown: false};如果有任何问题，请随时联系。
Stack Overflow用户
发布于 2015-10-30 21:01:43
我通过定义一个可以检查当前路由的自定义NavigationBar来解决这个问题。会是这样的：
class NavigationBar extends Navigator.NavigationBar {
render() {
var routes = this.props.navState.routeStack;
if (routes.length) {
var route = routes[routes.length - 1];
if (route.display === false) {
return null;
}
}
return super.render();
}
}使用您的例子：
render: function(){
return (
<Navigator
initialRoute={{
component: UserSetting,
rightButtonTitle: 'Done',
title: 'My View Title',
display: false,
}}
style={styles.container}
renderScene={this.renderScene}
navigationBar={
<NavigationBar
routeMapper={NavigationBarRouteMapper}
style={styles.navBar}
/>
}
/>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30202705
复制相关文章
相似问题
腾讯云开发者
