Реагировать на встроенную навигацию по стеку undefined не является объектом (оценка 'props.navigation')

Question

"Я делаю приложение на своем языке и хочу перейти на другую страницу, нажав на кнопку, используя стековую навигацию:

Вот мой код:

app.js

import React from 'react';
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';

import Home from './Screens/Home';
import VideoListItems from './Screens/VideoListItems';
import TrackPlayer from './Screens/TrackPlayer';

const reactNavigationSample = props => {
  return <VideoListItems navigation={props.navigation} />;
};

reactNavigationSample.navigationOptions = {
  title: "VideoListItems"
};

const AppNavigator = StackNavigator({
  Home: { screen: Home, navigationOptions: { header: null }},
  VideoListItems: { screen: VideoListItems, navigationOptions: { header: null }},
  TrackPlayer: { screen: TrackPlayer, navigationOptions: { header: null }},
  }
);

export default class App extends React.Component {
  render() {
    return (
      <AppNavigator />
    );
  }
}

VideoListItems, где находится кнопка для навигации:

import {StackNavigator}  from 'react-navigation';

const VideoListItems = ({ video, props }) => {
const { navigate } = props.navigation;

const {
    cardStyle,
    imageStyle,
    contentStyle,
    titleStyle,
    channelTitleStyle,
    descriptionStyle
 } = styles;
const {
    title,
    channelTitle,
    description,
    thumbnails: { medium: { url } }
} = video.snippet;

const videoId = video.id.videoId;

return(
    <View>
         <Card title={null} containerStyle={cardStyle}>
            <Image
                style={imageStyle}
                source= {{ uri: url}}
            />
            <View style={contentStyle}>
                <Text style={titleStyle}>
                    {title}
                </Text>
                <Text style={channelTitleStyle}>
                    {channelTitle}
                </Text>
                <Text style={descriptionStyle}>
                    {description}
                </Text>
                <Button
                  raised
                  title="Save And Play"
                  icon={{ name: 'play-arrow' }}
                  containerViewStyle={{ marginTop: 10 }}
                  backgroundColor="#E62117"
                  onPress={() => {
                    navigate('TrackPlayer')
                  }}
                />

            </View>
         </Card>
    </View>
);
};

экспорт по умолчанию VideoListItems; Но я получаю эту ошибку:

TypeError: undefined is not an object (evaluating 'props.navigation') 

Я не знаю, как пройти навигацию реквизита и сделать его способным перемещаться при нажатии на кнопку, я не знаю, где моя ошибка, какие-либо идеи?

[РЕДАКТИРОВАТЬ]

Мой новый VideoItemList:

const VideoListItems = props => {
    const {
        cardStyle,
        imageStyle,
        contentStyle,
        titleStyle,
        channelTitleStyle,
        descriptionStyle
     } = styles;
    const {
        title,
        channelTitle,
        description,
        thumbnails: { medium: { url } }
    } = props.video.snippet;

    const videoId = props.video.id.videoId;

    const { navigate } = props.navigation;

    return(
        <View>
             <Card title={null} containerStyle={cardStyle}>
                <Image
                    style={imageStyle}
                    source= {{ uri: url}}
                />
                <View style={contentStyle}>
                    <Text style={titleStyle}>
                        {title}
                    </Text>
                    <Text style={channelTitleStyle}>
                        {channelTitle}
                    </Text>
                    <Text style={descriptionStyle}>
                        {description}
                    </Text>
                    <Button
                      raised
                      title="Save And Play"
                      icon={{ name: 'play-arrow' }}
                      containerViewStyle={{ marginTop: 10 }}
                      backgroundColor="#E62117"
                      onPress={() => {
                        navigate.navigate('TrackPlayer')
                      }}
                    />

                </View>
             </Card>
        </View>
    );
};

Это файл, в котором я отображаю все мои компоненты:

import React, { Component } from 'react';
import { View } from 'react-native';
import YTSearch from 'youtube-api-search';
import AppHeader from './AppHeader';
import SearchBar from './SearchBar';
import VideoList from './VideoList';

const API_KEY = 'ApiKey';

export default class Home extends Component {
  state = {
    loading: false,
    videos: []
  }

  componentWillMount(){
    this.searchYT('');
  }

  onPressSearch = term => {
    this.searchYT(term);
  }

  searchYT = term => {
    this.setState({ loading: true });
    YTSearch({key: API_KEY, term }, videos => {
      console.log(videos);
      this.setState({
        loading: false,
        videos
      });
    });
  }

  render() {
    const { loading, videos } = this.state;
    return (
      <View style={{ flex: 1, backgroundColor: '#ddd' }}>

        <AppHeader headerText="Project Master Sound Control" />
        <SearchBar
        loading={loading}
        onPressSearch={this.onPressSearch} />
        <VideoList videos={videos} />
      </View>
    );
  }
}

И мой VideoList, где я использую VideoListItems:

import React from 'react';
import { ScrollView, View } from 'react-native';
import VideoListItems from './VideoListItems';

const VideoList = ({ videos }) => {
     const videoItems = videos.map(video =>(
         <VideoListItems
            key={video.etag}
            video={video}
        />

     ));
    return(
        <ScrollView>
            <View style={styles.containerStyle}>
                {videoItems}
            </View>
        </ScrollView>
    );
};


const styles = {
    containerStyle: {
        marginBottom: 10,
        marginLeft: 10,
        marginRight: 10
    }
}

export default VideoList;

Answer 1

Это потому, что вы пытаетесь извлечь навигацию из реквизита props (это не существует), у вас есть много способов решить эту проблему:

• Используйте оператор rest, чтобы сгруппировать все реквизиты, кроме video внутри props переменная

  const VideoListItems = ({ video, ...props }) => { 
  

• Не разрушай свой объект

  const VideoListItems = props => { 
      // don't forget to refactor this line
      const videoId = props.video.id.videoId;
  

• Извлечь навигацию из реквизита

  const VideoListItems = ({ video, navigation }) => {
     const { navigate } = navigation;