问题描述
我在Navigator下有NavigatorIOS，并想隐藏Navigator的NavigationBar以使用NavigatorIOS的栏.有什么办法吗?
I have NavigatorIOS under Navigator and would like to hide Navigator's NavigationBar to use NavigatorIOS's bar. Is there any way to do this?
这是屏幕截图
This is screenshot that I've seen. I need backend of NavigatorIOS..
我要构建的结构如下:
├── NavigatorRoute1
│ ├── NavigatorIOSRoute1
│ ├── NavigatorIOSRoute2
│ └── NavigatorIOSRoute3
└── NavigatorRoute2
我的代码如下. (基本上从UIExplore示例获得.
The code that I have is the below. (Basically obtained from UIExplore examples.
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的渲染，并将prop传递给组件以更改状态.
I added a function to change state that handle rendering of Navigator and pass the prop to the component to change the state.
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"
/>
);
}
推荐答案
在您的Navigator类中，您好像正在传递导航栏.您可以在其中添加逻辑，以根据想要使用的方式传递到Navigator.NavigationBar或NavigatorIOS栏中.为此，您需要在导航器中指定要更改栏的状态变量.
In your Navigator class it looks like you're passing in a navigation bar. You can add logic there to pass in either Navigator.NavigationBar or your NavigatorIOS bar depending on which you'd like to use. To do that you'd need to specify a state variable in Navigator that you'd update when you want the bar to change.
这篇关于如何隐藏React Native NavigationBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！