在安卓原生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. Kali视频学习6-10

    Kali视频学习6-10 kali信息收集之主机探测 主机探测指识别目标机器是否可用(简单来说是否在线),在探测过程中,需要得到目标是否online等信息.由于IDS和(入侵检测系统)和IPS(入侵保 ...

  2. android与linux之间的关系

    篇一(system/core/init/init.c): 对Android感兴趣的朋友都知道,Android系统是建立在Linux内核之上的.那么Linux内核和Android什么关系?Linux内核 ...

  3. [BZOJ]BST again

    Description 求有多少棵大小为n的深度为h的二叉树.(树根深度为0:左右子树有别:答案对1000000007取模) Input 第一行一个整数T,表示数据组数. 以下T行,每行2个整数n和h ...

  4. dijkstra算法理解+模板

    2017-09-17 21:10:45 writer:pprp 看了看dijkstra算法,用自己语言总结一下主要过程吧, 首先,明确这个算法用处是在于计算单源最短路径问题并且边权非负,给出一个起点可 ...

  5. oracle in语句的坑

    oracle 的in语句最多只能有1000条数据,超出,sql报错.

  6. sprites.png雪碧图

    长时间不用把精灵图怎么用给忘了... 一.PC端 给所用到精灵图的元素设置background:url(sprites.png路径);  background-position: -x -y; 其中: ...

  7. Angular内提供了一个可以快速建立测试用web服务的方法:内存 (in-memory) 服务器

    如何使用 Angular 内存 (in-memory) 服务器https://segmentfault.com/a/1190000009898540

  8. idea 2018注册码

    原文:https://blog.csdn.net/zhw0596/article/details/81394870 (最新的看后面!!!    转载的请附上原文链接   搜索不易!)百度的,上一个没用 ...

  9. SSM的Maven项目搭建过程

    POM文件 父项目管理jar包,pom <modelVersion>4.0.0</modelVersion> <groupId>cn.e3mall</grou ...

  10. 收集的几个好用的maven mirror

    <mirrors> <mirror> <id>jboss-public-repository-group</id> <mirrorOf>ce ...