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 欢迎各位大牛, ...
随机推荐
- Kali视频学习6-10
Kali视频学习6-10 kali信息收集之主机探测 主机探测指识别目标机器是否可用(简单来说是否在线),在探测过程中,需要得到目标是否online等信息.由于IDS和(入侵检测系统)和IPS(入侵保 ...
- android与linux之间的关系
篇一(system/core/init/init.c): 对Android感兴趣的朋友都知道,Android系统是建立在Linux内核之上的.那么Linux内核和Android什么关系?Linux内核 ...
- [BZOJ]BST again
Description 求有多少棵大小为n的深度为h的二叉树.(树根深度为0:左右子树有别:答案对1000000007取模) Input 第一行一个整数T,表示数据组数. 以下T行,每行2个整数n和h ...
- dijkstra算法理解+模板
2017-09-17 21:10:45 writer:pprp 看了看dijkstra算法,用自己语言总结一下主要过程吧, 首先,明确这个算法用处是在于计算单源最短路径问题并且边权非负,给出一个起点可 ...
- oracle in语句的坑
oracle 的in语句最多只能有1000条数据,超出,sql报错.
- sprites.png雪碧图
长时间不用把精灵图怎么用给忘了... 一.PC端 给所用到精灵图的元素设置background:url(sprites.png路径); background-position: -x -y; 其中: ...
- Angular内提供了一个可以快速建立测试用web服务的方法:内存 (in-memory) 服务器
如何使用 Angular 内存 (in-memory) 服务器https://segmentfault.com/a/1190000009898540
- idea 2018注册码
原文:https://blog.csdn.net/zhw0596/article/details/81394870 (最新的看后面!!! 转载的请附上原文链接 搜索不易!)百度的,上一个没用 ...
- SSM的Maven项目搭建过程
POM文件 父项目管理jar包,pom <modelVersion>4.0.0</modelVersion> <groupId>cn.e3mall</grou ...
- 收集的几个好用的maven mirror
<mirrors> <mirror> <id>jboss-public-repository-group</id> <mirrorOf>ce ...