在安卓原生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的更多相关文章

  1. react native进阶

    一.前沿||潜心修心,学无止尽.生活如此,coding亦然.本人鸟窝,一只正在求职的鸟.联系我可以直接微信:jkxx123321 二.项目总结 **||**文章参考资料:1.  http://blog ...

  2. React native 禁止手势触摸 pointerEvents

    碰到一个需求是做个轮播图带自动播放的,UED那边给轮播的底部加了阴影渐变,如下红色区域. 这样会导致一个问题,手触摸在红色区域会被这层View挡住,导致不能手动滑动切换. 原先采取过的方法是在对应的触 ...

  3. 【React Native】进阶指南之二(手势响应系统)

    移动设备上的手势识别要比在 web 上复杂得多.用户的一次触摸操作的真实意图是什么,App 要经过好几个阶段才能判断.比如 App 需要判断用户的触摸到底是在滚动页面,还是滑动一个 widget,或者 ...

  4. React Native 学习笔记--进阶(二)--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  5. React Native:使用 JavaScript 构建原生应用

    [转载] 本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生 ...

  6. 深入浅出 React Native:使用 JavaScript 构建原生应用

    深入浅出 React Native:使用 JavaScript 构建原生应用 链接:https://zhuanlan.zhihu.com/p/19996445 原文:Introducing React ...

  7. React Native:使用 JavaScript 构建原生应用 详细剖析

    数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生的 iOS 应用——就在今天,Beta 版的仓库释出了! 基于 Pho ...

  8. React Native专题

    转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...

  9. React Native专题-江清清

    本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛, ...

随机推荐

  1. Jackson 框架JSON、XML、List、Map直接相互转换

    博客分类: json   参考:http://www.cnblogs.com/hoojo/archive/2011/04/22/2024628.html 在其基础上做了稍微调整 详情见附件 jacks ...

  2. Ubuntu 下安装Beyond Compare【转】

    本文转载自:https://blog.csdn.net/bingyu9875/article/details/52856675 官网下载安装包:http://www.scootersoftware.c ...

  3. ubuntu18.04 64bit如何安装docker

    注:参考自https://docs.docker.com/install/linux/docker-ce/ubuntu/ 1.卸载旧版本docker(如果之前安装了) sudo apt-get rem ...

  4. 【bzoj4423】[AMPPZ2013]Bytehattan(平面图转对偶图+并查集)

    题目传送门:bzoj4423 如果是普通的删边判连通性,我们可以很显然的想到把操作离线下来,倒着加边.然而,这题强 制 在 线. 虽然如此,但是题目所给的图是个平面图.那么我们把它转成对偶图试试看? ...

  5. 数据结构实习 - problem K 用前序中序建立二叉树并以层序遍历和后序遍历输出

    用前序中序建立二叉树并以层序遍历和后序遍历输出 writer:pprp 实现过程主要是通过递归,进行分解得到结果 代码如下: #include <iostream> #include &l ...

  6. ADO.NET 使用DELETE语句批量删除操作,提示超时,删除失败,几种优化解决思路

    起因是如此简单的一句sql 提示:Timeout 时间已到.在操作完成之前超时时间已过或服务器未响应. 提供几种解决思路: 1.检查WHERE条件中字段是否已建索引 2.检查是否被其他表引用,引用表外 ...

  7. Centos 解决 No package htop available.

    yum install -y epel-release 之后就可以安装 yum install -y htop 什么是EPEL? EPEL的全称叫 Extra Packages for Enterpr ...

  8. 【转】python操作mysql数据库

    python操作mysql数据库 Python 标准数据库接口为 Python DB-API,Python DB-API为开发人员提供了数据库应用编程接口. Python 数据库接口支持非常多的数据库 ...

  9. Maven 三种archetype说明

    新建Maven project项目时,需要选择archetype. 那么,什么是archetype? archetype的意思就是模板原型的意思,原型是一个Maven项目模板工具包.一个原型被定义为从 ...

  10. Dubbo 和 Spring Cloud微服务架构 比较及相关差异

    你真的了解微服务架构吗?听听八年阿里架构师怎样讲述Dubbo和Spring Cloud微服务架构. 微服务架构是互联网很热门的话题,是互联网技术发展的必然结果.它提倡将单一应用程序划分成一组小的服务, ...