Почему «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()