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}><ListViewdataSource={this.state.movies}renderRow={this._renderMovieList}style={styles.listView}/></View>);}_renderMovieList(movie){return(<TouchableHighlightunderLayColor ="rgba(34,26,38,0.1)"onPress={() =>{console.log(`《${movie.title}》`);}}><View style = {styles.item}><View style = {styles.itemImage}><Imagestyle ={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}><ActivityIndicatorsize = 'large'color ='#6435c9'/></View>);};}

React-Native进阶_3.触摸高亮显示TouchableHighlight相关推荐

react native loading动画_TypeScript for React (Native) 进阶
I. 为何要用TypeScript 我们公司在德国还有个团队. 我们这次要接他们的一个库. 其中的一个API要求我们传入参数, 这个API是这样定义的: /** * @param {Object} i ...
【React Native进阶】React Native Gesture Handler的使用
背景说到React Navtive的性能优化,首先要了解React Native的运行机制.React Native程序主要运行在三个并行的线程上: JS Thread:我们写的JS代码逻辑都是在这 ...
React Native 手势触摸事件机制详解（基础篇）
欢迎大家关注[跨平台开发那些事]公众号,定期推送跨平台开发技术实践. 源码已开源到Github,详细代码可以查看:<React Native 触摸事件代码实践>. ...
大咖说：React Native 全埋点实现原理（内附赠书）
本文主要介绍如何实现 React Native 的全埋点,主要是控件点击 $AppClick 事件.该内容,会默认你有一定的 React Native 开发经验,(若没有,也可参与文末赠书). ■ 作 ...
React Native专题
未经授权不得转载: 出处地址:http://www.lcode.org 本文出自:[江清清的技术专栏] 本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入 ...
React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
React Native专题-江
(一).基本介绍: 江博客http://blog.csdn.net/jiangqq781931404/article/category/6055594 React Native For Android ...
React Native开发(一)
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac ...
React Native Animated 动画详解 - 实例篇 (这篇就够了)
之前已经更新过Animated动画基础篇相关知识点,今天讲解Animated.Value,Animated.ValueXY以及相关动画库使用实例.学习完本篇相信大家对于动画库的基本使用应该是没有问题 ...

React-Native进阶_3.触摸高亮显示TouchableHighlight

React-Native进阶_3.触摸高亮显示TouchableHighlight相关推荐

最新文章

热门文章