码迷,mamicode.com
首页 > 其他好文 > 详细

React-Native组件之ListView

时间:2018-05-22 13:07:03      阅读:183      评论:0      收藏:0      [点我收藏+]

标签: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

标签:ListView

原文地址:http://blog.51cto.com/13562606/2118965

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!