自定义React Navigation抽屉组件时navigation.dispatch报错

嘿，我一眼就看出问题出在哪了——你遇到的cannot read property 'dispatch' of undefined错误，本质是你的DrawerComponent根本没拿到navigation属性！

问题根源 #

在配置createDrawerNavigator的contentComponent时，你只是返回了<DrawerComponent/>，但没有把系统自动传入的props传递给它。这些props里就包含了我们需要的navigation对象，没传的话自然就会出现undefined的情况。

快速修复方案 #

直接修改你的抽屉配置代码，把props传递给自定义的DrawerComponent：

const DrawerNavigation = createDrawerNavigator({
  Home: {
    screen: HomeStackNavigation,
  },
  Message: {
    screen: Messages,
  },
}, {
  drawerWidth: width*0.83,
  // 关键改动：把props解构传递给DrawerComponent
  contentComponent: props => <DrawerComponent {...props} />,
  drawerPosition: 'left',
});

这样一来，你的DrawerComponent就能通过this.props.navigation拿到正确的导航对象，navigateToScreen函数里的dispatch调用也就正常工作了。

备选方案：使用withNavigation高阶组件 #

如果你不想手动传递props，也可以用React Navigation提供的withNavigation高阶组件来包裹你的DrawerComponent，它会自动把navigation属性注入到组件中：

1. 先导入高阶组件：

import { NavigationActions, withNavigation } from 'react-navigation';

2. 导出组件时用withNavigation包裹：

export default withNavigation(DrawerComponent);

这种方式也能解决问题，但我更推荐第一种手动传props的方式，因为它更直观，能让你清楚组件接收了哪些属性。

验证修复 #

你可以在DrawerComponent的componentDidMount里加个打印，确认navigation已经存在：

componentDidMount() {
  console.log('Navigation props:', this.props.navigation);
}

如果控制台能输出正常的navigation对象，那就说明修复成功啦！

内容的提问来源于stack exchange，提问作者zedArt