当我点击电影卡时,我无法打开电影详细信息



这是我的代码,它显示了来自TMDB API密钥的流行电影。我尝试了不同的解决方案,但总是返回相同的错误,也就是说,当我点击卡片时,我没有打开电影的详细信息。

import React, { Component } from 'react';
import axios from 'axios';
import { createStackNavigator } from 'react-navigation';
import { Platform, StyleSheet, View, Text, ScrollView, Image } from 'react-native';
import { Card, CardItem, Icon, List } from 'native-base';
class Popular extends Component {
constructor(props){
super(props);
this.state= {
moviesList: []
}
}
componentWillMount(){
axios.get('https://api.themoviedb.org/3/movie/popular?api_key=MY_API_KEY&language=it-IT&page=1').then(response => {
this.setState({ moviesList: response.data.results });
});
}
// This is a function that open movie details
viewDetails() {
const url = "https://www.themoviedb.org/movie/"
window.location.href = url
}
render () {
const ImgURL = 'http://image.tmdb.org/t/p/original';
const movies = this.state.moviesList.map(movie => {
return (
<Card key={ movie } style={{width: 135, marginRight: 15}}>
<CardItem cardBody button onPress={this.viewDetails}> // <-- here gives me the error by not opening the window with the details of the film
<Image source={{uri: ImgURL + movie.poster_path}} style={{width: 135, height: 185}}/>
</CardItem>
<CardItem style={{flex: 1, justifyContent: 'center'}}>
<Text>{movie.title}</Text>
</CardItem>
</Card>
)
});
return(
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
{ movies }
</ScrollView>
)
}
}
export default Popular;
React Native没有窗口对象,因此以下内容不适用于
const url = "https://www.themoviedb.org/movie/"
window.location.href = url

如果你只需要打开一个url,你可以使用WebViewhttps://facebook.github.io/react-native/docs/webview.你可以导航到一个新的屏幕,也可以打开一个模式

相关内容

最新更新