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} ...