implementing sideBar/hamburger menu with react-native drawer

问题

I'm quite new to React-Native. I'm trying to add sideBar/hamburger menu to my application with implementing 'react-native drawer' component. Firstly, I'm trying to add the example code from GitHub to my new test project just to understand how it works. I face with the error in the screen.

It would make me really happy, If I get some help. Or can you advice me easier way to implement sideBar/hamburger menu to my project.

import Drawer from 'react-native-drawer';
import React, {Component} from 'react';
import SideBarContent from '../common/SideBarContent';
import {Text,View} from 'react-native';

class SideBar extends Component{

    closeControlPanel = () => {
        this._drawer.close()
    };
    openControlPanel = () => {
        this._drawer.open()
    };

    render()
    {
        const drawerStyles = {
            drawer: { shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
            main: {paddingLeft: 3},
        }


        return (
            <Drawer
                type="static"
                content={<SideBarContent/>}
                openDrawerOffset={100}
                styles={drawerStyles}
                tweenHandler={Drawer.tweenPresets.parallax}
            >
                <View><Text>Drawer</Text></View>
            </Drawer>
        );
    }
}

and here is my SideBarContent Component.

import React, {Component} from 'react';
import {Text,View} from 'react-native';


class SideBarContent extends Component{
    render()
    {
        return(
            <View>
                <Text>Order History</Text>
                <Text>Account</Text>
                <Text>Basket</Text>
                <Text>About us</Text>
            </View>
        );
    }
}

回答1:

the <MainView /> is essentially the screen that you will be showing before the hamburger menu.

The <ControlPanel /> is the side view that you will show after the user clicks on the Hamburger menu. In other words, it is the actual side menu.

The <Drawer /> controls the opening/closing of these views, animations, other functionalities of a drawer/side view/ side menu (whatever you wish to call it).

You still need to create these views. I'll help you with that showing an example of an app of mine.

My <MainView/> is this screen below:

My <ControlPanel /> is this one:

I also use the same library you are trying to use.

Hope this helps.

回答2:

As I am not on system so haven't check the working of code, but this should work.

import Drawer from 'react-native-drawer';
import React, {Component} from 'react';
import SideBarContent from '../common/SideBarContent';
import {Text,View} from 'react-native';

export default class SideBar extends Component{

    constructor(){
        super();
        this.closeControlPanel = this.closeControlPanel.bind(this);
        this.openControlPanel = this.openControlPanel.bind(this);
    }

    closeControlPanel = () => {
        this._drawer.close()
    };
    openControlPanel = () => {
        this._drawer.open()
    };

    render()
    {
        const drawerStyles = {
            drawer: { shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
            main: {paddingLeft: 3},
        }

        return (
            <Drawer
                type="static"
                content={<SideBarContent />}
                ref = {(ref) => this._drawer = ref}
                openDrawerOffset={100}
                styles={drawerStyles}
                tweenHandler={Drawer.tweenPresets.parallax}
            >
                <View>
                <Text onPress={this.openControlPanel}>
                    Drawer
                </Text>
                </View>
            </Drawer>
        );
    }
}

An another file SideBarContent

 import React, {Component} from 'react';
    import {Text,View} from 'react-native';


    export default class SideBarContent extends Component{
        constructor() {
            super();
        }
        render()
        {
            return(
                <View>
                    <Text>Order History</Text>
                    <Text>Account</Text>
                    <Text>Basket</Text>
                    <Text>About us</Text>
                </View>
            );
        }
    }

Please let me know if any issues..

来源：https://stackoverflow.com/questions/42747087/implementing-sidebar-hamburger-menu-with-react-native-drawer

标签

react-native

sidebar

drawer

hamburger-menu