使用React Native Drawer实现侧边栏/汉堡菜单

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

这是我的侧边栏内容组件。

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

- Ali Zeynalov

---

<ControlPanel/>和<MainView/>元素是自定义元素，不是React Native库的一部分。您可以用自己的内容替换它们，例如<div>ControlPanel</div>，以查看其外观如何。 - Jackson

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

请告诉我是否有任何问题。

- Neel Gala

---

谢谢，伙计。这应该可以工作了。他忘记添加“export default”以将“ref”添加到抽屉中。 - Gui Herzog

Answer 2

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

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

<Drawer /> 控制着这些视图的打开/关闭、动画以及抽屉式视图/侧边菜单等其他功能（无论你想称其为什么）。

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

我的 <MainView/> 是下面这个屏幕：

我的 <ControlPanel /> 是这个：

我也使用了你正在尝试使用的同一库。

希望这可以帮到你。

- Gui Herzog

---

非常感谢。这几乎让我一清二楚了。我为“内容”创建了新组件，而不是ControlPanel，并将MainView更改为简单的“View”组件，只是为了查看汉堡菜单及其内容。我用当前的代码编辑了我的代码，所以你可以看到。但是，现在，我得到了“检查Default Renderer的渲染方法”的错误，我已经截屏并添加到问题中，所以你也可以看到。你有任何想法我做错了什么吗？我在谷歌上搜索了一些东西，但没有找到答案。 - Ali Zeynalov

让我为您检查一下。 - Gui Herzog

嗯，有点遗憾。我会在这里看看。给我10分钟。 - Gui Herzog

哦，是的，你忘记导出 SideBarContent 类了。每次创建外部组件时，应在开头添加：export default。例如，export default class SideBarContent ... - Gui Herzog

@Guilherme Herzog，我想浏览控制面板中的一些组件。这是否可行？ - Balasubramanian