Example

示例

import React, { Component } from 'react';
import {
    StyleSheet,
    DrawerLayoutAndroid,
    TouchableOpacity,
    View,
    Image,
    Text
} from 'react-native';

export  class pageComponent extends Component {

    render() {
        let imageSource={uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583480946734&di=2df09c69837af079044abc874e1750c2&imgtype=0&src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0704%2Fe53c868ee9e8e7b28c424b56afe2066d.jpg'};

        let navigationView = (
            <View style={styles.container}>
                <View style={styles.navView}>
                    <Image
                        style={styles.headImg}
                        source = {imageSource}/>
                    <Text style={styles.draw_title}>安卓侧滑</Text>
                </View>
                <TouchableOpacity
                    onPress={this.close}>
                    <View style={styles.drawerItemView}>
                        <Image
                            style={styles.itemImg}
                            source = {imageSource}/>
                        <Text
                            style={styles.item_text}>首页</Text>
                    </View>
                </TouchableOpacity>
                <View style={styles.drawerItemView}>
                    <Image
                        style = {styles.itemImg}
                        source = {imageSource}/>
                    <Text
                        style={styles.item_text}>订单</Text>
                </View>
                <View style={styles.drawerItemView}>
                    <Image
                        style = {styles.itemImg}
                        source = {imageSource} />
                    <Text
                        style={styles.item_text}>我的</Text>
                </View>
            </View>
        );
        return (
            <DrawerLayoutAndroid
                ref={(drawer) => { this.drawer = drawer; }}
                drawerWidth={230}
                drawerPosition={DrawerLayoutAndroid.positions.Left}
                renderNavigationView={() => navigationView}>
                <View style={styles.container}>
                    <View style={styles.title_view}>
                        <TouchableOpacity
                            onPress={this.open}>
                            <Image
                                style={styles.leftImage}
                                source = {imageSource}
                            />
                        </TouchableOpacity>
                        <Text style={styles.titleText}>
                            安卓侧滑Demo
                        </Text>
                        <Text style={styles.titleText}>
                            更多选项
                        </Text>
                    </View>
                </View>
            </DrawerLayoutAndroid>
        )
    }

    open = () => {
        this.drawer.openDrawer();
    }
    close = () => {
        this.drawer.closeDrawer();
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    navView: {
        flexDirection: 'column',
        height: 150,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#00ff00',
    },
    drawerItemView: {
        flexDirection: 'row',
        height: 50,
        paddingLeft: 30,
        paddingTop: 6,
        paddingBottom: 6,
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
    },
    title_view: {
        flexDirection: 'row',
        height: 90,
        paddingLeft: 15,
        paddingRight: 15,
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#27b5ee',
    },
    titleText: {
        color: '#0000ff',
        fontSize: 18,
        textAlign: 'center'
    },
    headImg: {
        width: 50,
        height: 50
    },

    itemImg: {
        width: 20,
        height: 20
    },

    draw_title: {
        marginTop: 10,
        fontSize: 16,
        color: 'white'
    },
    item_text: {
        fontSize: 14,
        color: 'grey',
        marginLeft: 10
    },
    leftImage: {
        height: 30,
        width:30
    }

});