Question

这是我的代码，用于显示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;

Answer 1

React Native没有窗口对象，因此以下内容无法工作

const url = "https://www.themoviedb.org/movie/"
window.location.href = url

如果只需要打开一个URL，则可以使用WebView https://facebook.github.io/react-native/docs/webview。您可以导航到新屏幕，也可以只打开一个模式。

当我单击电影卡时，无法打开电影详细信息

1 个答案: