样式化 react-native 导航抽屉项目答案

【问题标题】：Styling react-native Navigation Drawer Items样式化 react-native 导航抽屉项目
【发布时间】：2017-10-02 00:48:10
【问题描述】：

如何设置 react-native 导航抽屉项目的文本样式。我浏览了文档，但我找不到正确的方法

Navigation Documentation

这是我的应用容器

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);

【问题讨论】：

标签： android ios react-native styles

【解决方案1】：

您只需要向 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'}}/>

我已使用示例值对其进行了自定义。更新您的代码并应用您想要的任何字体颜色和背景颜色。

【讨论】：

【解决方案2】：

请看一下这个document。检查 contentOptions 属性。

【讨论】：