反应本机堆栈导航未定义不是对象（评估'props.navigation'）

Question

‌‌我正在用 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') 

我不知道如何传递道具导航并使其在单击按钮时能够导航，我不知道我的错误在哪里，有什么想法吗？

[编辑]

我的新 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>
    );
  }
}

还有我使用 VideoListItems 的 VideoList：

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 }) => { 
  

• 不要解构你的 props 对象

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

• 从道具中提取导航

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