使用 react-native 抽屉实现侧边栏/汉堡菜单

Posted 2023-04-13

【中文标题】使用 react-native 抽屉实现侧边栏/汉堡菜单

【英文标题】：implementing sideBar/hamburger menu with react-native drawer

【发布时间】：2017-08-02 11:49:12

【问题描述】：

我对 React-Native 还是很陌生。 我正在尝试通过实现“反应原生抽屉”组件将侧边栏/汉堡菜单添加到我的应用程序中。首先，我试图将 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>
        );
    

【问题讨论】：

<ControlPanel/> 和 <MainView/> 元素是不属于 React Native 库的自定义元素。您可以用您自己的内容替换它们，例如。 <div>ControlPanel</div> 看看它的样子

【参考方案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>
            );
        
    

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

【讨论】：

谢谢伙计，这应该可行。他忘记添加导出默认值，将引用添加到抽屉中。

【参考方案2】：

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

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

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

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

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

我的<ControlPanel /> 是这个：

我也使用您尝试使用的同一个库。

希望这会有所帮助。

【讨论】：

非常感谢。它几乎让我明白了一切。我为“内容”而不是 ControlPanel 创建了新组件，并用简单的“视图”组件更改了 MainView，只是为了查看汉堡菜单及其内容。我用当前的代码编辑了我的代码，所以你可以看到。但是，现在，我收到“检查默认渲染器的渲染方法”错误，我也将其筛选并添加到问题中，因此您可以看到。你知道我做错了什么吗？在谷歌上搜索后我无法获得。

让我帮你查一下。

我还添加了用于“内容”的“SideBarContent”组件代码。我不知道，也许我在那里做错了什么。

我的猜测是您从方括号内的 react native 导入了视图，当您在抽屉内使用它时，代码被破坏了。我必须看这里，但无论如何尝试使用简单视图创建一个组件并导入它，或者尝试在导入的括号外导入视图。我不知道它是否会起作用，但如果不起作用，我可以稍后再找你。

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