How To styling react-native navigation drawer item's Text.I go through the Documentation but i didnt able to find correct way to do that
This is My AppContainer
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View, Text, Button, StyleSheet } from 'react-native';
import { bindActionCreators } from 'redux';
import { ActionCreators } from '../actions';
import Home_ from './Home';
import About from './About';
//Add navigation
import { DrawerNavigator, DrawerItems} from 'react-navigation'
const cunstomeDrawerContentComponent = (props) => (
<View style={{flex: 1, color: 'red',
textAlign: 'center',
fontSize: 30,
fontFamily: 'cochin',
letterSpacing: 4}} >
<DrawerItems {...this.props} />
</View>
);
const drawerLayout = DrawerNavigator({
Home: { screen: Home_ },
About: { screen: About },
});
function mapDispatchToProps(dispatch) {
return bindActionCreators(ActionCreators, dispatch);
}
const styles = StyleSheet.create({
container: {
flex: 1, color: 'red',
textAlign: 'center',
fontSize: 30,
fontFamily: 'cochin',
letterSpacing: 4
}
});
export default connect((state) => { return {} }, mapDispatchToProps)(drawerLayout);
You just need to add some props to DrawerItems component. like below.
<DrawerItems {...this.props} activeTintColor='#2196f3' activeBackgroundColor='rgba(0, 0, 0, .04)' inactiveTintColor='rgba(0, 0, 0, .87)' inactiveBackgroundColor='transparent' style={{backgroundColor: '#000000'}} labelStyle={{color: '#ffffff'}}/>
I have customised it with sample values. Update your code and apply whatever font color and background color you want.
Please Tak a look at this document . check the contentOptions properties.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.