Question

对于我的项目，我想在左上方有一个Hamburger（menu）图标，单击该图标应在左侧打开DrawerRouters。总的来说，我在DrawerRouters中有5条路线，分别是“登录”，“我的课程”，“所有课程”，配置文件和注销。在这5个路由器中，其中2个（“我的课程”，“所有课程”）指向同一堆栈导航器（自定义堆栈，将使用screenProps区分它们）。

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

DrawerRoutes Page Image(MyRoutes)

All Course Page Image(Course)

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

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

在“内部课程”页面上，菜单图标以及标题显示在标题上，但是，单击它不会在左侧显示抽屉路径。

1）我在“课程”页面中使用DrawerOpen获取DrawerRoutes及其不起作用

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

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

Answer 1

您可以添加图标类型并再次测试

示例：

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

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

1 个答案: