Styling the NavigationBar component
It's time to give our NavigationBar the iOS and Android style treatment. There is a small difference between the two, except for how the font size and padding are rendered. We will start by giving our NavigationBar a background color and a bottom border. Add this to the StyleSheet in index.ios.js and index.android.js and define the navbar style:
var styles = StyleSheet.create({
navContainer: {
flex: 1
},
navBar: {
backgroundColor: '#5B29C1',
borderBottomColor: '#48209A',
borderBottomWidth: 1
}
});Next, update the Navigator.NavigatorBar with the style prop:
class ReactNotes extends React.Component {
...
render () {
return (
<Navigator
initialRoute={{name: 'home'}}
renderScene={this.renderScene}
navigationBar={
<Navigator.NavigationBar
routeMapper={NavigationBarRouteMapper}
style={styles.navBar}
/>
}
/>
);...