React-Navigate抽屉未突出显示标签

Question

我正在做一个React-Native项目（school :)），但遇到一个我找不到解决方案的问题。我正在使用抽屉导航器元素，除了第二个元素“关于”不会突出显示并关闭抽屉之外，其他所有东西都起作用。我看过但似乎无法确定此元素与其他元素之间的任何区别。不幸的是，我在此方面的工作一直是复制和粘贴，而对我为什么要做自己的工作背后的机制没有太多的了解（课程是在线的，并且有很多“这样做以获得这种”教学形式）。

这是我的页面代码。请让我知道我所缺少的信息，最好是为什么id无法使用。

谢谢。

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;

Answer 1

可能是您使用]造成的问题>

    Home: { screen: Home },
    Dishdetail: { screen: Dishdetail },
    Contact: { screen: Contact },
    About: { screen: About }
在所有导航器中，您需要的是适当的屏幕。在每个屏幕上显示每个屏幕时。意思是，你将有

        Menu: { screen: Menu },
        Dishdetail: { screen: Dishdetail },
仅在MenuNavigator]中，仅在Home: { screen: Home },中，依此类推。您应该从这里开始。话虽这么说，您的方式也许行得通，但这是不必要的。