如何像Android一样添加抽屉标题视图?

时间:2017-07-12 07:01:52

标签: react-native react-navigation

我使用react-navigation并使用一些引用来创建抽屉,它看起来很好。 enter image description here

但我想添加一个headerView,但无法找到实现它的方法。

是否有可能像Android一样创建抽屉headerView?

Ant的帮助将不胜感激。

这是MyDrawer.js:

import React, { Component } from 'react';
import { Image, ScrollView } from 'react-native';
import { DrawerNavigator, DrawerItems } from 'react-navigation';
import PageOne from './PageOne';
import PageTwo from './PageTwo';


class MyDrawer extends Component {
    render() {

        const TheDrawer = DrawerNavigator({
            PageOne: {
                screen: PageOne,
                navigationOptions: {
                    drawerLabel: 'It\s page One',
                    drawerIcon: () => (
                        <Image source={require('../img/nav_icon_home.png')} />
                    ),
                },
            },

            PageTwo: {
                screen: PageTwo,
                navigationOptions: {
                    drawerLabel: 'It\'s page Two',
                    drawerIcon: () => (
                        <Image source={require('../img/nav_icon_home.png')} />
                    ),
                },
            },
        }, {
                drawerWidth: 300,    
                contentComponent: props => <ScrollView>
                    <DrawerItems {...props}
                        activeTintColor='#008080'
                        activeBackgroundColor='#EEE8AA'
                        inactiveTintColor='#20B2AA'
                        inactiveBackgroundColor='#F5F5DC'
                        style={{backgroundColor: '#F5F5DC'}}
                        labelStyle={{color: '#20B2AA'}}
                    />
                </ScrollView>
            });

        return (
            <TheDrawer />
        );
    }

};

export default MyDrawer;

0 个答案:

没有答案