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

前端之家收集整理的这篇文章主要介绍了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

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

猜你在找的React相关文章