React-Native进阶_3.触摸高亮显示TouchableHighlight
在安卓原生ListView 点击 其中一个子视图时,会有高亮效果,这个效果在ReactNative 中通过TouchableHighlight 实现,具体使用如下
4.触摸高亮显示 TouchableHighlight /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ 'use strict' import React, {Component} from 'react'; import styles from '../Styles/Main'; import { Text, Image, View, ListView, ActivityIndicator, TouchableHighlight, } from 'react-native'; let REQUEST_URL = 'https://api.douban.com/v2/movie/top250'; export default class Day0718 extends Component { constructor(props) { super(props); this.state = { dataSource:new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}), loaded: false, }; } componentDidMount(){ this._fetchData(); } _fetchData(){ fetch(REQUEST_URL) .then(response => response.json()) .then(responseData =>{ this.setState({ movies:this.state.dataSource.cloneWithRows(responseData.subjects), loaded: true, }); }) .done(); } render() { if(!this.state.loaded){ return this._renderLoadingView(); } return ( <View style={styles.Container}> <ListView dataSource={this.state.movies} renderRow={this._renderMovieList} style={styles.listView} /> </View> ); } _renderMovieList(movie){ return( <TouchableHighlight underLayColor ="rgba(34,26,38,0.1)" onPress={() =>{ console.log(`《${movie.title}》`); }}> <View style = {styles.item}> <View style = {styles.itemImage}> <Image style ={styles.image} source ={{uri:movie.images.large}}/> </View> <View style = {styles.itemContent}> <Text style ={styles.itemHeader}>{movie.title}</Text> <Text style ={styles.itemMeta}>{movie.original_title}({movie.year})</Text> <Text style ={styles.redText}>{movie.rating.average}</Text> </View> </View> </TouchableHighlight> ); }; _renderLoadingView(){ return ( <View style ={styles.loading}> <ActivityIndicator size = 'large' color ='#6435c9' /> </View> ); }; }
React-Native进阶_3.触摸高亮显示TouchableHighlight的更多相关文章
- react native进阶
一.前沿||潜心修心,学无止尽.生活如此,coding亦然.本人鸟窝,一只正在求职的鸟.联系我可以直接微信:jkxx123321 二.项目总结 **||**文章参考资料:1. http://blog ...
- React native 禁止手势触摸 pointerEvents
碰到一个需求是做个轮播图带自动播放的,UED那边给轮播的底部加了阴影渐变,如下红色区域. 这样会导致一个问题,手触摸在红色区域会被这层View挡住,导致不能手动滑动切换. 原先采取过的方法是在对应的触 ...
- 【React Native】进阶指南之二(手势响应系统)
移动设备上的手势识别要比在 web 上复杂得多.用户的一次触摸操作的真实意图是什么,App 要经过好几个阶段才能判断.比如 App 需要判断用户的触摸到底是在滚动页面,还是滑动一个 widget,或者 ...
- React Native 学习笔记--进阶(二)--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- React Native:使用 JavaScript 构建原生应用
[转载] 本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生 ...
- 深入浅出 React Native:使用 JavaScript 构建原生应用
深入浅出 React Native:使用 JavaScript 构建原生应用 链接:https://zhuanlan.zhihu.com/p/19996445 原文:Introducing React ...
- React Native:使用 JavaScript 构建原生应用 详细剖析
数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生的 iOS 应用——就在今天,Beta 版的仓库释出了! 基于 Pho ...
- React Native专题
转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...
- React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
随机推荐
- Jackson 框架JSON、XML、List、Map直接相互转换
博客分类: json 参考:http://www.cnblogs.com/hoojo/archive/2011/04/22/2024628.html 在其基础上做了稍微调整 详情见附件 jacks ...
- Ubuntu 下安装Beyond Compare【转】
本文转载自:https://blog.csdn.net/bingyu9875/article/details/52856675 官网下载安装包:http://www.scootersoftware.c ...
- ubuntu18.04 64bit如何安装docker
注:参考自https://docs.docker.com/install/linux/docker-ce/ubuntu/ 1.卸载旧版本docker(如果之前安装了) sudo apt-get rem ...
- 【bzoj4423】[AMPPZ2013]Bytehattan(平面图转对偶图+并查集)
题目传送门:bzoj4423 如果是普通的删边判连通性,我们可以很显然的想到把操作离线下来,倒着加边.然而,这题强 制 在 线. 虽然如此,但是题目所给的图是个平面图.那么我们把它转成对偶图试试看? ...
- 数据结构实习 - problem K 用前序中序建立二叉树并以层序遍历和后序遍历输出
用前序中序建立二叉树并以层序遍历和后序遍历输出 writer:pprp 实现过程主要是通过递归,进行分解得到结果 代码如下: #include <iostream> #include &l ...
- ADO.NET 使用DELETE语句批量删除操作,提示超时,删除失败,几种优化解决思路
起因是如此简单的一句sql 提示:Timeout 时间已到.在操作完成之前超时时间已过或服务器未响应. 提供几种解决思路: 1.检查WHERE条件中字段是否已建索引 2.检查是否被其他表引用,引用表外 ...
- Centos 解决 No package htop available.
yum install -y epel-release 之后就可以安装 yum install -y htop 什么是EPEL? EPEL的全称叫 Extra Packages for Enterpr ...
- 【转】python操作mysql数据库
python操作mysql数据库 Python 标准数据库接口为 Python DB-API,Python DB-API为开发人员提供了数据库应用编程接口. Python 数据库接口支持非常多的数据库 ...
- Maven 三种archetype说明
新建Maven project项目时,需要选择archetype. 那么,什么是archetype? archetype的意思就是模板原型的意思,原型是一个Maven项目模板工具包.一个原型被定义为从 ...
- Dubbo 和 Spring Cloud微服务架构 比较及相关差异
你真的了解微服务架构吗?听听八年阿里架构师怎样讲述Dubbo和Spring Cloud微服务架构. 微服务架构是互联网很热门的话题,是互联网技术发展的必然结果.它提倡将单一应用程序划分成一组小的服务, ...