ReactNative StackNavigator inside

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内部，它按预期工作，并打开抽屉菜单。如何在我的this.props.navigation头的navigationOptions中调用StackNavigator？这个标题将显示在我的所有进一步的屏幕与图标打开抽屉菜单。

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

Answer 2

我有一个示例，它将StackNavigators嵌入DrawerNavigator中。

​

​

希望能帮上忙。