React native 我如何解决这个问题：'；TypeError:undefined不是对象（计算'；#this.props.navigationProps.toggleDrawer'；#）和'；

React Native发布几天后，我正试图在我的应用程序中实现一个导航抽屉。 但是，当我点击触发抽屉的

TouchableOpacity

组件时，我无法解决错误

TypeError:undefined不是对象（计算'\u this.props.navigationProps.toggleDrawer'）

以下是我使用的代码：

Header.js

import React, { Component } from 'react';
import { View, StyleSheet, Image, TouchableOpacity, Platform } from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
import Screen1 from '../pages/screen1';
import Screen2 from '../pages/screen2';
import Screen3 from '../pages/screen3';


import logo from '../assets/logo.png';
import profileView from '../assets/profileIcon.png';
import menuDots from '../assets/3DotsMenu.png';

import { StatusBarHeight } from '../components/StatusBarHeight';
const statusBarHeight = StatusBarHeight

class Header extends Component {

  toggleDrawer = () => {
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (

      <View>
        <CreateDrawer />
        <View style={styles.header} />
        <View style={styles.headerContainer}>
          <View style={styles.imageHolder}>

            <TouchableOpacity
              activeOpacity={0.6}
              onPress={this.toggleDrawer.bind(this)}
            >
              <View>
                <Image style={styles.menu} source={menuDots} />
              </View>
            </TouchableOpacity>

            <TouchableOpacity activeOpacity={0.6}>
              <View>
                <Image style={styles.logo} source={logo} />
              </View>
            </TouchableOpacity>

            <TouchableOpacity activeOpacity={0.6}>
              <View>
                <Image style={styles.profile} source={profileView} />
              </View>
            </TouchableOpacity>

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

    );
  };
}

const FirstActivity_StackNavigator = createStackNavigator({
  First: {
    screen: Screen1,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 1',
      headerLeft: () => <Header navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
}
  ,
  {
    headerMode: "none"
  }
);

const Screen2_StackNavigator = createStackNavigator({
  Second: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 2',
      headerLeft: () => <Header navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
},
  {
    headerMode: "none"
  }
);

const Screen3_StackNavigator = createStackNavigator({
  Third: {
    screen: Screen3,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 3',
      headerLeft: () => <Header navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const DrawerNavigator = createDrawerNavigator({

  Screen1: {

    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 1',
    },
  },
  Screen2: {

    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 2',
    },
  },
  Screen3: {

    screen: Screen3_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 3',
    },
  },
});

const styles = StyleSheet.create({
  header: {
    width: '100%',
    height: statusBarHeight,
    backgroundColor: '#E6E3E2',
    flexDirection: 'row',
  },
  headerContainer: {
    height: 60,
    backgroundColor: '#E6E3E2',
    justifyContent: 'center',
    alignItems: 'center'

  },
  imageHolder: {
    flexDirection: "row",
    justifyContent: 'space-between',
    width: '95%'
  },
  menu: {
    marginTop: 15,
    width: 27,
    height: 19,
    resizeMode: "stretch"
  },
  logo: {
    width: 140,
    height: Platform.OS === 'ios' ? 50 : 50,
  },
  profile: {
    marginTop: 3,
    height: 38,
    width: 35
  }
});

const CreateDrawer = createAppContainer(DrawerNavigator);

export default Header;

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";

import Header from './components/Header';

export default class App extends Component {
  render() {
    return (
      <View style={{flex:1}} >
        <View style={{backgroundColor: 'blue'}}>
          <Header />
        </View>
      </View>
    );
  }
}

import React，{Component}来自'React'；
从“react native”导入{View，StyleSheet，Image，TouchableOpacity，Platform}；
从“react navigation”导入{createAppContainer}；
从“react navigation drawer”导入{createDrawerNavigator}；
从“反应导航堆栈”导入{createStackNavigator}；
从“../pages/Screen1”导入Screen1；
从“../pages/Screen2”导入Screen2；
从“../pages/Screen3”导入Screen3；
从“../assets/logo.png”导入徽标；
从“../assets/profileIcon.png”导入profileView；
从“../assets/3DotsMenu.png”导入菜单项；
从“../components/StatusBarHeight”导入{StatusBarHeight}；
const statusBarHeight=statusBarHeight
类头扩展组件{
toggleDrawer=（）=>{
this.props.navigationProps.toggleDrawer（）；
};
render（）{
返回(
);
};
}
const FirstActivity_StackNavigator=createStackNavigator({
第一:{
屏幕：屏幕1，
导航选项：（{navigation}）=>({
标题：“演示屏幕1”，
headerLeft:（）=>,，
头型：{
背景颜色：“#FF9800”，
},
标题颜色：“#fff”，
}),
},
}
,
{
headerMode：“无”
}
);
const Screen2_StackNavigator=createStackNavigator({
第二：{
屏幕：屏幕2，
导航选项：（{navigation}）=>({
标题：“演示屏幕2”，
headerLeft:（）=>,，
头型：{
背景颜色：“#FF9800”，
},
标题颜色：“#fff”，
}),
},
},
{
headerMode：“无”
}
);
const Screen3_StackNavigator=createStackNavigator({
第三：{
屏幕：屏幕3，
导航选项：（{navigation}）=>({
标题：“演示屏幕3”，
headerLeft:（）=>,，
头型：{
背景颜色：“#FF9800”，
},
标题颜色：“#fff”，
}),
},
});
const pawernavigator=createpawernavigator({
屏幕1：{
屏幕：FirstActivity_StackNavigator，
导航选项：{
抽屉标签：“演示屏幕1”，
},
},
屏幕2：{
屏幕：屏幕2\u StackNavigator，
导航选项：{
抽屉标签：“演示屏幕2”，
},
},
屏幕3：{
屏幕：屏幕3\u StackNavigator，
导航选项：{
抽屉标签：“演示屏幕3”，
},
},
});
const styles=StyleSheet.create({
标题：{
宽度：“100%”，
高度：高度，
背景颜色：“#E6E3E2”，
flexDirection:'行'，
},
负责人：{
身高：60，
背景颜色：“#E6E3E2”，
为内容辩护：“中心”，
对齐项目：“中心”
},
图像持有人：{
flexDirection:“行”，
justifyContent:'之间的空间'，
宽度：“95%”
},
菜单：{
玛金托普：15，
宽度：27，
身高：19，
resizeMode：“拉伸”
},
标志：{
宽度：140，
高度：Platform.OS=='ios'？50:50，
},
简介：{
玛金托普：3，
身高：38，
宽度：35
}
});
const CreateDrawer=createAppContainer（抽屉驱动程序）；
导出默认标题；

App.js

import React, { Component } from 'react';
import { View, StyleSheet, Image, TouchableOpacity, Platform } from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
import Screen1 from '../pages/screen1';
import Screen2 from '../pages/screen2';
import Screen3 from '../pages/screen3';


import logo from '../assets/logo.png';
import profileView from '../assets/profileIcon.png';
import menuDots from '../assets/3DotsMenu.png';

import { StatusBarHeight } from '../components/StatusBarHeight';
const statusBarHeight = StatusBarHeight

class Header extends Component {

  toggleDrawer = () => {
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (

      <View>
        <CreateDrawer />
        <View style={styles.header} />
        <View style={styles.headerContainer}>
          <View style={styles.imageHolder}>

            <TouchableOpacity
              activeOpacity={0.6}
              onPress={this.toggleDrawer.bind(this)}
            >
              <View>
                <Image style={styles.menu} source={menuDots} />
              </View>
            </TouchableOpacity>

            <TouchableOpacity activeOpacity={0.6}>
              <View>
                <Image style={styles.logo} source={logo} />
              </View>
            </TouchableOpacity>

            <TouchableOpacity activeOpacity={0.6}>
              <View>
                <Image style={styles.profile} source={profileView} />
              </View>
            </TouchableOpacity>

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

    );
  };
}

const FirstActivity_StackNavigator = createStackNavigator({
  First: {
    screen: Screen1,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 1',
      headerLeft: () => <Header navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
}
  ,
  {
    headerMode: "none"
  }
);

const Screen2_StackNavigator = createStackNavigator({
  Second: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 2',
      headerLeft: () => <Header navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
},
  {
    headerMode: "none"
  }
);

const Screen3_StackNavigator = createStackNavigator({
  Third: {
    screen: Screen3,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 3',
      headerLeft: () => <Header navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const DrawerNavigator = createDrawerNavigator({

  Screen1: {

    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 1',
    },
  },
  Screen2: {

    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 2',
    },
  },
  Screen3: {

    screen: Screen3_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 3',
    },
  },
});

const styles = StyleSheet.create({
  header: {
    width: '100%',
    height: statusBarHeight,
    backgroundColor: '#E6E3E2',
    flexDirection: 'row',
  },
  headerContainer: {
    height: 60,
    backgroundColor: '#E6E3E2',
    justifyContent: 'center',
    alignItems: 'center'

  },
  imageHolder: {
    flexDirection: "row",
    justifyContent: 'space-between',
    width: '95%'
  },
  menu: {
    marginTop: 15,
    width: 27,
    height: 19,
    resizeMode: "stretch"
  },
  logo: {
    width: 140,
    height: Platform.OS === 'ios' ? 50 : 50,
  },
  profile: {
    marginTop: 3,
    height: 38,
    width: 35
  }
});

const CreateDrawer = createAppContainer(DrawerNavigator);

export default Header;

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";

import Header from './components/Header';

export default class App extends Component {
  render() {
    return (
      <View style={{flex:1}} >
        <View style={{backgroundColor: 'blue'}}>
          <Header />
        </View>
      </View>
    );
  }
}

import React，{Component}来自“React”；
从“react native”导入{样式表、文本、视图}；
从“./components/Header”导入标题；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}

使用

导出默认导航（标题）导出导航堆栈时。
您使用的是什么版本的react导航<代码>this.props.navigation.dispatch（DrawerActions.toggleDrawer（））是当前切换抽屉的方式。可能有助于console.log（this.props）并查看是否看到navigationProps对象。我以前遇到过这个问题，这是一个快速修复，只需要更多信息。我正在使用react navigation v4。但是，通过使用导航导入
，解决了此问题。使用
导出默认导航（标题）导出时。react navigation中的导航道具名为“navigation”，而不是“navigationProps”。我不确定为什么要添加navigationProps，但您的评论帮助我解决了当前面临的问题。谢谢：）