React-Native组件之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不相等时更新row4.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> ); }
附一篇简书很好的文
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。