Saya cukup baru di React-Native. Saya mencoba menambahkan menu sideBar/hamburger ke aplikasi saya dengan mengimplementasikan komponen 'react-native drawer'. Pertama, saya mencoba menambahkan kode contoh dari GitHub ke proyek pengujian baru saya hanya untuk memahami cara kerjanya. Saya menghadapi kesalahan di layar.

Itu akan membuat saya sangat senang, Jika saya mendapatkan bantuan. Atau bisakah Anda memberi tahu saya cara yang lebih mudah untuk menerapkan menu sideBar/hamburger ke proyek saya.

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

Dan inilah Komponen SideBarContent saya.

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

enter image description here

3
Ali Zeynalov 12 Maret 2017, 14:56

2 jawaban

Jawaban Terbaik

<MainView /> pada dasarnya adalah layar yang akan Anda tampilkan sebelum menu hamburger.

<ControlPanel /> adalah tampilan samping yang akan Anda tampilkan setelah pengguna mengklik menu Hamburger. Dengan kata lain, ini adalah menu sampingan yang sebenarnya.

<Drawer /> mengontrol pembukaan/penutupan tampilan ini, animasi, fungsi lain dari menu laci/tampilan samping/samping (apa pun yang Anda ingin menyebutnya).

Anda masih perlu membuat tampilan ini. Saya akan membantu Anda dengan itu menunjukkan contoh aplikasi saya.

<MainView/> saya adalah layar di bawah ini: MainViewControPanel

Gui Herzog 12 Maret 2017, 13:36

Karena saya tidak menggunakan sistem jadi belum memeriksa kerja kode, tetapi ini seharusnya berfungsi.

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

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

Tolong beri tahu saya jika ada masalah..

6
Neel Gala 12 Maret 2017, 15:06