У меня есть NavigatorIOS под Navigator и вы хотите скрыть 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"
/>
);
}
UPDATE с моим решением
Я добавил функцию для изменения состояния, которое обрабатывает рендеринг Navigator и передает prop компоненту, чтобы изменить состояние.
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"
/>
);
}