反应原生堆栈导航未定义不是一个对象(评估'props.navigation')

Question

i'm在React-Native中制作应用程序，我想通过使用堆栈导航单击按钮来导航到其他页面：

这是我的代码：

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') 

我不知道如何通过道具导航并在单击按钮时能够导航，我不知道我的错误在哪里，任何想法？

[编辑]

我的新视频列表：

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>
    );
  }
}

和我使用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;