在自定义抽屉上设置activeTintColor

Question

我正在使用DrawerNavigator创建抽屉。我是通过设置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; 

如何设置不同的颜色供选择的菜单项？

Answer 1

有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 : {})]} 
     /> 
    ) 
    } 
}