React native 反应式StackNavigator内置抽屉导航器

代码优先：

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

import React，{Component}来自'React'；
从“react native”导入{AppRegistry，Image，TouchableHighlight}；
从“反应导航”导入{StackNavigator，DrawerNavigator}；
从“./screens/Home”导入屏幕主页
从“./screens/Register”导入屏幕寄存器
从“反应本机矢量图标/FontAwesome”导入FontAwesome；
const StackScreens=StackNavigator({
主页：{screen:ScreenHome}，
寄存器：{屏幕：屏幕寄存器}，
},{
headerMode:“屏幕”，
导航选项：{
标题：{
可见：对，
标题：(
),
左：(
{
//此处错误：this.props.navigation未定义
//this.props.navigation.navigate（'drawerropen'））
}}>
),
对:(
)
}
}
});
常量应用程序=抽屉驱动程序({
主页：{screen:ScreenHome}，
寄存器：{screen:StackScreens}
})
AppRegistry.registerComponent（'ReactApp'，（）=>App）；

---

当我想调用这个.props.navigation.navigate（'drawerropen'）时，我得到一个错误（未定义…）。在屏幕注册器内，它按预期工作，抽屉菜单打开。如何在StackNavigator标题的navigationOptions中调用this.props.navigation？然后，此标题将显示在我的所有后续屏幕中，并带有打开抽屉菜单的图标

用下面的代码更新了标题部分

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

标题：（{navigate}）=>({
可见：假，
标题：(
),
左：(
{
//在此更新
导航（'drawerropen'）
}}>
),
对:(
)
})

我有一个将StackNavigators嵌入抽屉导航器的插件

---

希望有帮助。

链接不再有效