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展示:
React-Native进阶_6.导航 Naviagtion传递数据并展示的更多相关文章
- React Native原生模块向JS传递数据的几种方式(Android)
一般情况可以分为三种方式: 1. 通过回调函数Callbacks的方式 2. 通过Promises的异步的方式 3. 通过发送事件的事件监听的方式. 参考文档:传送门
- React Native 系列(八) -- 导航
前言 本系列是基于React Native版本号0.44.3写的.我们都知道,一个App不可能只有一个不变的界面,而是通过多个界面间的跳转来呈现不同的内容.那么这篇文章将介绍RN中的导航. 导航 什么 ...
- React-Native进阶_5.导航 Naviagtion
有这样一个组件 他可以控制页面跳转 返回,在移动端叫做导航控制器, 在RN中叫路由 我们使用的 react-native-navigation 是一个开源组件库介绍:A complete nativ ...
- React Native中自定义导航条
这是2017年年初开始的公司的项目,对于导航条的要求很高,Android和iOS上必须用一致的UI,按钮位置还有各种颜色都有要求,而且要适应各种奇葩要求. 尝试了一下当时React Native自带的 ...
- react native进阶
一.前沿||潜心修心,学无止尽.生活如此,coding亦然.本人鸟窝,一只正在求职的鸟.联系我可以直接微信:jkxx123321 二.项目总结 **||**文章参考资料:1. http://blog ...
- React Native底|顶部导航使用小技巧
导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNati ...
- React Native顶|底部导航使用小技巧
导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNati ...
- react native之使用 Fetch进行网络数据请求
这是一个单独的页面,可以从其他地方跳转过来. 输入语言关键字,从github检索相关数据 import React, {Component} from 'react'; import { StyleS ...
- React Native 学习笔记--进阶(二)--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
随机推荐
- ubuntu下apt-get的配置文件是哪个
答:在/etc/apt/apt.conf 这个配置文件里可以指定使用代理,如: Acquire::https::proxy "http://myproxy.com:8080/";
- openwrt如何查看当前使用的硬件平台
答:输入cat /tmp/sysinfo/board_name即可获取
- vue集成ueditor
相关代码见github 1.引入ueditor相关的文件,具体目录见下图如下 我将下载的文件放在static下面,这里专门用来放置相关的静态文件 (在ueditor.config.js需要配置一下路径 ...
- Codeforces Round #365 (Div. 2) B - Mishka and trip
http://codeforces.com/contest/703/problem/B 题意: 每个点都有一个值,每条边的权值为这两个点相乘.1~n成环.现在有k个城市,城市与其他所有点都相连,计算出 ...
- JAVA8 HashMap 源码阅读
序 阅读java源码可能是每一个java程序员的必修课,只有知其所以然,才能更好的使用java,写出更优美的程序,阅读java源码也为我们后面阅读java框架的源码打下了基础.阅读源代码其实就像再看一 ...
- (转)SQL Server中的索引结构与疑惑
说实话我从没有在实际项目中使用过索引,仅知道索引是一个相当重要的技术点,因此我也看了不少文章知道了索引的区别.分类.优缺点以及如何使用索引.但关于索引它最本质的是什么笔者一直没明白,本文是笔者带着这些 ...
- kotlin for android----------MVP模式实现登录
学习了Kotlin,随便来个小案例,以MVP+Kotlin 来实现登录的一个小案例,希望对大家有所帮助,效果图: MVP: Model Model 是用户界面需要显示数据的抽象,也可以理解为从业务数据 ...
- Codeforces Round #424
基本全是水题 第一题水,不过有hack点,先增后不变再减 #include<map> #include<set> #include<cmath> #include& ...
- CodeForces - 91B单调队列
有一个数列,对于每一个数,求比它小的在他右边距离他最远的那个数和他的距离 用单调队列做,维护单调队列时可采用如下方法,对于每一个数,如果队列中没有数,则加入队列,如果队列头的数比当前数大,则舍弃该数 ...
- 【转】ext4+delalloc造成单次写延迟增加的分析
转自 http://blog.tao.ma/?p=58 这篇文章是淘宝内核组的刘峥同学在内部技术论坛上发表的一篇文章,但是由于刘峥同学目前没有blog,征得本人同意,贴在我的blog上,如果大家喜欢, ...