reactjs - 菜单图标未映射到 DrawerRouter Navigation

问题描述

对于我的项目，我想在左上角有一个汉堡包（菜单）图标，单击它应该会打开左侧的 DrawerRouters。总共，我在 DrawerRouters 中有 5 条路由，即登录、我的课程、所有课程、个人资料和注销。在这 5 个路由器中，其中 2 个（“My Course”，“All Course”）指向同一个 Stack Navigator（自定义堆栈，将使用 screenProps 区分它们）。

问题是，如果我单击 5 个屏幕中的每一个屏幕上显示的菜单图标，DrawerRouter 就不会打开。我将在下面添加我的代码和图片

DrawerRoutes 页面图片(MyRoutes)

所有课程页面图片（课程）

应用程序.js

export default class AppContainer extends React.Component {
    render() {
            return (<MyRoutes/>);
    }
}

Expo.registerRootComponent(AppContainer);

MyRoutes.js

const CustomStack = createStackNavigator({
    Course,
    ModuleList,
    LessonTabs,
    SectionList,
    SectionEdit,
});

class AllCourse extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <CustomStack screenProps={{courseType: 'ALL_COURSE'}}></CustomStack>)
    }
}

class MyCourse extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
        <CustomStack screenProps={{courseType: 'MY_COURSE'}}></CustomStack>)
    }
}

const DrawerRouter = createDrawerNavigator({
        Login: {
            screen: Login,
            navigationOptions: ({navigation}) => ({
                title: 'Login Title',
            })
        },
        "My Courses": {
            screen: MyCourse,
            navigationOptions: ({navigation}) => ({
                title: 'Mycourse Title',
            })
        },
        "All Courses": {
            screen: AllCourse,
            navigationOptions: ({navigation}) => ({
                title: 'Allcourse Title',
            })
        },
        Profile: {
            screen: Profile,
            navigationOptions: ({navigation}) => ({
                title: 'Profile Title',
            })
        },
        Logout: {
            screen: Logout,
            navigationOptions: ({navigation}) => ({
                title: 'Logout Title',
            })
        }
    },
    {
        initialRouteName: 'Login',
        contentOptions: {
            activeTintColor: '#548ff7',
            activeBackgroundColor: 'transparent',
            inactiveTintColor: '#ffffff',
            inactiveBackgroundColor: 'transparent',
            labelStyle: {
                fontSize: 15,
                marginLeft: 0,
            },
        },
        drawerWidth: SCREEN_WIDTH * 0.8,
        contentComponent: CustomDrawerContentComponent,
        drawerOpenRoute: 'DrawerOpen',
        drawerCloseRoute: 'DrawerClose',
        drawerToggleRoute: 'DrawerToggle',
    }
);

const CustomDrawerContentComponent = props => (
    <View style={{flex: 1, backgroundColor: '#43484d'}}>
        <View style={{marginTop: 40, justifyContent: 'center', alignItems: 'center'}}>
            <Text>Student World</Text>
        </View>
        <View style={{marginLeft: 10}}>
            <DrawerItems {...props} />
        </View>
    </View>
);

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#3498db',
        justifyContent: 'center',
    },
});

export default class MyRoutes extends React.Component {
    render() {
        return (<DrawerRouter/>);
    }
}

课程.js

export default class Course extends Component {
    static navigationOptions = ({ navigation}) => {
        return {
            title: "Courses",
            headerLeft: <Icon name="menu" size={70} onPress={ () => navigation.navigate('DrawerOpen') }/>,
        };
    };

    render() {
        return (<View><Text>Course Page</Text></View>);
    }
}

在课程页面内，菜单图标和标题显示在标题上，但是，单击它不会在左侧显示抽屉路由。

1）我在课程页面中使用 DrawerOpen 来获取 DrawerRoutes 并且它不工作

headerLeft: <Icon name="menu" size={70} onPress={ () => navigation.navigate('DrawerOpen') }/>

2) 如何将菜单图标与左侧 DrawerRoutes 绑定

标签： reactjsreact-nativenavigation-drawernativereact-native-navigation

reactjs - 菜单图标未映射到 DrawerRouter Navigation - React Native Navigation

问题描述

解决方案

推荐阅读