tabBarNavigation标题中的菜单按钮：无法调用this.props.navigation.openDrawer（）;

Question

我有这样的tabBarNavigation的自定义标题：

import HeaderTab from './HeaderTab/HeaderTab';

  TabNavigator: {
    screen: TabNavigator,
    navigationOptions: {
      header: (
    <HeaderTab/>

  ),
    }
  },

HeaderTab组件的代码：

import React, {Component} from 'react';
import {StyleSheet, Text, View, FlatList, TouchableOpacity, TextInput, ActivityIndicator } from 'react-native';
import Styles from './Styles';
import {withTranslation} from 'react-i18next';

export class HeaderTab extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      test:  i18n.dir(),

    }
  }
  render() {
    const { t, i18n } = this.props;

    return (


                <View style={Styles.container}>

                  <View style={Styles.header}>
                    <View style={Styles.ic1Container}>
                      <TouchableOpacity style={Styles.buttonHeaderStyle}>
                        <IconII name="ios-arrow-back"/>
                      </TouchableOpacity>
                      <TouchableOpacity
                      style={Styles.buttonHeaderStyle}
                      onPress={() => **this.props.navigation.openDrawer()**}>
                        <IconAD name="menuunfold"/>
                      </TouchableOpacity>
                    </View>

                    <View style={Styles.ic2Container}>
                      <TouchableOpacity style={Styles.buttonHeaderStyle}>
                        <IconAD  name="camerao"/>
                      </TouchableOpacity>
                    </View>
                  </View>
                  <View style={Styles.infosMt}>
                   {...}
                  </View>
             </View>
    );
  }
}
export default withTranslation(['HeaderTab', 'common'], { wait: true })(HeaderTab);

[我想像在其他所有视图中一样打开抽屉：this.props.navigation.openDrawer()，但未定义this.props.navigation错误，所以我从props传递了它：

  TabNavigator: {
    screen: TabNavigator,
    navigationOptions: {
      header: (
    <HeaderTab navigation = {this.props.navigation}/>
  ),
    }
  },

在标题组件中：

  render() {
    const { t, i18n } = this.props;
    const navigation = this.props.navigation;
    {... some code}
                      <TouchableOpacity
                      style={Styles.buttonHeaderStyle}
                      onPress={() => navigation.openDrawer()}>
                        <IconAD name="menuunfold"/>
                      </TouchableOpacity>
}

刷新应用程序时出现错误：undefined is not an object (evaluating 'this.props.navigation')

PS1。 Header组件位于TabBarNavigation中，也位于stackNavigation中]PS2。 this.props.navigation.openDrawer()适用于stackNavigation的所有屏幕

我有如下这样的tabBarNavigation定制标题：从'./HeaderTab/HeaderTab'导入HeaderTab； TabNavigator：{屏幕：TabNavigator，navigationOptions：{标头：（<...>

Answer 1

Header组件在TabBarNavigation中，也在stackNavigation中

Answer 2

您需要创建一个抽屉式导航器，然后将其添加到您的根导航器中。您可以通过添加自定义组件contentComponent: SideMenu