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

Question

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

如果我能得到一些帮助，我会很高兴。或者你能建议我更简单的方法来为我的项目实现 sideBar/hamburger 菜单。

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 /> 控制 opening/closing 这些视图、动画和 drawer/side 视图/侧边菜单（随便你怎么称呼）的其他功能。

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

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

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

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

implementing sideBar/hamburger menu with react-native drawer

sidebar

drawer

hamburger-menu

react-native