抽屉导航器中的 React Native Stack Navigator答案

【问题标题】：ReactNative StackNavigator inside DrawerNavigator抽屉导航器中的 React Native Stack Navigator
【发布时间】：2017-08-25 10:22:34
【问题描述】：

代码优先：

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？然后，此标题将显示在我的所有其他屏幕中，并带有打开抽屉菜单的图标。

【问题讨论】：

标签： react-native

【解决方案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}}/>
        )
    })

【讨论】：

【解决方案2】：

我有一个 sample，它在 DrawerNavigator 中嵌入了 StackNavigators。

希望对你有帮助。

【讨论】：

链接不再有效