在自定義抽屜上設置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 : {})]} 
     /> 
    ) 
    } 
}