反应本机导航抽屉未打开

Question

我是本机反应的新手。通过大量搜索，我发现为抽屉提供固定宽度可以解决该问题。但就我而言，这还不能解决。我不知道代码有什么问题。每次运行代码时，都会得到“未定义不是对象”。这是代码。

这是我的仪表板文件

export class Dashboard extends Component {
  static navigationOptions = ({ navigation }: { navigation: any }) => ({
    drawerLabel: "Dashboard",
    title: "Dashboard",
    headerLeft: (
      <View style={{ paddingHorizontal: 10 }}>
        <TouchableOpacity onPress={() => navigation.navigate("DrawerOpen")}>
          <Icon name="menu" size={30} color="black" />
        </TouchableOpacity>
      </View>
    )
  });
  render() {
    return (
      <Text>Dashboard</Text>
    )
  }
}
const MainScreenNavigator = StackNavigator({
  DashboardScreen: { screen: Profile },
  ProfileScreen: { screen: Profile },
},
  {
    initialRouteName: "DashboardScreen",
  }
);
const Drawer = DrawerNavigator(
  {
    Main: { screen: MainScreenNavigator }
  },
  {
    drawerWidth: 200
  }
);
export default Drawer;

这是我的个人资料文件

export class Profile extends Component<NavigationScreenProps<ProfileProps>> {

    constructor(props: NavigationScreenProps<ProfileProps>) {
      super(props);
      this.state = {
        status: "initial" // initial | failed | success
      }

    }
    static navigationOptions = ( {navigation} : {navigation : any}  ) => ({
      drawerLabel: "Pied Piper",
      title: "Pied Piper",
      headerLeft: (
        <View style={{ paddingHorizontal: 10 }}>
          <TouchableOpacity onPress={() => navigation.navigate("DrawerOpen")}>
            <Icon name="menu" size={30} color="blue" />
          </TouchableOpacity>
        </View>
      )
    });

  render() {
    return (
  <View style={ProfileStyle.container}>
 <Text>Profile</Text>
  </View>
    );
  }

}
export default Profile;