Question

我正在以反应本机构建应用，并且我试图将导航放入其中。我有一个按钮，我想通过点击它移动到另一个页面。但我得到了这个错误：undefined不是一个对象（评估＆＃39; _this.props.navigation＆＃39;）

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

在我看来，你已经声明了堆栈导航器，但实际上并没有渲染它。您可以尝试使用

替换渲染函数中的VideoList组件

<AppNavigator/>

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

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

我希望这会有所帮助

Answer 2

React功能表格不会生成this的对象，您必须将其设为class：

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

React-native StackNavigation传递道具

2 个答案: