通用标题

Question

我很反应原生和反应我正在将DrawerNavigator集成到我的通用标题中。问题是如果我将DrawerNavigator代码部分单独放在屏幕中它可以工作。但我希望DrawerNavigator成为我的通用标题的一部分，以便在所有屏幕上呈现。

这是我的标题组件：

export default class Header extends Component {
    constructor(...rest) {
        super(...rest)

        this.state = {
            spinner: false,
            theme: defaultTheme
        }
    }

    renderHamburgerButton(computedStyles) {
        return (
            <View style={computedStyles("logoutContainer")}>
                <Ionicons name="md-menu" color="#fff" style={{ paddingRight: 10, paddingTop: 5 }} size={26} 
                            onPress={() => this.props.navigation.navigate('DrawerNavigator')} />
            </View>
        )
    }

render() {
        let { title, subTitle, navigation } = this.props,
            styleOverides = {}

        if (!subTitle) {
            styleOverides = title ? stylesOveridesNoSubTitle : stylesOveridesNoTitle
        }

        const computedStyles = this.mergeStyles(styles, styleOverides)

        return (
            <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
                <View>
                    <StatusBar barStyle="light-content" backgroundColor="transparent" translucent />
                    <Spinner visible={this.state.spinner} />
                    <View style={[computedStyles("header"), { backgroundColor: this.state.theme.headerBackgroundColor }]}>
                        <View style={styles.headerLeft}>{this.renderBackButton(computedStyles)}</View>
                        <View style={styles.headerRight}>
                            {this.renderHamburgerButton(computedStyles)}
                            {this.renderTitle(computedStyles)}
                            {this.renderSubTitle(computedStyles)}
                        </View>
                    </View>
                </View>
            </TouchableWithoutFeedback>
        )
    }
}


export function renderHeader(title = null, subTitle = null, hideBack = false, handleBackPress = null) {
    return props => React.createElement(Header, { ...props, title, subTitle, hideBack, handleBackPress })
}

这是抽屉菜单：

import React, { Component } from "react"
import { UIManager, Platform } from "react-native"

import TpoScreen from "screens/tpo";
import Header from "components/header";

import { DrawerNavigator } from "react-navigation"
import { NavigatorService } from "services/navigator"

const AppDrawerNavigator = new DrawerNavigator({
    Tpo: { screen: TpoScreen },
    Blank: { screen: TpoScreen }
},
    {
        drawerPosition: "right"
    })

export default AppDrawerNavigator;

以下是我生成标题的WelcomeScreen：

export default class WelcomeScreen extends SiteFuelScreen {
    static navigationOptions = ({ navigation }) => {
        return {
            header: renderHeader(null, null, true)
        }
    }
}

当我点击md菜单图标时，它会转到下一个/上一个屏幕，抽屉不会打开。

请注意：当我将标题代码单独放入我的WelcomeScreen而不是通用标题时，抽屉就会出现故障。

截图： enter image description here