[英]Styling react-native Navigation Drawer Items
如何樣式化 react-native 導航抽屜項的文本。我瀏覽了文檔,但我沒有找到正確的方法來做到這一點
這是我的 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);
您只需要向 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'}}/>
我已經使用示例值對其進行了自定義。 更新您的代碼並應用您想要的任何字體顏色和背景顏色。
請看一下這個 文件。 檢查contentOptions屬性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.