React-native StackNavigation pass props

Я создаю приложение в React Native и пытаюсь добавить в него навигацию. У меня есть кнопка, и я хочу перейти на другую страницу, нажав на нее. Но я получил эту ошибку: undefined не является объектом (оценка '_this.props.navigation')

Приложение.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, у кого-нибудь есть идеи? Или я что-то еще где-то упускаю?


react-native stack-navigator
person Rémy    schedule 07.12.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Мне кажется, что вы объявили навигатор стека, но на самом деле не рендерите его. Вы можете попробовать просто заменить компонент VideoList в вашей функции рендеринга на

<AppNavigator/>

а затем добавление VideoList в качестве экрана при объявлении навигатора стека.

Первый экран, который вы объявляете в навигаторе стека, будет использоваться по умолчанию, поэтому, если вы сначала объявите VideoList, у вас будет доступ к реквизитам навигации из этого компонента, что позволит вам перейти к элементам VideoListItems.

надеюсь, это поможет

person ThatCoderGuy    schedule 08.12.2017

arrow_upward
0
arrow_downward

Функциональная форма React не будет генерировать объект с this, вы должны сделать его class:

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