反应导航显示contentComponent中的选定屏幕

Question

我正在尝试更改所选屏幕项目的背景，以突出显示该项目处于活动状态。目前，此代码可以按预期运行：

但是，当您选择另一个屏幕时，会错误地将它们都突出显示。

我正在努力理解为什么会这样。我正在将自己理解为活动屏幕的索引与屏幕的索引号进行比较。

如果有人可以提供有关解决此问题的建议，我将不胜感激！

单个菜单项：

class MenuItem extends Component {
  render() {
    return (
      <View style={{ flexDirection: 'row', paddingHorizontal: 16, backgroundColor: this.props.active && COLOURS[1] || '' }}>
        <View style={{ width: 32, justifyContent: 'center' }}><Icon color="#7ba6d5" size={24} type={this.props.config.iconType} name={this.props.config.iconName} /></View>
        <LinearTextGradient
          style={{ fontSize: 16, fontFamily: 'Comfortaa-Bold', paddingVertical: 16, marginLeft: 8 }}
          locations={[0, 0.5, 1]}
          colors={['#7ba6d5', '#7ba6d5', '#7ba6d5']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}>

          { this.props.config.label }
        </LinearTextGradient>
        { this.props.badge && <Badge /> }
      </View>
    );
  }
}

侧边菜单（contentComponent）：

class SideMenu extends Component {
  render () {
    const config = {
      Map: { label: 'Map', iconName: 'map', iconType: 'material' },
      Setup: { label: 'Setup', iconName: 'settings', iconType: 'material' },
      Win: { label: 'Win an iPad', iconName: 'gift', iconType: 'font-awesome' },
      Help: { label: 'Help', iconName: 'help-with-circle', iconType: 'entypo' }
    };

    return (
      <LinearGradient colors={[COLOURS[1], COLOURS[0]]} style={{ flex: 1 }}>
        <View style={styles.menuImage}><Image source={require('./img/rygo-large.png')} style={{width: '65%'}} resizeMode="contain" /></View>
        <TouchableOpacity onPress={() => this.props.navigation.navigate('Map')}><MenuItem active={this.props.navigation.state.index == 1} config={config['Map']} /></TouchableOpacity>
        <TouchableOpacity onPress={() => this.props.navigation.navigate('Setup')}><MenuItem active={this.props.navigation.state.index == 2} config={config['Setup']} /></TouchableOpacity>
        <TouchableOpacity onPress={() => this.props.navigation.navigate('Win')}><MenuItem active={this.props.navigation.state.index == 3} config={config['Win']} /></TouchableOpacity>
        <TouchableOpacity onPress={() => this.props.navigation.navigate('Help')}><MenuItem active={this.props.navigation.state.index == 4} config={config['Help']} /></TouchableOpacity>
        <Text style={styles.menuFooterText}>Version {APP_VERSION}</Text>
      </LinearGradient>
    );
  }
}

抽屉导航器配置：

const Drawer = createDrawerNavigator({
  Launch: LaunchScreen,
  Map: MapStack,
  Setup: SetupStack,
  Win: WinScreen,
  Help: HelpScreen,
}, {
  contentComponent: SideMenu,
  drawerLockMode: 'locked-closed'
});