在安卓原生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> ); }; }
原文链接:https://www.f2er.com/react/303353.html