2017-05-04 77 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'}}/> 

我已經用樣品值對它進行了定製。更新您的代碼並應用您想要的任何字體顏色和背景顏色。