how to show navigation bar using navigator component in react-native - react-native

Question

Hi every one I am trying to use navigator component in place of navigatorIOS, but what the problem navigator is not showing in view, below is my code for navigator and navigatorIOS
NavigatorIOS:
<NavigatorIOS
style={styles.navigator}
barTintColor='#37475e'
titleTextColor='white'
initialRoute={{
title:' Words',
component:Main
}}/>
using navigatorIOS I can view the navbar but using using navigator Component I am facing problem I want to use navigator component instead of navigatorIOS
Navigator Component:
<Navigator
style={styles.navigator}
TintColor='#37475e'
titleTextColor='white'
initialRoute={{
title:'Words',
component:Main
}}
renderScene={(route, navigator) =>{
return <route.component navigator={navigator} {...route.passProps} />;
}}/>
Can any one give me suggestions for how to solve this any help much appreciated

Answer 1

Yes, you need to create a <Navigator.NavigationBar />, and pass it in as a prop to the Navigator:
class App extends React.Component {
render() {
return (
<Navigator
style={{flex:1}}
initialRoute={{name: 'Main', component: Main, index: 0}}
renderScene={(route, navigator) => {
if (route.component) {
return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } );
}
}}
navigationBar={ <Navigator.NavigationBar routeMapper={NavigationBarRouteMapper} /> }
/>
)
}
}
You then need to create a routeMapper object, which you pass in as a prop to the Navigator.NavigationBar:
var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
if(index > 0) {
return (
<TouchableHighlight style={{marginTop: 10}} onPress={() => {
if (index > 0) {
navigator.pop();
}
}}>
<Text>Back</Text>
</TouchableHighlight>
)} else {
return null}
},
RightButton(route, navigator, index, navState) {
return null;
},
Title(route, navigator, index, navState) {
return <Text>Hello From My App!</Text>
}
};
There is a great example in the UI Explorer in their GitHub, check it out here.

Answer 2

App.js
<Navigator
ref={(ref) => this._navigator = ref}
configureScene={(route) => Navigator.SceneConfigs.FloatFromLeft}
initialRoute={{
id: 'Main',
title: 'Words'
}}
renderScene={(route, navigator) => this._renderScene(route, navigator)}
navigationBar={
<Navigator.NavigationBar
style={styles.navBar}
routeMapper={NavigationBarRouteMapper} />
}
/>
This code for left, right and title on navigationBar in react-native
const NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
switch (route.id) {
case 'Page1':
case 'Page2':
case 'Page3':
return (
<TouchableOpacity
style={styles.navBarLeftButton}
onPress={() => {_emitter.emit('openMenu')}}>
<Icon name='menu' size={25} color={'white'} />
</TouchableOpacity>
)
default:
return null
}
},
RightButton(route, navigator, index, navState) {
switch (route.id) {
case 'Page1':
return (
<TouchableOpacity
style={styles.navBarRightButton} onPress={() => {route.onPress()}}>
<Icon name={'map'} size={25} color={'white'} />
</TouchableOpacity>
)
case 'Page2':
return (
<TouchableOpacity
style={styles.navBarRightButton} onPress={() => {route.onPress()}}>
<Icon name={'map'} size={25} color={'white'} />
</TouchableOpacity>
)
case 'Page3':
return (
<TouchableOpacity
style={styles.navBarRightButton} onPress={() => {route.onPress()}}>
<Icon name={'tab'} size={25} color={'white'} />
</TouchableOpacity>
)
default:
return null
}
},
Title(route, navigator, index, navState) {
return (
<Text style={[styles.navBarText, styles.navBarTitleText]}>
{route.title}
</Text>
)
}
}
route.onPress(): method to call right button click.
route.title: set title of page.
For reference, use following link: Navigator