Не могу перейти к следующему экрану

Question

Я пытаюсь перемещаться по экранам с помощью стекового навигатора.Идея в том, что мое приложение будет перемещаться из моего списка чатов, а также с экрана чата.Однако, когда я пытаюсь перейти к следующему экрану, я получаю сообщение об ошибке «undefined не является объектом» в this.props.navigation.Вот как выглядит мой код:

MainTabNavigator (содержит навигатор стека)

const ChatListStack = createStackNavigator({
  ChatList:ChatListScreen,
  ChatView:ChatScreen,
});

ChatListStack.navigationOptions = {
  tabBarLabel: 'ChatList',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? `ios-options${focused ? '' : '-outline'}` : 
'md-options'}
    />
  ),
};

ChatListScreen (откуда начинается навигация)

export default class ChatListScreen extends Component {
  constructor(props) {
    super(props);
  }

  static navigationOptions = {
    title: "Chats"
  };

  renderRow({ item }) {
    return (
      <TouchableHighlight
        onPress={() => this.props.navigation.navigate("ChatView")}
      >
        <ListItem
          roundAvatar
          title={item.name}
          subtitle={item.subtitle}
          avatar={{ uri: item.avatar_url }}
        />
      </TouchableHighlight>
    );
  }

  goToChat() {}

  render() {
    return (
      <View style={styles.mainContainer}>
        <SearchBar
          lightTheme
          icon={{ type: "font-awesome", name: "search" }}
          placeholder="Type Here..."
        />
        <List style={styles.listContainerStyle}>
          <FlatList
            data={users}
            renderItem={this.renderRow}
            keyExtractor={item => item.name}
          />
        </List>
      </View>
    );
  }
}

Чат (Этоцелевой экран чата)

export default class ChatScreen extends Component {
  constructor() {
    super();
    this.state = {
  messages: []
    };
  }

  componentWillMount() {
    this.setState({
      messages: [
        {
          _id: 1,
          text: "Hello test",
          createdAt: new Date(),
          user: {
            _id: 2,
            name: "dude"
          }
        }
      ]  
    });
  }  

  render() {
    return (
      <GiftedChat
        messages={this.state.messages}
        onSend={message => this.onSend(message)}
        user={{
          _id: 1
        }}
      />
    );
  }
}

Answer 1

, чтобы решить эту проблему, вы должны создать функцию для обработки навигации, затем связать ее в подрядчике, а затем отправить ее в Touchableopacity