React native 组件不是堆栈导航器的一部分时的props.navigation

我在AppNavigator.js文件中定义了stackNavigator和DrawerNavigator。然后由应用程序导入。在AppNavigator中，我有一个抽屉图标来打开侧边栏，但我还无法打开它，因为导航不存在。我无法将导航传递给AppNavigator，因为应用程序组件不是堆栈导航器的一部分。我试图将我的导航包含在一个文件中，并且仍然能够从那里打开/关闭我的抽屉栏。有什么帮助吗

AppNavigator.js：

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import ScreenHome from './screens/member/ScreenHome';
import { createDrawerNavigator } from 'react-navigation-drawer';
import Icon from "react-native-vector-icons/Ionicons";

const authenicatedNavigation = createStackNavigator(
  {
    Home: {
      screen: ScreenHome,
      navigationOptions: ({ navigation }) => ({
        title: "Home",
        drawerLabel: "Home"
      })
    }
  },
  {
    initialRouteName: "Home",
    headerMode: "screen",
    defaultNavigationOptions: {
      headerStyle: {
          backgroundColor: '#ffffff',
          elevation: 0,
          shadowOpacity: 0
      },
      headerTintColor: '#333333',
      headerTitleStyle: {
          fontWeight: 'bold',
          color: '#ffffff'
      },
      headerLeft: (

        <Icon
        style={{paddingLeft: 10, color:'white'}}
        onPress={()=> navigation.openDrawer()} //-----undefined navigation
        name="md-menu"
        size={30}
        />
      )

  }
  }
)

const MainDrawer = createDrawerNavigator(
  {
    MainTabs: authenicatedNavigation,
  },
  {
    hideStatusBar : false,
    drawerBackgroundColor: 'rgba(255,255,255,0)',
    overlayColor : '#f68873',
    contentOptions: {
      activeTintColor: '#fff',
      activeBackgroundColor: '#6b52ae'
    }
  }



  );

const App = createSwitchNavigator({
  App: {
    screen: MainDrawer,
  }
});


const AppNavContainer = createAppContainer(
 App,
 {
  initialRouteName: 'App',
}
);

export default AppNavContainer;

从“React”导入React；
从“反应导航”导入{createAppContainer，createSwitchNavigator}；
从“反应导航堆栈”导入{createStackNavigator}；
从“/screens/member/ScreenHome”导入屏幕主页；
从“react navigation drawer”导入{createDrawerNavigator}；
从“反应本机矢量图标/离子图标”导入图标；
const authenicatedNavigation=createStackNavigator(
{
主页：{
屏幕：屏幕主页，
导航选项：（{navigation}）=>({
标题：“家”，
抽屉标签：“家”
})
}
},
{
初始路由名称：“主页”，
headerMode:“屏幕”，
默认导航选项：{
头型：{
背景颜色：“#ffffff”，
海拔：0，
阴影不透明度：0
},
标题颜色：“#333333”，
头饰样式：{
fontWeight:'粗体'，
颜色：“#ffffff”
},
左校长：(
navigation.openDrawer（）}/----未定义的导航
name=“md菜单”
大小={30}
/>
)
}
}
)
const main drawer=createDrawerNavigator(
{
主要标签：授权航空，
},
{
希德斯塔塔斯巴：错，
抽屉背景色：“rgba（255255,0）”，
套色：'#f68873'，
内容选项：{
activeTintColor:“#fff”，
activeBackgroundColor:“#6b52ae”
}
}
);
const App=createSwitchNavigator({
应用程序：{
屏幕：主抽屉，
}
});
const AppNavContainer=createAppContainer(
应用程序，
{
initialRouteName:“应用程序”，
}
);
导出默认AppNavContainer；

App.js：

import React , {Component}  from 'react';
import { StyleSheet, View } from 'react-native';
import AppNavContainer from './AppNavigator';
import NavigationService from './shared/NavigationService';
import  {axios} from './shared/httpinterceptor';

export default class App extends Component {
  constructor(){
    super();
  }

  render() { 

  return (
    <View>
      <AppNavContainer
      ref={navigatorRef => {
        NavigationService.setTopLevelNavigator(navigatorRef);
      }}
      />
    </View>
  );
  }
}

import React，{Component}来自'React'；
从“react native”导入{StyleSheet，View}；
从“./AppNavigator”导入AppNavContainer；
从“./shared/NavigationService”导入导航服务；
从“./shared/httpinterceptor”导入{axios}；
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
}
render（）{
返回(
{
NavigationService.setTopLevelNavigator（navigatorRef）；
}}
/>
);
}
}

目前，在ScreenHome文件中，我可以通过以下方式打开抽屉：

  <Button onPress={this.props.navigation.openDrawer}  title="Open"/>

---

如果我无法访问应用程序中的props.navigation，如何从AppNavigator打开抽屉？

defaultNavigationOptions

（以及

navigationOptions

）可以定义为接收导航实例作为参数的函数，因此，您只需更新

defaultNavigationOptions

，如下所示：

defaultNavigationOptions:（{navigation}）=>({
头型：{
背景颜色：“#ffffff”，
海拔：0，
阴影不透明度：0
},
标题颜色：“#333333”，
头饰样式：{
fontWeight:'粗体'，
颜色：“#ffffff”
},
左校长：(
navigation.openDrawer（）}
name=“md菜单”
大小={30}
/>
)
})