React-native StackNavigation 传递道具

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

通过单击按钮将导航到另一个页面的文件 VideoListItems ：

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;

我在如何将导航道具传递给我的 VideoListItems 时遇到了麻烦，有人有什么想法吗？还是我在其他地方错过了什么？

Answer 1

React 函数形式不会生成带有this 的对象，您必须将其设为class：

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

Answer 2

在我看来，您已经声明了堆栈导航器，但实际上并没有渲染它。您可以尝试简单地将渲染函数中的 VideoList 组件替换为

<AppNavigator/>

然后在声明堆栈导航器时将 VideoList 添加为屏幕。

您在堆栈导航器中声明的第一个屏幕将用作默认屏幕，因此如果您首先声明 VideoList，您将可以从该组件中访问导航道具，从而导航到 VideoListItems。

希望对你有帮助