简单的介绍ListView组件的使用
ListView 会安排视图的渲染,只显示当前在屏幕上的那些元素,而那些已经渲染好了但移动到了屏幕之外的元素,则会从原生视图结构中移除,从而提高性能。
首先要做的事情,从React中引入ListView
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
ListView,
TouchableHighlight,
View
} from 'react-native';
在constructor 中初始化dataSource
constructor(props){
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged:(row1,row2)=>row1 !==row2,
}),
loaded:false,
};
}
loaded状态来判断数据是否加载成功.
现在来看看render函数
render() {
if(!this.state.loaded){
return this.renderLoadingView();
}
return(
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderMovie}
style={styles.listView}
/>
);
}
如何loaded为false 加载renderLoadingView
renderLoadingView(){
return(
<View style={styles.container}>
<Text>
正在加载电影...
</Text>
</View>
);
}
在组件加载完成后刷新数据
componentDidMount(){
this.fetchData();
}
fetchData(){
fetch(REQUEST_URL)
.then((response)=>response.json())
.then((responseData)=>{
this.setState({
dataSource:this.state.dataSource.cloneWithRows(responseData.movies),
loaded:true,
});
})
.done();
}
通过setSate刷新界面
renderMovie(movie){
return(
<View style={styles.container}>
<Image source={{uri:movie.posters.thumbnail}} style={styles.thumbnail}/>
<View style={styles.right}>
<Text>
{movie.title}
</Text>
<Text>
{movie.year}
</Text>
</View>
</View>
);
这样就可以将电影列表显示出来了。
接下来添加item的点击事件
修改之后的代码:
采用bind
return(
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderMovie.bind(this)}
style={styles.listView}
/>
);
renderMovie(movie){
return(
<TouchableHighlight onPress={this.alertImage.bind(this,movie)}>
<View style={styles.container}>
<Image source={{uri:movie.posters.thumbnail}} style={styles.thumbnail}/>
<View style={styles.right}>
<Text>
{movie.title}
</Text>
<Text>
{movie.year}
</Text>
</View>
</View>
</TouchableHighlight>
);
}
alertImage(movie){
alert(movie.title);
}