在自定义抽屉上设置 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

有两种方法可以识别当前屏幕。 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 : {} )]}
      />
    )
  }
}