React native 不要突出显示标签

我正在做一个React本地项目（学校），我遇到了一个无法解决的问题。我使用了drawernavigator元素，除了第二个元素“About”没有高亮显示并关闭抽屉外，其他元素都可以工作。我已经看过了，但似乎无法确定这个元素和其他元素之间的任何区别。不幸的是，我在这方面的工作被复制和粘贴，对我为什么要做我正在做的事情背后的机制没有太多的理解（课程是在线的，很多“这样做是为了得到这种”类型的教学）

这是我的页面代码。请让我知道我错过了什么，最好是为什么它不起作用

import React, { Component } from 'react';
import Menu from './MenuComponent';
import Home from './HomeComponent';
import Contact from './ContactComponent';
import About from './AboutComponent';
import Dishdetail from './DishdetailComponent';
import { View, Platform } from 'react-native';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';

const MenuNavigator = createStackNavigator({
    Menu: { screen: Menu },
    Dishdetail: { screen: Dishdetail },
    Contact: { screen: Contact },
    About: { screen: About }
}, {
    initialRouteName: 'Menu',
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#512DA8'
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            color: '#fff'
        }
    }
});

const HomeNavigator = createStackNavigator({
    Home: { screen: Home },
    Dishdetail: { screen: Dishdetail },
    Contact: { screen: Contact },
    About: { screen: About }
}, {
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#512DA8'
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            color: '#fff'
        }
    }
});

const AboutNavigator = createStackNavigator({
    Home: { screen: Home },
    Dishdetail: { screen: Dishdetail },
    Contact: { screen: Contact },
    About: { screen: About }
}, {
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#512DA8'
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            color: '#fff'
        }
    }
});

const ContactNavigator = createStackNavigator({
    Home: { screen: Home },
    Dishdetail: { screen: Dishdetail },
    Contact: { screen: Contact },
    About: { screen: About }
}, {
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#512DA8'
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            color: '#fff'
        }
    }
});

const MainNavigator = createDrawerNavigator({
    Home: {
        screen: HomeNavigator,
        navigationOptions: {
            title: 'Home',
            drawerLabel: 'Home'
        }
    },
    About:
    {
        screen: AboutNavigator,
        navigationOptions: {
            title: 'About Us',
            drawerLabel: 'About Us'
        }
    },
    Menu:
    {
        screen: MenuNavigator,
        navigationOptions: {
            title: 'Menu',
            drawerLabel: 'Menu'
        }
    },
    ContactUs: {
        screen: ContactNavigator,
        navigationOptions: {
            title: 'Contact Us',
            drawerLabel: 'Contact Us'
        }
    }
}, {
    drawerBackgroundColor: '#D1C4E9'
});

class Main extends Component {

    render() {
        return (
            <View style={{ flex: 1, paddingTop: Platform.OS === 'ios' ? 0 : Expo.Constants.statusBarHeight }}>
                <MainNavigator />
            </View>
        )
    }
}

export default Main;

import React，{Component}来自'React'；
从“/MenuComponent”导入菜单；
从“/HomeComponent”导入主目录；
从“/ContactComponent”导入联系人；
从“./AboutComponent”导入关于；
从“./DishdetailComponent”导入Dishdetail；
从“react native”导入{View，Platform}；
从“反应导航”导入{createStackNavigator，createDrawerNavigator}；
const MenuNavigator=createStackNavigator({
菜单：{屏幕：菜单}，
Dishdetail:{屏幕：Dishdetail}，
联系人：{屏幕：联系人}，
关于：{屏幕：关于}
}, {
initialRouteName:“菜单”，
导航选项：{
头型：{
背景颜色：“#512DA8”
},
标题颜色：“#fff”，
头饰样式：{
颜色：'#fff'
}
}
});
常量HomeNavigator=createStackNavigator({
主页：{screen:Home}，
Dishdetail:{屏幕：Dishdetail}，
联系人：{屏幕：联系人}，
关于：{屏幕：关于}
}, {
导航选项：{
头型：{
背景颜色：“#512DA8”
},
标题颜色：“#fff”，
头饰样式：{
颜色：'#fff'
}
}
});
const AboutNavigator=createStackNavigator({
主页：{screen:Home}，
Dishdetail:{屏幕：Dishdetail}，
联系人：{屏幕：联系人}，
关于：{屏幕：关于}
}, {
导航选项：{
头型：{
背景颜色：“#512DA8”
},
标题颜色：“#fff”，
头饰样式：{
颜色：'#fff'
}
}
});
const ContactNavigator=createStackNavigator({
主页：{screen:Home}，
Dishdetail:{屏幕：Dishdetail}，
联系人：{屏幕：联系人}，
关于：{屏幕：关于}
}, {
导航选项：{
头型：{
背景颜色：“#512DA8”
},
标题颜色：“#fff”，
头饰样式：{
颜色：'#fff'
}
}
});
const main navigator=createDrawerNavigator({
主页：{
屏幕：HomeNavigator，
导航选项：{
标题:"家",，
抽屉标签：“家”
}
},
关于：
{
屏幕：关于Avigator，
导航选项：{
标题：“关于我们”，
抽屉标签：“关于我们”
}
},
菜单：
{
屏幕：MenuNavigator，
导航选项：{
标题：“菜单”，
抽屉标签：“菜单”
}
},
联系人：{
屏幕：ContactNavigator，
导航选项：{
标题：“联系我们”，
抽屉标签：“联系我们”
}
}
}, {
抽屉背景颜色：“#D1C4E9”
});
类主扩展组件{
render（）{
返回(
)
}
}
导出默认主；

可能是您使用

    Home: { screen: Home },
    Dishdetail: { screen: Dishdetail },
    Contact: { screen: Contact },
    About: { screen: About }

在所有的导航器中，您需要的是适当的屏幕。在每个屏幕上显示每个屏幕。意思是，你会

        Menu: { screen: Menu },
        Dishdetail: { screen: Dishdetail },

---

仅在MenuNavigator中，仅在

Home:{screen:Home}、

等中。你应该从那里开始。尽管如此，你的方法可能会奏效，但这是不必要的。

这是大约3个月前解决的，我真的不记得实际的解决方案是什么。话虽如此，我还是要告诉你一点，因为只有你回答：）