反应本地堆栈式通道道具

Question

我正在用React-Native构建一个应用程序，我正在尝试将导航放入其中。我有一个按钮，我想通过单击它来移至另一个页面。但是我遇到了这个错误：未定义不是一个对象（评估'_this.props.navigation'）

app.js：

import React, { Component } from 'react';
import { View } from 'react-native';
import YTSearch from 'youtube-api-search';
import AppHeader from './components/AppHeader';
import SearchBar from './components/SearchBar';
import VideoList from './components/VideoList';
import TrackPlayerScreen from './Screens/TrackPlayerScreen';
import VideoListItems from './components/VideoListItems';
import {StackNavigator}  from 'react-navigation';
const AppNavigator = StackNavigator({
  VideoListItems: { screen: VideoListItems, navigationOptions: { header: null } },
  TrackPlayerScreen: { screen: TrackPlayerScreen,navigationOptions: { header: null } }
});
const API_KEY = 'APIKEY;

export default class App 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>
    );
  }
}

文件将通过单击视频列表来导航到另一页的文件：

import React from 'react';
import { View, Text, Image } from 'react-native';
import { Card } from 'react-native-elements';
import TrackPlayerScreen from '../Screens/TrackPlayerScreen';
import { Button } from 'react-native-elements';
import { WebBrowser } from 'expo';
import {StackNavigator}  from 'react-navigation';
const VideoListItems = ({ video }) => {
    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={() => {
                        this.props.navigation.navigate('InformationScreen')
                      }}
                    />
                </View>
             </Card>
        </View>
    );
};
export default VideoListItems;

我很难将导航道具传递给我的视频列表，有人有什么想法吗？还是我在其他地方错过了什么？

Answer 1

在我看来，您已经声明了堆栈导航器，但实际上并未呈现它。您可以尝试使用

中的渲染功能中的视频师组件替换

<AppNavigator/>

然后在声明堆栈导航器时将视频师作为屏幕添加。

您在堆栈导航器中声明的第一个屏幕将被用作默认值，因此，如果您首先声明视频师，则可以从该组件内部访问导航道具，允许您导航到videoListItem。

我希望这会有所帮助

Answer 2

反应功能表格不会使用this生成对象，您必须使其成为class：

class VideoListItems extends Component {
    render() {
        /// this.props.navigation.navigate should works here
    }
};