React Native从Tabnavigator导航到堆栈导航器

Question

我有一个标签导航器，其中MyHomeScreen是初始视图。 在我的主屏幕中，我有另一个组件，其中有一个操作可以导航到另一个屏幕但是当我按下它时却没有导航到AnotherscreenWithouttab。

MyHomeScreen

render() {
    const navigation = this.props.navigation;
    const {navigate} = this.props.navigation;
    return (
        <Actionscreen
             navigation={navigation}
        />
        </View>
    );
}

ActionScreen

render() {    
    const {navigate} = this.props.navigation;

    return (
        <View >
            <TouchableOpacity 
                onPress={ () => navigate('AnotherscreenWithouttabRoute', { param1: 'Route-1' }) }
            ><Text>go to another screen</Text></TouchableOpacity>
        </View>    
    );
}

TabNavigator的

  const DashboardTab = TabNavigator(
        {
            Home: {
                screen: MyHomeScreen,
                path: '',
            },
            People: {
                screen: FeedScreen,
                path: 'cart',
            }
        }
class DashboardTabComponent extends Component {

    constructor(props) {
        super(props);
    }

    render() {

        const {
            navigation,
            screenProps
        } = this.props;

        return(
            <DashboardTab
                //navigation={navigation}
                screenProps={screenProps}
                //screenProps={this.state}
            />
        );
    }

}

router.js

import React, { Component } from 'react';
import { Text, View, ScrollView, TouchableOpacity, AsyncStorage, ActivityIndicator, Image, StyleSheet } from 'react-native';
import { DrawerNavigator, DrawerItems, DrawerView, StackNavigator, TabNavigator, Header } from 'react-navigation';


import { HomeComponent } from "./Home/HomeComponent";

import { AboutusComponent } from "./Aboutus/AboutusComponent";

import { AnotherscreenWithouttabComponent } from "./AnotherscreenWithouttab";

import FeedAndSearchTab from "./feed/FeedAndSearchTab";
import { DetailsScreen1 } from "./Details/DetailsScreen1";
import { DetailsScreen2 } from "./Details/DetailsScreen2";

import * as css from "./Styles/Styles";
import { Button, Icon } from "react-native-elements";

//
// tabs
//

const nav_tab = TabNavigator(
    // route config
    {
        DetailsRoute1: { screen: DetailsScreen1 },
        DetailsRoute2: { screen: DetailsScreen2 },
    },
    // navigator config
    {
        lazy: true, // render the tabs lazily
        tabBarPosition: 'bottom', // where are the tabs shown
        backBehavior: 'none', // back button doesn't take you to the initial tab
        tabBarOptions: css.tabs
    },
);




//
// stack
//
export const AppNavigator = (isIntroRead = false, isSignedIn = false) => {
    return StackNavigator(
    // route config
    {
        HomeRoute: { screen: HomeComponent, path: 'home', }, // this is displayed first

        AboutusRoute: { screen: AboutusComponent },

        AnotherscreenWithouttabRoute: { screen: AnotherscreenWithouttabComponent , path: 'appointment/schedule', },

    },
    // navigator config
    {
        //headerMode: 'none', // this removes the navigation header
        initialRouteName: isIntroRead ? 'HomeRoute' : 'IntroRoute', // HomeRoute /IntroRoute AppointmentScheduleRoute
        navigationOptions: ({ navigation, screenProps }) => {
            return {
                headerTitle: <Title
                                navigation={navigation}
                                titleName={'Doctor On Call'}
                            />, // label text // headerTitle: "Hi",
                ...css.header, // other styling
                headerLeft: <TitleAndIcon navigation={navigation} />,
                headerRight: <MenuIcon
                                navigation={navigation}
                                screenProps={screenProps}
                             />,
                header: (props) => <ImageHeader {...props} />,
            }
        },
        cardStyle:{backgroundColor: '#FFFFFF', shadowOpacity: 0, shadowColor: 'transparent', }
    }
    );
};

//export default AppNavigator;