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

Question

我正在做一个 React-Native 项目（学校），我遇到了一个找不到解决方案的问题。我正在使用抽屉导航器元素，除了第二个元素“关于”没有突出显示和关闭抽屉外，一切正常。我看过但似乎无法确定此元素与其他元素之间的任何区别。不幸的是，我在这方面的工作已被复制和粘贴，但没有太多理解我为什么做我正在做的事情背后的机制（课程是在线的，并且有很多“这样做是为了得到这个”类型的教学）。

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

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 }, 中，依此类推。你应该从那里开始。话虽这么说，你的方法可能行得通，但没必要。

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

React-Navigate Drawer not Highlighting Labels

react-native

navigation-drawer

stack-navigator