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>
        );
    };

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!