为什么'this.props.navigation'无法用于屏幕组件？

Question

我有一个抽屉式导航器，其中有一个堆栈导航器嵌套在其中，作为屏幕选项之一。导航到抽屉中的任何屏幕都没有问题，但是当我尝试导航到堆栈导航器中的另一个屏幕时，我无权访问this.props.navigation。我很困惑，因为屏幕是在我的导航器设置中声明的。

AppNavigator：

// all imports

const InboxStack = createStackNavigator(
  {
    Inbox: {
      screen: HomeScreen
    },
    Conversation: {
      screen: ConversationScreen
    }
  },
  {
    headerMode: "none",
    initialRouteName: "Inbox"
  }
);

const MainNavigator = createDrawerNavigator(
  {
    Inbox: InboxStack,
    Second: { screen: SecondScreen },
    Third: { screen: ThirdScreen }
  },
  {
    drawerPosition: "left",
    initialRouteName: "Inbox",
    navigationOptions: ({ navigation }) => ({
      title: "Drawer Navigator Header",
      headerTitleStyle: {
        color: "blue"
      },
      headerLeft: <Text onPress={() => navigation.toggleDrawer()}>Menu</Text>
    })
  }
);

const WrapperStackNavigator = createStackNavigator({
  drawerNav: MainNavigator
});

const AppContainer = createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen,
      App: WrapperStackNavigator,
      Login: LoginScreen,
      Register: RegisterScreen
    },
    {
      initialRouteName: "AuthLoading"
    }
  )
);

export default AppContainer;

在ConversationScreen中使用导航道具：

import React from "react";
import { View, Text } from "react-native";
import { connect } from "react-redux";
import { loadConversation } from "../actions";
import MessagesList from "../components/MessagesList.js";

class ConversationScreen extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.loadConversation();
  }

  loadConversation() {
    this.props.loadConversation(
      this.props.navigation.state.params.convoId // this works!
      this.props.navigation.getParams("convoId") // this does not :(
    );
  }

  render() {
    return (
      <View
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <Text>Conversation screen</Text>
        <MessagesList messages={this.props.messages} />
      </View>
    );
  }
}
const mapStateToProps = ({ conversation, auth }) => {
  const { messages } = conversation;
  const { user } = auth;
  return { messages, user };
};
const mapDispatchToProps = {
  loadConversation
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ConversationScreen);

ConversationScreen存在问题，我无权访问导航道具，但是文档说，如果它在导航器中声明，则应将其传递给导航道具。使用this.props.navigation，... is not a function的每个呼叫均使用... is undefined错误...为this.props.navigation.navigate，this.props.navigation.getParams等

Answer 1

[通过alert(this.props)检查道具对象后，我确认我可以访问导航对象，即使它似乎是未定义的，最终还是使用

componentDidMount() {
   loadConversation() {
    this.props.loadConversation(
      this.props.navigation.state.params.convoId
    );
   }
 }

这把我带到了我需要去的地方。虽然只使用this.props.navigation.getParams()