接着上面 Navigation 继续学习传递数据给下一个页面 @H_301_0@

onPress={() => this.props.navigation.navigate('Detail',{info:movie.title,movie:movie})}

@H_301_0@这样，跳转到详情页，可以传递 电影标题 movie.title 和电影对象 movie @H_301_0@在 MovieDetail 页面中 可以拿到这些数据 @H_301_0@this.props.navigation.state.params.movie　就可以拿到　 电影对象 movie @H_301_0@

接下来拿到电影信息，再去请求数据，展示在电影详情页，这里展示一下电影简介

@H_301_0@

/**
 * 电影详情页
 */
'use strict'
import React,{Component} from 'react';
import styles from '../Styles/Main';
import {
    ActivityIndicator,Text,View,} from 'react-native';


export  default class MovieDetail extends Component{

    constructor(props){
        super(props);
        this.state={
            movieDetail:'123',loaded:false,};
      const REQUEST_URL = `https://api.douban.com/v2/movie/subject/${this.props.navigation.state.params.movie.id}`;
      this._fetchData(REQUEST_URL);
    }

    _fetchData(REQUEST_URL){
        fetch(REQUEST_URL)
            .then(response => response.json())
            .then(responseData =>{
                this.setState({
                    movieDetail:responseData,loaded:true,});
            })
            .done();
    }

    render() {

        if(!this.state.loaded){
            return this._renderLoadingView();
        }
        //   {summary}
        // The screen's current route is passed in to `props.navigation.state`: {params.movie.title}  this.state.movieDetail.summary  { this.setState.movieDetail}
      // const { params } = this.props.navigation.state
       // const { navigator} = this.props
        let movie = this.state.movieDetail;
        let summary = movie.summary.split(/\n/).map(p =>{
            return(
                <View style={ {marginBottom:15,paddingLeft:6,paddingRight:6}}>
                    <Text style={ styles.itemText} >{p}</Text>
                </View>
            )
        })
        return (
            <View  style ={styles.Container}>
                <View style ={[styles.item,{flexDirection:'column'}]}>
                    {summary}
                </View>
            </View>
        );
    }

    _renderLoadingView(){
        return (
            <View style ={styles.loading}>
                <ActivityIndicator
                    size = 'large'
                    color ='#6435c9'
                />
            </View>
        );
    };

}

UI展示：

@H_301_0@

Demo 下载

@H_301_0@

@H_301_0@

不论大神还是新手，欢迎加QQ群一起讨论问题学习技术：230274309

原文链接：https://www.f2er.com/react/303330.html