Reactjs 菜单图标未映射到抽屉浏览器导航-反应本机导航

对于我的项目，我希望在左上角有一个汉堡包（菜单）图标，单击它可以打开左侧的抽屉。总共，我在抽屉里有5条路径，即登录、“我的课程”、“所有课程”、配置文件和注销。在这5个路由器中，有2个（“我的路线”、“所有路线”）指向同一个堆栈导航器（自定义堆栈，将使用屏幕道具区分它们）

问题是，如果我单击5个屏幕中每个屏幕上显示的菜单图标，抽屉浏览器将无法打开。我将在下面添加我的代码和图像

App.js

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

Expo.registerRootComponent(AppContainer);

导出默认类AppContainer扩展React.Component{
render（）{
返回（）；
}
}
世博会注册组件（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/>);
    }
}

const CustomStack=createStackNavigator({
课程
模块主义者，
第二课，
章节列表，
节编辑，
});
类AllCourse扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
)
}
}
类MyCourse扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回(
)
}
}
const DrawerRouter=createDrawerNavigator({
登录：{
屏幕：登录，
导航选项：（{navigation}）=>({
标题：“登录标题”，
})
},
“我的课程”：{
屏幕：MyCourse，
导航选项：（{navigation}）=>({
标题：“Mycourse标题”，
})
},
“所有课程”：{
屏幕：所有课程，
导航选项：（{navigation}）=>({
标题：“所有课程标题”，
})
},
简介：{
屏幕：配置文件，
导航选项：（{navigation}）=>({
标题：“个人资料标题”，
})
},
注销：{
屏幕：注销，
导航选项：（{navigation}）=>({
标题：“注销标题”，
})
}
},
{
initialRouteName:'登录'，
内容选项：{
activeTintColor:“#548ff7”，
activeBackgroundColor:'透明'，
InactiveIntColor:“#ffffff”，
inactiveBackgroundColor:“透明”，
标签样式：{
尺寸：15，
marginLeft:0，
},
},
抽屉宽度：屏幕宽度*0.8，
contentComponent:CustomDrawerContentComponent，
DropeRopenRoute:“DropeRopen”，
抽屉关闭路线：“抽屉关闭”，
DroperTogglerOute:“DroperToggle”，
}
);
const CustomDrawerContentComponent=props=>(
学生世界
);
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#3498db”，
为内容辩护：“中心”，
},
});
导出默认类MyRoutes扩展React.Component{
render（）{
返回（）；
}
}

Course.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>);
    }
}

导出默认类课程扩展组件{
静态导航选项=（{navigation}）=>{
返回{
标题：“课程”，
headerLeft:navigation.navigate（'drawerropen'）}/>，
};
};
render（）{
返回（课程页面）；
}
}

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

1） 我在课程页面中使用DrawerRopen获取抽屉，但它不起作用

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

headerLeft:navigation.navigate（'drawerropen'）}/>

---

2） 如何将菜单图标与左抽屉绑定箭头您可以添加图标类型并再次测试

示例：

<Icon type="MaterialIcons" name="error-outline" />

---

感谢您的反馈。添加了上述代码，但仍无法正常工作