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

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

Answer 2

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

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

<Drawer />控制这些视图，动画，抽屉/侧视图/侧边菜单的其他功能的打开/关闭（无论您想要调用它）。

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

我的<MainView/>就是以下屏幕：

我的<ControlPanel />就是这个：

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

希望这有帮助。

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

2 个答案: