Question

我正在构建一个与JSON数据一起使用的React Native应用程序，并显示即将上映的电影。它看起来像这样：https://image.ibb.co/kuOt9m/app.png。我的问题是每当我点击摘要按钮我得到所有电影的所有摘要。我想要的是获得我点击的电影的具体摘要。在JSON中有一个完全独特的电影ID，我想我应该在Button或CardSection本身设置它。我的代码如下所示：

std

然后在另一个班级我展示了这样的数据：

import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import axios from 'axios';
import MovieSummary from './MovieSummary';

class SummaryList extends Component {

  state = { movies: [] };

  componentDidMount() {
    axios.get('https://api.themoviedb.org/3/movie/upcoming?api_key=22d8da68cffba151bfa886d5003aac02&language=en-US&page=1')
      .then(response => this.setState({ movies: response.data.results }));
  }

  renderSummary() {
    return this.state.movies.map(movie =>
      <MovieSummary key={movie.id} movie={movie} />
    );
  }

  render() {
    console.log(this.state);

    return (
      <ScrollView>
        {this.renderSummary()}
      </ScrollView>
    );
  }
}

export default SummaryList;

然后使用Router类（react-native-router-flux库）我使用Router / Scene连接两个屏幕。我要发布CardSection.js或Button.js代码，如果它会让它变得清晰，我需要添加ID。

修改：添加更多信息

我的CardSection.js看起来像这样：

import React from 'react';
import { View, Text } from 'react-native';

const MovieSummary = (props) => (
  <View>
    <Text>
      {props.movie.overview}
    </Text>
  </View>
);

export default MovieSummary;

我的Button.js看起来像这样：

import React from 'react';
import { View } from 'react-native';

const CardSection = (props) => (
    <View style={styles.containerStyle}>
      {props.children}
    </View>
  );

const styles = {
  containerStyle: {
    *some view styles*
  }
};

export default CardSection;

Answer 1

首先，我认为您的第二个屏幕有点混乱，您正在调用它SummaryList而且它正在制作一系列电影 - 而如果我明白了正确地说，你希望你的第二个屏幕只处理一部电影。

我重命名了一些事情：

MoviesList很好
MovieDetail - ＆gt; MoviesListItem（这些是您MovieList中的行，重命名以避免与您的第二个屏幕混淆）
SummaryDetail很好（这将是你的单一电影场景。我可能实际上称之为MovieDetail，但这会让人感到困惑！）

忘记SummaryList - 我们不需要它。您只有一个我们关注的列表，MoviesList。

首先，修改您的Router，以便拥有MoviesList和SummaryDetail场景：

// Router.js
// ...
const RouterComponent = () => (
  <Router
    navigationBarStyle={styles.viewStyle}
    titleStyle={styles.textStyle}
    sceneStyle={{ paddingTop: 53 }}
  >
    <Scene key="upcoming" component={MoviesList} title="Upcoming Movies" />
    <Scene
      key="summaryDetail"
      component={SummaryDetail}
      title="Summary Detail"
      leftButtonIconStyle={{ tintColor: '#a52a2a' }}
    />
  </Router>
);
// ...

现在，您的MoviesListItem是其中包含摘要Button的组件。这需要导致您的SummaryDetail场景。您可以通过SummaryDetail调用Actions.summaryDetail()来导航到react-native-router-flux场景，但实际上您想告诉这个场景它正在处理哪部电影。将电影（你已经拥有MovieListItem）作为参数传递给Actions.summaryDetail(...)这样的参数：

// MovieListItem.js
// ...
    <View style={{ justifyContent: 'flex-end' }}>
      <Button
        onPress={() => {
        Actions.summaryDetail({ movie: props.movie });  // <- Important bit!
      }}>
        Summary
      </Button>
    </View>
// ...

现在，您应该在SummaryDetail屏幕中将该电影视为movie道具。

// SummaryDetail.js
// ...
const SummaryDetail = (props) => (
  <View>
    <Text>
      {props.movie.overview}
    </Text>
  </View>
);
// ...

您可能希望稍后将SummaryDetail的部分内容拆分为单独的演示组件，并且您可能希望将其转换为类并使用componentDidMount来获取您不需要的额外电影细节。已经有了。但这应该足以让你在第二个屏幕上开始播放一部电影。

单击按钮后获取特定的JSON数据

1 个答案: