React-Native組件之ListView
阿新 • • 發佈：2018-05-22
ListView
在使用dataSource時，我們需要先new一個dataSource對象
constructor(){
super();
this.state = {
movies:new ListView.DataSource({
rowHasChanged:(row1,row2) => row1 !== row2
})
}
this.fetchData(); //豆瓣json https://api.douban.com/v2/movie/top250
};
1.getRowData(dataBlob, sectionID, rowID)：表明我們將以何種方式從dataBlob（數據源）中提取出rowData，
sectionID用於指定每一個section的標題名（在renderRow，renderHeader等方法中會默認拆開並作為參數傳入）
2.getSectionHeaderData(dataBlob, sectionID)：表明我們將以何種方式從dataBlob（數據源）中提
取出HeaderData。HeaderData用於給每一個sectionHeader賦值
3.rowHasChanged(prevRowData, nextRowData)：指定我們更新row的策略，一般來說都是prevRowData和
nextRowData不相等時更新row
4.sectionHeaderHasChanged(prevSectionData, nextSectionData)：指定我們更新sectionHeader的策略，
一般如果用到sectionData的時候才指定
fetchData(){
data =‘username=‘+user;
fetch(REQUEST_URL,
{
method: ‘POST‘,
headers: {
‘Accept‘:‘application/json‘,
‘Content-Type‘:‘application/x-www-form-urlencoded‘
},
body: data
})
.then((response) => response.json()) //把response轉為json
.then((responseData) => {
this.setState({
movies:this.state.movies.cloneWithRows(responseData.subjects)
})
})
.catch((error)=> {
alert(error);
})
};
renderMovieList(movie){
return(
<View>
<View style={styles.itemContent}>
<Text onPress={() => this._gotoSubClass(movie.Sn) } style={styles.itemHeader}>
{movie.title}
</Text>
</View>
</View>
);
}
//render兩種寫法 一
render() {
return(
<View style={styles.container}>
<ListView
dataSource={this.state.movies}
renderRow={
this.renderMovieList.bind(this) //上邊自定義方法
}
/>
</View>
);
}
//render兩種寫法 二
render() {
return(
<View style={styles.container}>
<ListView
dataSource={this.state.movies}
renderRow={(movieData) => <Text>{movieData.title}</Text>}
/>
</View>
);
}附一篇簡書很好的文
React-Native組件之ListView