2017-05-04 136 views
3

如何反应的造型母语导览项目的Text.I经过文档,但我没有能够找到正确的方式做到这一点造型反应原生抽屉式导航项目

Navigation Documentation

这是我的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); 

回答

8

你只需要添加一些道具到DrawerItems组件。如下所示。

<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'}}/> 

我已经用样品值对它进行了定制。更新您的代码并应用您想要的任何字体颜色和背景颜色。