使用react原生抽屉实现侧边栏/汉堡菜单

Question

我对React-Native非常陌生。我正在尝试通过实现'react-native drawer‘组件将侧栏/汉堡菜单添加到我的应用程序中。首先，我尝试将GitHub中的示例代码添加到我的新测试项目中，只是为了理解它是如何工作的。我面对屏幕上的错误。

如果我能得到一些帮助，我会很高兴的。或者你可以建议我更简单的方式来实现我的项目侧栏/汉堡包菜单。

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

<MainView />实质上是您将在汉堡菜单之前显示的屏幕。

<ControlPanel />是用户单击汉堡包菜单后将显示的侧视图。换句话说，它是实际的侧边菜单。

<Drawer />控制这些视图的打开/关闭、动画、抽屉/侧视图/侧边菜单的其他功能(无论您如何称呼它)。

您仍然需要创建这些视图。我将帮助您展示我的一个应用程序的示例。

我的<MainView/>显示在下面的屏幕上：

​

我的<ControlPanel />是这样的：

​

我也使用与您尝试使用的库相同的库。

希望这能有所帮助。

Answer 2

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

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

如果有任何问题，请告诉我..