react-native - DrawerNavigator 内的 ReactNative StackNavigator

Question

代码优先:

import React, { Component } from 'react';
import {AppRegistry, Image, TouchableHighlight} from 'react-native';
import { StackNavigator, DrawerNavigator } from 'react-navigation';

import ScreenHome from './screens/Home'
import ScreenRegister from './screens/Register'
import FontAwesome from "react-native-vector-icons/FontAwesome";

const StackScreens = StackNavigator({
    Home: { screen: ScreenHome },
    Register: { screen: ScreenRegister },
},{
    headerMode: "screen",
    navigationOptions : {
        header: {
            visible: true,
            title: (
                <Image
                    source={require("./images/logo_colored.png")}
                    style={{width: 150, height: 25, marginLeft: 15, marginRight: 15}}
                    resizeMode={"contain"}
                />
            ),
            left: (
                <TouchableHighlight
                    underlayColor='rgba(94, 3, 67, 0.5)'
                    onPress={() => {
                        // ERROR HERE: this.props.navigation is undefined
                        //this.props.navigation.navigate('DrawerOpen')
                    }}>
                <FontAwesome name='bars' size={20} color={"#333333"} style={{paddingLeft: 20}}/>
                </TouchableHighlight>
            ),
            right: (
                <FontAwesome name='user-o' size={20} color={"#333333"} style={{paddingRight: 20}}/>
            )
        }
    }
});

const App = DrawerNavigator({
    Home: { screen: ScreenHome },
    Register: { screen: StackScreens }
})

AppRegistry.registerComponent('ReactApp', () => App);

当我想调用 this.props.navigation.navigate('DrawerOpen') 时出现错误(未定义 ...)。在 ScreenRegister 内部，这按预期工作，抽屉菜单打开。我如何在我的 StackNavigator header 的 navigationOptions 中调用 this.props.navigation？然后，此标题将显示在我所有其他屏幕中，并带有打开抽屉菜单的图标。

Answer 1

使用以下代码更新了标题部分。

    header:({ navigate })=>({
        visible: false,
        title: (
            <Image
                source={require("./images/logo_colored.png")}
                style={{width: 150, height: 25, marginLeft: 15, marginRight: 15}}
                resizeMode={"contain"}
            />
        ),
        left: (
            <TouchableHighlight
                underlayColor='rgba(94, 3, 67, 0.5)'
                onPress={() => {
                    // UPDATED HERE
                    navigate('DrawerOpen')
                }}>
            <FontAwesome name='bars' size={20} color={"#333333"} style={{paddingLeft: 20}}/>
            </TouchableHighlight>
        ),
        right: (
            <FontAwesome name='user-o' size={20} color={"#333333"} style={{paddingRight: 20}}/>
        )
    })