React-Native之ListView的3种样式

Posted 2023-04-06

参考技术A 最近在学习React-Native的ListView组件，其实ListView 相当于ios中的tableview，当然也可以通过改变布局来实现collectionView的样式，和分组的tableview样式，下面先看效果图。

如果不提供针对section标题和行数据提供自定义的提取方法，就会使用默认的方法，

最后的样子就是下面的图片，主要要理解ListView的数据源的结构，通过构造假数据可以更好的理解如何给ListView设置数据源

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不相等时更新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> ); }

附一篇简书很好的文