无法在堆栈导航器中打开 DrawerNavigator 选项卡

Question

我无法打开抽屉导航器。可能按钮没有将导航道具传递给它。但我不知道为什么会这样。抽屉导航器是在 stacknavigator 内创建的，因此它会在单击主屏幕上的按钮时显示一个汉堡菜单。

创建了一个堆栈导航器来在登录、注册、主页屏幕之间导航（主页屏幕本身是一个底部导航栏，主页组件在主页屏幕中默认呈现）。创建了一个抽屉式导航器以在单击时打开（此按钮是 Home 的一部分）但它没有打开并出现错误“this2.props.navigation.dispatch not a function/object.

这是我的 Drawernavigator.js 文件

import React, {Component} from 'react';
import {createAppContainer , createDrawerNavigator } from 'react-navigation';
import {View,Text,Image,TouchableOpacity,Button}  from 'react-native';

//importing customised components from other folders

import Home from '../components/Home';
import AboutPGMEE from './AboutPGMEE';
import FAQ from './FAQ';
import Settings from './Settings';
import ContactPGMEE from './ContactPGMEE';
import Notification from './Notifications';
import LogOut from './LogOut';
import TermsOfUse from '../Screens/InitialScreens/TermsOfUse';
import PrivacyPolicy from './PrivacyPolicy';
import ShareApp from './ShareApp';
import Videos from  '../components/Videos';
import AppContainer from '../FirstNavigator';
import HomeScreen from '../HomeScreen';
const DrawerStack=createDrawerNavigator(
    { 

/*

              HomeScreen:()=><HomeScreen/>,
   //() => <YOUR COMPONENT/> to suppress the error modifications made here into the syntax
     AboutPGMEE:()=>< AboutPGMEE/>,
     FAQ: ()=><FAQ/>,
      Settings:()=><Settings/>,
      ContactPGMEE:()=><ContactPGMEE/>,
      Notification:()=><Notification/>,
     LogOut:()=><LogOut/>,
      TermsOfUse:()=><TermsOfUse/>,
    PrivacyPolicy:()=><PrivacyPolicy/>,
    Home:()=><Home/>,

*/
    //   Home:Home,
        HomeScreen:FAQ,
       AboutPGMEE: AboutPGMEE,
       FAQ:FAQ,
      Settings:Settings,
      ContactPGMEE:ContactPGMEE,
      Notification:Notification,
      LogOut:LogOut,
      TermsOfUse:TermsOfUse,

    PrivacyPolicy:PrivacyPolicy

     },
     {
          initialRouteName:'HomeScreen',
           backBehavior:'initialRoute',
           drawerBackgroundColor:'powderblue',
           drawerPosition:'left',
           drawerWidth:300,
           contentOptions: {
            activeTintColor: '#e91e63',
          },


     }

)

const SideBarNavigator=createAppContainer(DrawerStack);
 export default SideBarNavigator;

下面是我的 Firstnavigator.js

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer,createSwitchNavigator } from 'react-navigation';

import HomeScreen from './HomeScreen';
import LogInScreen from './Screens/InitialScreens/LogInScreen';
import SignUpScreen from './Screens/InitialScreens/SignUpScreen';
import TermsOfUse from './Screens/InitialScreens/TermsOfUse';
import Home from './components/Home';
import SideBarNavigator from './sidebar/DrawerNavigator'
const RootStack = createSwitchNavigator(
  {
    LogInScreen: LogInScreen,
    HomeScreen: HomeScreen,
    SignUpScreen: SignUpScreen,
    TermsOfUse:TermsOfUse,
    Home:Home,
    SideBarNavigator:SideBarNavigator,
  },
  {
    initialRouteName: 'LogInScreen',
  }
);

const AppContainer = createAppContainer(RootStack);

export default AppContainer;

下面是我的 Home.js （仅包含相关代码。较大的文件，假设语法很好）

import React from 'react';
import {Col, Row, Grid} from 'react-native-easy-grid';
import {View,StyleSheet,Text,ScrollView,Image,TouchableOpacity } from 'react-native';
import Booklist from './BookList';
import {Card} from 'react-native-elements';
import {createStackNavigator,createAppContainer, DrawerActions} from 'react-navigation';
import SideBarNavigator from '../sidebar/DrawerNavigator';

export default class Home extends React.Component {

  render() {

    return (  
  <ScrollView style={{flex:1}}>
  <View style={styles.container}>

           <View style={[styles.boxContainer,styles.bigheader]}>

                    <View style={{flex:1,flexDirection:'column'}}>
                            <View style={{flex:1,flexDirection:'column',backgroundColor:'#8E24AA'}}> 
                                             <View style={{backgroundColor:'#8E24AA'}}>
                                                  <Text>  </Text>

                                                 <View style={{flexDirection:'row',alignContent:'center',                  alignItems:'center',justifyContent:'center'}}> 
                                                      <View style={{flex:1}}>
                                                      <TouchableOpacity  onPress={()=>this.props.navigation.dispatch(DrawerActions.openDrawer())}>

                                                      <Image source={require('./tab.png')} style={{height:30,width:35}}/>
                                                      </TouchableOpacity>

                                                      </View>
                                                       <View style={{flex:12}}>
                                                       <Text style={{fontSize:30,textAlign:'center',fontWeight:'bold',color:'white'}}>
                                                              DASHBOARD
                                                          </Text>

                  #########
                                     </View>

这是 HomeScreen.js

import  React  from 'react';
import Home from './components/Home';
import Qbank from './components/Qbank';
import Test from './components/Test';
import Videos from './components/Videos';

import { BottomNavigation } from 'react-native-paper';
//import AppContainers from './components/Home';

const GoToHome=()=>{
  return (<Home/>)
}
const GoToTest=()=>{
  return ( <Test/>)
}

const GoToQbank=()=>{
  return ( <Qbank/>)
}
const GoToVideos=()=>{
  return ( <Videos/>)
}



export default class HomeScreen extends React.Component {

 handleIndexChange=index=>this.setState({index});

 state={index:0,routes:[{key:'Home',title:'Home',icon:'home'},
                        {key:'Qbank',title:'Qbank',icon:'question-answer'},
                       {key:'Test',title:'Test',icon:'timer-off'},
                        {key:'Videos',title:'Videos',icon:"video-call"},
 ],};
renderScene=BottomNavigation.SceneMap({
  Home:GoToHome,
  Test:GoToTest,
  Qbank:GoToQbank,
  Videos:GoToVideos,

});

  render() {
    return (

     <BottomNavigation
  navigationState={this.state}
  onIndexChange={this.handleIndexChange}
  renderScene={this.renderScene}

       />


    )}
  }

我希望在单击 Home.js 中提到的图像时打开抽屉。但它给出了错误。

Answer 1

抽屉导航和嵌套导航堆栈示例：

const RootStack = createStackNavigator({
    LogInScreen,
    SignUpScreen,
    TermsOfUse,
    DrawerNav
}, {
  ...
});

const DrawerNav = createDrawerNavigator({
    Home,
    AboutPGMEE,
    FAQ,
    Settings,
    ContactPGMEE,
    Notification,
    LogOut,
    TermsOfUse,
    PrivacyPolicy
}, {
  ...
})

Home 也可以是另一个堆栈导航器。如果组件的名称与所需的键相同，您也可以删除组件分配。