React-Native进阶_6.导航 Naviagtion传递数据并展示

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

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

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

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

/**
 * 电影详情页
 */
'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展示：

Demo 下载

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