我正在用 react-native 构建一个应用程序,我正在尝试将导航放入其中。我有一个按钮,我想通过单击它来移动到另一个页面。但我得到了那个错误:未定义不是一个对象(评估'_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 时遇到了麻烦,有人有什么想法吗?还是我在其他地方错过了什么?