使用react-native抽屉实现sideBar/hamburger菜单

Question

我对React-Native很新.我正在尝试通过实现'react-native drawer'组件将sideBar/hamburger菜单添加到我的应用程序中.首先,我试图将GitHub中的示例代码添加到我的新测试项目中,以了解它是如何工作的.我面对屏幕上的错误.

如果我得到一些帮助,那会让我很开心.或者你能告诉我更简单的方法来实现我的项目的sideBar /汉堡菜单.

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

这是我的SideBarContent组件.

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

Answer 1

由于我不在系统上,所以没有检查代码的工作,但这应该工作.

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

另一个文件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>
            );
        }
    }

如有任何问题,请告诉我..