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展示:
不论大神还是新手,欢迎加QQ群一起讨论问题学习技术:230274309
原文地址:https://www.jb51.cc/react/303330.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。