在自定义抽屉上设置activeTintColor
问题描述:
我正在使用DrawerNavigator创建抽屉。我是通过设置activeTintColor值在自定义抽屉上设置activeTintColor
contentOptions: {
activeTintColor: '#65433d',
}
现在我决定通过设置contentComponent定制我的抽屉突出抽屉当前选定的屏幕。所以看起来我的代码就像
export default DrawerNavigator({
Page1: {
screen: Page1
},
Page2: {
screen: Page2
},
Page3: {
screen: Page3
}
}, {
contentComponent: SideMenu,
drawerWidth: 300
});
在SlideMenu.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import styles from './SideMenu.style';
import {NavigationActions} from 'react-navigation';
import {ScrollView, Text, View} from 'react-native';
class SideMenu extends Component {
navigateToScreen = (route) =>() => {
const navigateAction = NavigationActions.navigate({
routeName: route
});
this.props.navigation.dispatch(navigateAction);
}
render() {
return (
<View style={styles.container}>
<ScrollView>
<View>
<Text style={styles.sectionHeadingStyle}>
Section 1
</Text>
<View style={styles.navSectionStyle}>
<Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page1')}>
Page1
</Text>
</View>
</View>
<View>
<Text style={styles.sectionHeadingStyle}>
Section 2
</Text>
<View style={styles.navSectionStyle}>
<Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page2')}>
Page2
</Text>
<Text style={styles.navItemStyle} onPress={this.navigateToScreen('Page3')}>
Page3
</Text>
</View>
</View>
</ScrollView>
<View style={styles.footerContainer}>
<Text>This is my fixed footer</Text>
</View>
</View>
);
}
}
SideMenu.propTypes = {
navigation: PropTypes.object
};
export default SideMenu;
如何设置不同的颜色供选择的菜单项?
答
有2种方法来识别当前屏幕。 navigation
道具有子道具,包含routeName
。您可以相应地检查并呈现SideMenu
组件。
冷杉选择是通过DrawerNavigator
实施例将其发送
export default DrawerNavigator({
Page1: { screen: Page1 },
Page2: { screen: Page2 },
Page3: { screen: Page3 }
}, {
contentComponent: (props) => (
<SideMenu currentScreen={props.navigation.state.routeName} {...props} />
),
drawerWidth: 300
});
第二种方式是直接读取它在组件内部。
例
class SideMenu extends Component {
constructor(props) {
super(props);
this.state = { currentScreen: props.navigation.state.routeName };
}
render() {
return(
<SomeView
style={[styles.view, (this.state.currentScreen === 'Page1' ? styles.active : {})]}
/>
)
}
}