React Native : multiple Navigator navigationBar - react-native

Question

I'm stuck with React Native.
I have a "Header" navigationBar, but I want to add another navigationBar to my Navigator component.
render() {
let currentRoute = this.props.route
return (
<Navigator
style={styles.container}
initialRoute={this.props.route}
renderScene={this.router.bind(this)}
navigationBar={<Header />} // << There, how can I simply add another navigationBar ?
/>
);
}
And here's the <Header/> component :
render() {
return <Navigator.NavigationBar
style={styles.navBarContainer}
navState={this.props.navState}
routeMapper={routeMapper}
/>
}
Now, I'm trying to add a <Footer/> component, which would render a similar component as <Header/>, in order to have 2 persistent navigation bar on my app.
How to achieve this ?

Answer 1

I also meet this question, and have resolved it. In React Native, it is not supported to add multiple navigationBar. But, if you want to add another "navigationBar", you can add this "navigationBar" as the sibling node of the Navigator, such as:
render() {
return (
<View style={styles.scene}>
<TopStatusBar
showBackIcon={false}
centerText={LocalizedStrings.appName}
rightIcon={require("../../res/icons/head.png")}
onRightPress={this._onHeadPress.bind(this)}
/>
<Navigator
initialRoute={ROUTE_STACK[0]}
renderScene={this._renderScene.bind(this)}
configureScene={() => Navigator.SceneConfigs.FadeAndroid}
navigationBar={
this.state.displayBottomTabBar ?
<BottomTabBar
ROUTE_STACK={ROUTE_STACK}
/>
:
null
}
onWillFocus={(route) => {
this.presentedRoute = route;
}}
sceneStyle={{flex: 1}}
/>
</View>
);
}
In the upper code, TopStatusBar is a composite component. It persists across scene transitions, just like the navigatorBar.
Good luck!