React-native之ListView（15）

一. 简介

一个核心组件，用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组，再使用数据源来实例化一个ListView组件，并且定义它的renderRow回调函数，这个函数会接受数组中的每个数据作为参数，返回一个可渲染的组件（作为listview的每一行）。
由于平台差异性，React Native 中的滚动列表组件 ListView 并没有直接映射为 android 中的 ListView 或 iOS 中的 UITableView，而是在ScrollView 的基础上使用 JS 做了一次封装。这样，滚动体验部分由 Native 负责，而 React 部分则专注于组件何时渲染、如何渲染等问题。

二.数据源及结构

数据源默认的格式有三个维度：
第一个维度是 sectionId ，标识属于哪一段，可以手动指定或隐式地使用数组索引或对象的 key 值；
第二个维度是 rowId ，标识某个数据段下的某一个行，同样可以手动指定或隐式地使用数组索引或对象的 key 值；
第三个维度是具体的数据对象，根据实际的需要而定。
需要注意的是，上面只是默认的数据格式，如果它不符合实际的需求，完全可以使用自定义的数据结构。唯一的区别就是需要额外指定给 ListView 数据源中哪些是 id，哪些是 rowData。

listview数据格式

DataSource 的构造函数接收以下4个参数（都是可选）：
rowHasChanged : 用于在数据变化的时候，计算出变化的部分，在更新时只渲染脏数据；
sectionHeaderHasChanged : 同理，在列表带分段标题时需要实现；
getRowData/getSectionHeaderData : 如果遵循默认的数据源格式，这两个方法就没有必要实现，用内部默认的即可；而当数据源格式是自定义时，需要手动实现这两个方法。
DataSource 的初始化一般在 constructor 方法中
数据源确定后，下一个工作就是列表的渲染。在渲染时发挥重要作用的是 renderRow 属性，它接收数据源中保存的数据对象，并通过返回值确定该行该如何进行展现。我们可以对所有行统一进行展现，也可以根据里面的字段做出不同的展现。在列表包含 sectionHeader 时，还需要实现 renderSectionHeader 方法。

注意：要更新datasource中的数据，请（每次都重新）调用cloneWithRows方法（如果用到了section，则对应cloneWithRowsAndSections方法）。数据源中的数据本身是不可修改的，所以请勿直接尝试修改。clone方法会自动提取新数据并进行逐行对比（使用rowHasChanged方法中的策略），这样ListView就知道哪些行需要重新渲染了。

React Native ListView sticky效果实现

dataBlob{The dataBlob is a data structure (generally an object) that holds all the data powering the ListView}：dataBlob 包含ListView所需的所有数据（section header 和 rows），在ListView渲染数据时，使用 getSectionData 和 getRowData 来渲染每一行数据。 dataBlob 的 key 值包含 sectionID + rowId

DataBlob.png

sectionIDs[]：用于标识每组section

sectionIds.png

rowIDs[]：用于描述每个 section 里的每行数据的位置及是否需要渲染。在ListView渲染时，会先遍历 rowIDs 获取到对应的 dataBlob 数据。

rowids.png

简单示例

示例一（简单的普通数据）
class ListDemo extends Component { constructor(props){ super(props); this.state={ dataSource:new ListView.DataSource({ rowHasChanged:(row1,row2)=> row1!== row2, }), }; } componentWillMount() { this.fetchData(); } render() { return ( <ListView dataSource={this.state.dataSource} renderRow={(rowData)=><Text>{rowData}</Text>} style={styles.list} /> ); } fetchData(){ this.setState({ dataSource: this.state.dataSource.cloneWithRows(['row 1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8']), }); } const styles = StyleSheet.create({ list:{ paddingTop: 20, backgroundColor: '#F5FCFF', }, container: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, listView: { paddingTop: 20, backgroundColor: '#F5FCFF', }, thumbnail: { width: 53, height: 81, }, rightContainer: {//让rightContainer在父容器中占据Image之外剩下的全部空间。 flex: 1, }, title: { fontSize: 20, marginBottom: 8, textAlign: 'center', }, year: { textAlign: 'center', }, });
效果

listview_01.png

示例二（稍复杂的普通数据）
class ListDemo extends Component { constructor(props){ super(props); this.state={ dataSource:new ListView.DataSource({ rowHasChanged:(row1,row2)=> row1!== row2, }), }; } componentWillMount() { this.fetchData(); } render() { if (!this.state.loaded) { //如果movies==null的情况初始情况渲染加载视图 return this.renderLoadingView(); } return ( <ListView dataSource={this.state.dataSource} renderRow={this.renderMovie} style={styles.list} /> ); } renderLoadingView() { return ( <View style={styles.container}> <Text> 正在网络上获取电影数据…… </Text> </View> ); } renderMovie(movie) { return ( <View style={styles.container}> <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> <View style={styles.rightContainer}> <Text style={styles.title}>{movie.title}</Text> <Text style={styles.year}>{movie.year}</Text> </View> </View> ); } fetchData() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData.movies), loaded:true, }); }) .done(); //调用了done() —— 这样可以抛出异常而不是简单忽略 } const styles = StyleSheet.create({ list:{ paddingTop: 20, backgroundColor: '#F5FCFF', }, container: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, listView: { paddingTop: 20, backgroundColor: '#F5FCFF', }, thumbnail: { width: 53, height: 81, }, //让rightContainer在父容器中占据Image之外剩下的全部空间。 rightContainer: { flex: 1, }, title: { fontSize: 20, marginBottom: 8, textAlign: 'center', }, year: { textAlign: 'center', }, });

效果

listview_02.png

特殊数据的listview

class ListDemo extends Component { constructor(props){ super(props); var getSectionHeaderData=(dataBlob,sectionID)=>{ return dataBlob[sectionID]; }; var getRowData=(dataBlob,sectionID,rowID)=>{ return dataBlob[sectionID+":"+rowID]; }; this.state={ loaded:false, dataSource:new ListView.DataSource({ getSectionHeaderData:getSectionHeaderData, getRowData:getRowData, rowHasChanged:(row1,row2)=> row1!== row2, sectionHeaderHasChanged:(s1,s2)=>s1!==s2, }), }; } componentWillMount() { this.fetchData(); } render() { if(!this.state.loaded){ return this.renderLoadingView(); } return ( <View style={styles.container}> <View style={styles.header}> <Text style={styles.headerText}>User List</Text> </View> <ListView dataSource={this.state.dataSource} renderRow={this.renderRow} style={styles.list} renderSectionHeader={this.renderSectionHeader} /> </View> ); } renderSectionHeader(sectionData,sectionID){ return ( <View style={styles.section}> <Text style={styles.text}>片头-公司名:{sectionData}</Text> </View> ); } renderRow(rowData,sectionID,rowID){ return ( <View style={styles.row}> <Text style={styles.rowText}>{rowData.name.title}{rowData.name.first}{rowData.name.last}-{sectionID}-{rowID}</Text> </View> ); } renderLoadingView(){ return ( <View style={styles.loadingPage}> <Text>正在加载中。。。</Text> </View> ); } fetchData() { var responseData = { "results": [ { "organization": "马云的淘宝", "id": 12348124, "users": [{ "user": { "gender": "female", "name": {"title": "miss", "first": "marga", "last": "seegers"}, "location": { "street": "9234 kintgenshaven", "city": "epe", "state": "groningen", "zip": "24360" }, "email": "marga.seegers25@example.com", "username": "orangeleopard377", "password": "427900", "salt": "KrIEhHan", "md5": "589a574553250be33f3b1170624ad2d1", "sha1": "b95ebe39ae6119c5d578938b2d0be8abf674d22c", "sha256": "591584f0bcd6ab1700b59f7bad4ef84917d9ad1270a5a3f4fdd0519fd6d6f37e", "registered": "1412818529", "dob": "368162464", "phone": "(468)-937-2959", "cell": "(971)-550-2808", "BSN": "95632864", "picture": { "large": "http://api.randomuser.me/portraits/women/35.jpg", "medium": "http://api.randomuser.me/portraits/med/women/35.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/women/35.jpg" }, "version": "0.6", "nationality": "NL" }, "seed": "0e4de8b1953a999b06" }, { "user": { "gender": "female", "name": {"title": "miss", "first": "dian", "last": "grinwis"}, "location": { "street": "8484 vismarkt", "city": "oirschot", "state": "flevoland", "zip": "57731" }, "email": "dian.grinwis32@example.com", "username": "redduck583", "password": "slammer", "salt": "RlM7lRMv", "md5": "3956e950cbbf896533aef74c2c82cd89", "sha1": "f75a3a91443900b4d00caae529242bae7619dc67", "sha256": "6bd83fd97fe9eb451778af5640def605d944ad9868c0c5f3a0afe7f265967975", "registered": "1273461100", "dob": "457808604", "phone": "(693)-305-1652", "cell": "(948)-380-2046", "BSN": "21298918", "picture": { "large": "http://api.randomuser.me/portraits/women/59.jpg", "medium": "http://api.randomuser.me/portraits/med/women/59.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/women/59.jpg" }, "version": "0.6", "nationality": "NL" } }, { "user": { "gender": "female", "name": {"title": "miss", "first": "sky", "last": "van der kemp"}, "location": { "street": "9082 hanengeschrei", "city": "woerden", "state": "noord-brabant", "zip": "87830" }, "email": "sky.van der kemp89@example.com", "username": "beautifullion820", "password": "jameson", "salt": "gpRYYHWG", "md5": "8d3c0c7c2338280d383815eeb93509f6", "sha1": "aba28553b806a84b5c93cb07b15a5eea6ad3dced", "sha256": "bd37728ef45db8e5e2309883da62c85b6d66c555585f915007f4540b8baf73a2", "registered": "1050510726", "dob": "901473870", "phone": "(164)-819-7581", "cell": "(839)-758-4768", "BSN": "97799112", "picture": { "large": "http://api.randomuser.me/portraits/women/10.jpg", "medium": "http://api.randomuser.me/portraits/med/women/10.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/women/10.jpg" }, "version": "0.6", "nationality": "NL" } }, { "user": { "gender": "male", "name": {"title": "mr", "first": "davi", "last": "van de kerkhof"}, "location": { "street": "4627 a.b.c.-straat", "city": "baarn", "state": "zeeland", "zip": "85733" }, "email": "davi.van de kerkhof88@example.com", "username": "tinyfish856", "password": "mack", "salt": "hDCD5UCo", "md5": "c84ceab40f165ace6d8e91232a6905ce", "sha1": "902f7e0e61e582382b878e6fc52dbe54a8ca6824", "sha256": "f80e5324f69e59171190f38640d811e1b297bf6fa6010b4f051962521b645b9d", "registered": "1309871004", "dob": "94515551", "phone": "(859)-733-3132", "cell": "(772)-233-1220", "BSN": "51713289", "picture": { "large": "http://api.randomuser.me/portraits/men/72.jpg", "medium": "http://api.randomuser.me/portraits/med/men/72.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/men/72.jpg" }, "version": "0.6", "nationality": "NL" } }, { "user": { "gender": "male", "name": {"title": "mr", "first": "yanick", "last": "van leuveren"}, "location": { "street": "2184 dorstige hartsteeg", "city": "alphen aan den rijn", "state": "zuid-holland", "zip": "27375" }, "email": "yanick.van leuveren88@example.com", "username": "blackgoose35", "password": "moneys", "salt": "HbNeVqXl", "md5": "dbcdaf6a92e48e2dd0b87053a6c0a460", "sha1": "791054281820a850e6b23acd05bd8a0d959bd8c2", "sha256": "691fd48fc1194df987b0840548c4d99b6d763f73a10269f16deb3c9905581af9", "registered": "1082860214", "dob": "676524370", "phone": "(866)-815-8130", "cell": "(936)-599-6632", "BSN": "05350614", "picture": { "large": "http://api.randomuser.me/portraits/men/57.jpg", "medium": "http://api.randomuser.me/portraits/med/men/57.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/men/57.jpg" }, "version": "0.6", "nationality": "NL" } }] }, { "organization": "马化腾的腾讯", "id": 1235513, "users": [{ "user": { "gender": "female", "name": {"title": "miss", "first": "nicole", "last": "sullivan"}, "location": { "street": "4460 dame street", "county": "westmeath", "state": "nebraska", "zip": "65675" }, "email": "nicole.sullivan32@example.com", "username": "whitemeercat565", "password": "emilia", "salt": "4iMLu9PN", "md5": "9bc08bb89d4b7163734e5a82bc1c913f", "sha1": "9de75c7d5e69bfc5ee6f983ee1e14389a4872fc1", "sha256": "edbac3b6a89cbca7682e39d196cc98250ebd08c562e39bfc421ce6df00779591", "registered": "1182085459", "dob": "1168428275", "phone": "061-325-8502", "cell": "081-708-1316", "PPS": "9813310T", "picture": { "large": "http://api.randomuser.me/portraits/women/69.jpg", "medium": "http://api.randomuser.me/portraits/med/women/69.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/women/69.jpg" }, "version": "0.6", "nationality": "IE" }, "seed": "5619bbd757e136f605" }, { "user": { "gender": "male", "name": {"title": "mr", "first": "charlie", "last": "snyder"}, "location": { "street": "2432 rookery road", "county": "mayo", "state": "utah", "zip": "37785" }, "email": "charlie.snyder16@example.com", "username": "crazysnake158", "password": "madrid", "salt": "yGk3jsla", "md5": "62bfb188b82a370c81d70c41b08f44fa", "sha1": "55fb0f5f919367773b4311d60158e0155712c76e", "sha256": "e4e5b13aef4cb0767bf000e51ee5ee81b229b917282cc632cc60ba0e4443428c", "registered": "1188946120", "dob": "854921262", "phone": "051-414-5629", "cell": "081-733-0879", "PPS": "7060395T", "picture": { "large": "http://api.randomuser.me/portraits/men/96.jpg", "medium": "http://api.randomuser.me/portraits/med/men/96.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/men/96.jpg" }, "version": "0.6", "nationality": "IE" } }, { "user": { "gender": "male", "name": {"title": "mr", "first": "adrian", "last": "hawkins"}, "location": { "street": "4294 highfield road", "county": "kerry", "state": "new mexico", "zip": "89723" }, "email": "adrian.hawkins20@example.com", "username": "greenbutterfly955", "password": "lithium", "salt": "BDpOCi72", "md5": "f466f40834aa260d6ab86bee912fc443", "sha1": "4471b33b51ea7bfad7576f6b259d1afb475e93db", "sha256": "115894fc233340373c8d685486ed742e676c9742fefbe2639b74c5f2db963873", "registered": "1023499340", "dob": "1123203166", "phone": "021-701-3515", "cell": "081-472-4664", "PPS": "7895070T", "picture": { "large": "http://api.randomuser.me/portraits/men/80.jpg", "medium": "http://api.randomuser.me/portraits/med/men/80.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/men/80.jpg" }, "version": "0.6", "nationality": "IE" } }, { "user": { "gender": "female", "name": {"title": "miss", "first": "grace", "last": "johnston"}, "location": { "street": "6826 green lane", "county": "galway", "state": "minnesota", "zip": "47758" }, "email": "grace.johnston99@example.com", "username": "crazypanda878", "password": "dutch", "salt": "gDGBbCyY", "md5": "d91f66fe034218a2975ebd7db4738a12", "sha1": "4df7918a91baf463e9b7e882fff0a70f9cae27f7", "sha256": "ee55cb982b93a9a5c472b3632657e581d581c84e4ff8b2fe74004e965b0e5534", "registered": "1195137230", "dob": "655630404", "phone": "021-808-7639", "cell": "081-330-9635", "PPS": "4498197T", "picture": { "large": "http://api.randomuser.me/portraits/women/28.jpg", "medium": "http://api.randomuser.me/portraits/med/women/28.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/women/28.jpg" }, "version": "0.6", "nationality": "IE" } }, { "user": { "gender": "female", "name": {"title": "mrs", "first": "rosie", "last": "douglas"}, "location": { "street": "5834 victoria road", "county": "kilkenny", "state": "arizona", "zip": "44906" }, "email": "rosie.douglas24@example.com", "username": "redelephant112", "password": "pissed", "salt": "IHwMrGvi", "md5": "648b75b00311daa164439d898be76cf1", "sha1": "671f6f5c2da4be03e51daea97a7550a49a231f58", "sha256": "89f7406abf60617b3b0b620787f3d85f53ef21f0a2bab9f9f77813429ec9644a", "registered": "1334726180", "dob": "689823354", "phone": "061-117-1724", "cell": "081-737-5541", "PPS": "1120371T", "picture": { "large": "http://api.randomuser.me/portraits/women/13.jpg", "medium": "http://api.randomuser.me/portraits/med/women/13.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/women/13.jpg" }, "version": "0.6", "nationality": "IE" } }] }, { "organization": "李彦宏的百度", "id": 1237141, "users": [{ "user": { "gender": "female", "name": {"title": "miss", "first": "joyce", "last": "little"}, "location": { "street": "2086 wheeler ridge dr", "city": "saginaw", "state": "hawaii", "zip": "60560" }, "email": "joyce.little62@example.com", "username": "bigbutterfly528", "password": "suan", "salt": "fIfM75bl", "md5": "5b3318e717934073039028c9e5125896", "sha1": "49bb487743a1c03d8fcb8e4d1878a4c7ca8daff3", "sha256": "570824d2765a04ec0d36c3733caf3a6e8a73869fb46463bce59b42ada06a38e4", "registered": "978399204", "dob": "762101147", "phone": "(966)-213-8700", "cell": "(713)-205-8948", "SSN": "472-85-8663", "picture": { "large": "http://api.randomuser.me/portraits/women/73.jpg", "medium": "http://api.randomuser.me/portraits/med/women/73.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/women/73.jpg" }, "version": "0.6", "nationality": "US" }, "seed": "ce7e3f33874c75ac07" }, { "user": { "gender": "female", "name": {"title": "miss", "first": "peyton", "last": "simmmons"}, "location": { "street": "9904 homestead rd", "city": "albuquerque", "state": "iowa", "zip": "62580" }, "email": "peyton.simmmons73@example.com", "username": "organicrabbit844", "password": "change", "salt": "f0gFY6KT", "md5": "9835af99ec882eb8f29a5620d12181d6", "sha1": "99aedd274a6e5e127c565f0a13f5838acd4c5c07", "sha256": "0822ee2a259d71f8a1cb84e290ca4d75eb2af1ffec69cc72b8e46aa9e791c5d6", "registered": "1144450293", "dob": "275323726", "phone": "(350)-260-4248", "cell": "(738)-528-1621", "SSN": "231-83-6520", "picture": { "large": "http://api.randomuser.me/portraits/women/22.jpg", "medium": "http://api.randomuser.me/portraits/med/women/22.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/women/22.jpg" }, "version": "0.6", "nationality": "US" } }, { "user": { "gender": "female", "name": {"title": "miss", "first": "ruby", "last": "palmer"}, "location": { "street": "8796 crockett st", "city": "aurora", "state": "wisconsin", "zip": "26266" }, "email": "ruby.palmer60@example.com", "username": "organicbutterfly558", "password": "password", "salt": "lEcGY4xC", "md5": "752c778c0f0b6d68cd61b636c75d1ddd", "sha1": "3d182fbcb725f5178f8a52372f7989f9ee40eee9", "sha256": "e5be4319e50d7208eb8e5f813fa4c9566e2e2a5e078e4d9c82440723381025de", "registered": "1036616387", "dob": "734179936", "phone": "(258)-181-9139", "cell": "(396)-259-8782", "SSN": "291-14-3517", "picture": { "large": "http://api.randomuser.me/portraits/women/40.jpg", "medium": "http://api.randomuser.me/portraits/med/women/40.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/women/40.jpg" }, "version": "0.6", "nationality": "US" } }, { "user": { "gender": "female", "name": {"title": "miss", "first": "robin", "last": "perkins"}, "location": { "street": "9001 brown terrace", "city": "louisville", "state": "texas", "zip": "24874" }, "email": "robin.perkins25@example.com", "username": "crazylion493", "password": "seth", "salt": "Qez53XZr", "md5": "343d690344f146b8b9b0fecd0470e8bc", "sha1": "fbb6f4a9a5c2ab08784560461401747bf420681a", "sha256": "52dfea4261c4389030c4d8d681c6878a119d56e7ba16bd5a19872ba7ef87ced3", "registered": "1157078698", "dob": "672848315", "phone": "(825)-244-5953", "cell": "(464)-502-6407", "SSN": "599-65-7688", "picture": { "large": "http://api.randomuser.me/portraits/women/81.jpg", "medium": "http://api.randomuser.me/portraits/med/women/81.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/women/81.jpg" }, "version": "0.6", "nationality": "US" } }, { "user": { "gender": "female", "name": {"title": "miss", "first": "hailey", "last": "cunningham"}, "location": { "street": "9533 e little york rd", "city": "houston", "state": "tennessee", "zip": "36238" }, "email": "hailey.cunningham87@example.com", "username": "organicgorilla912", "password": "ducks", "salt": "EncA1Tp3", "md5": "7b8d57609043dc4947d1a65993ae6833", "sha1": "c293015adfa2b897524f2ff56cf55864b66d8c45", "sha256": "32de293aeb56fbe00f9f460e8c4f287422adbb4c14c70574bb7298aa401d78c0", "registered": "1129991594", "dob": "716892742", "phone": "(429)-446-7246", "cell": "(648)-377-8894", "SSN": "325-61-6120", "picture": { "large": "http://api.randomuser.me/portraits/women/33.jpg", "medium": "http://api.randomuser.me/portraits/med/women/33.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/women/33.jpg" }, "version": "0.6", "nationality": "US" } }] }, { "organization": "周鸿祎的360", "id": 1727272, "users": [{ "user": { "gender": "male", "name": {"title": "mr", "first": "tommy", "last": "stanley"}, "location": { "street": "5251 station road", "county": "kildare", "state": "michigan", "zip": "81572" }, "email": "tommy.stanley95@example.com", "username": "lazygorilla313", "password": "&", "salt": "DD5UcgD3", "md5": "2155c170ed25a160f6202289bbb26aa5", "sha1": "08d8a9272c02cf04ca91502156e3382c5393b4e1", "sha256": "1d96aba82ee2d70ab4c09ba3a5bdeab7499143e740924e239d76fccafc299115", "registered": "1182422920", "dob": "986003528", "phone": "071-795-0091", "cell": "081-127-4151", "PPS": "8761806T", "picture": { "large": "http://api.randomuser.me/portraits/men/15.jpg", "medium": "http://api.randomuser.me/portraits/med/men/15.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/men/15.jpg" }, "version": "0.6", "nationality": "IE" }, "seed": "ccfb395bd154809f05" }, { "user": { "gender": "female", "name": {"title": "miss", "first": "rose", "last": "gregory"}, "location": { "street": "5638 denny street", "county": "donegal", "state": "connecticut", "zip": "87034" }, "email": "rose.gregory66@example.com", "username": "bigtiger841", "password": "redhead", "salt": "Pii33pqL", "md5": "ea3043ea9b36202218760e1e20c1a698", "sha1": "dd38287733289745b81c9f132c40dd14bc3b7e1d", "sha256": "f4c745bd9af6d19bf64ea40ba1461a7443e9fcd91df11635570c34ce4c0fa771", "registered": "1225817453", "dob": "946403496", "phone": "021-686-6277", "cell": "081-578-3583", "PPS": "8607168T", "picture": { "large": "http://api.randomuser.me/portraits/women/82.jpg", "medium": "http://api.randomuser.me/portraits/med/women/82.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/women/82.jpg" }, "version": "0.6", "nationality": "IE" } }, { "user": { "gender": "male", "name": {"title": "mr", "first": "gilbert", "last": "jennings"}, "location": { "street": "5801 o'connell street", "county": "dún laoghaire–rathdown", "state": "indiana", "zip": "39404" }, "email": "gilbert.jennings17@example.com", "username": "brownpanda771", "password": "cecile", "salt": "1obuFJot", "md5": "b9cec0adf70102f2f2864babd802c52c", "sha1": "6f38fc8fe8fc24688f40cb36d9deaeaddf6342ee", "sha256": "72d3b4199b7e5ec07388ce7b1fe250c1b4c7b89331dd433daa01409b4e3946a9", "registered": "1412592435", "dob": "303641620", "phone": "011-280-5054", "cell": "081-101-8479", "PPS": "9825189T", "picture": { "large": "http://api.randomuser.me/portraits/men/2.jpg", "medium": "http://api.randomuser.me/portraits/med/men/2.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/men/2.jpg" }, "version": "0.6", "nationality": "IE" } }, { "user": { "gender": "male", "name": {"title": "mr", "first": "alexander", "last": "howell"}, "location": { "street": "6676 mill road", "county": "limerick", "state": "california", "zip": "50326" }, "email": "alexander.howell89@example.com", "username": "crazypanda484", "password": "ncc1701a", "salt": "cSQ9stxf", "md5": "1e27d0c330372b8dc2e88dc6f34d9ebf", "sha1": "c5ac1af9831f9d2bd4f6f4a54374f0b4d6055447", "sha256": "1958dc5e8d42a7f1ab652591ff5be2a5ab6d13ff41e3f607c70594e6981ba841", "registered": "1329755694", "dob": "1062450998", "phone": "041-809-5573", "cell": "081-513-1057", "PPS": "6067438T", "picture": { "large": "http://api.randomuser.me/portraits/men/73.jpg", "medium": "http://api.randomuser.me/portraits/med/men/73.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/men/73.jpg" }, "version": "0.6", "nationality": "IE" } }, { "user": { "gender": "male", "name": {"title": "mr", "first": "earl", "last": "banks"}, "location": { "street": "5035 ormond quay", "county": "limerick", "state": "hawaii", "zip": "55569" }, "email": "earl.banks94@example.com", "username": "organickoala180", "password": "1966", "salt": "RclxfBaU", "md5": "8071292ec92ad705c6be09b573d8bd8c", "sha1": "9bdf901a581bf153054b56e3ab02bf1457aa0b1f", "sha256": "bb14430710b45d1b72ec303c2bf529a79abae1e411d9c65205220c47061cd190", "registered": "1336596882", "dob": "535265745", "phone": "031-142-5899", "cell": "081-285-1416", "PPS": "5891844T", "picture": { "large": "http://api.randomuser.me/portraits/men/26.jpg", "medium": "http://api.randomuser.me/portraits/med/men/26.jpg", "thumbnail": "http://api.randomuser.me/portraits/thumb/men/26.jpg" }, "version": "0.6", "nationality": "IE" } }] } ] }; var organizations = responseData.results; var length = organizations.length; var dataBlob = {}; var sectionIDs = []; var rowIDs = []; var users; var organization; var user; var i; var userLength; var j; for (i = 0; i < length; i++) { organization = organizations[i]; sectionIDs.push(organization.id); dataBlob[organization.id] = organization.organization; users = organization.users; userLength = users.length; rowIDs[i] = [];//rowIDs是一个二维数组 for (j = 0; j < userLength; j++) { user = users[j].user; rowIDs[i].push(user.md5); dataBlob[organization.id + ":" + user.md5] = user; } } this.setState({//注意写法不要加= dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs), loaded: true }); } } const styles = StyleSheet.create({ container: { flex: 1, }, listView: { paddingTop: 20, backgroundColor: '#F5FCFF', }, header:{ height:60, justifyContent:'center', alignItems:'center', paddingTop:25, backgroundColor:'#3F51B5', }, headerText:{ fontSize:20, color:'white', fontWeight:'bold', }, section:{ backgroundColor:'#2196F3', justifyContent:'center', alignItems:'center', fontSize:18, flexDirection:'column', padding:5, }, row:{ paddingVertical:20, borderTopColor:'white', borderLeftColor:'white', borderRightColor:'white', borderBottomColor:'#E0E0E0', borderWidth:1, }, rowText:{ color: '#212121', fontSize: 16 }, loadingPage:{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, });

效果

listview_03.png

listview_04.png

三.属性

ScrollView props...
这意味着ListView可以使用所有ScrollView的属性。
dataSource ListViewDataSource
ListView.DataSource实例（列表依赖的数据源）
initialListSize number
指定在组件刚挂载的时候渲染多少行数据。用这个属性来确保首屏显示合适数量的数据，而不是花费太多帧逐步显示出来。
onChangeVisibleRows function
(visibleRows, changedRows) => void

当可见的行的集合变化的时候调用此回调函数。visibleRows 以 { sectionID: { rowID: true }}的格式包含了所有可见行，而changedRows 以{ sectionID: { rowID: true | false }}的格式包含了所有刚刚改变了可见性的行，其中如果值为true表示一个行变得可见，而为false表示行刚刚离开可视区域而变得不可见。

onEndReached function
当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用。原生的滚动事件会被作为参数传递。译注：当第一次渲染时，如果数据不足一屏（比如初始值是空的），这个事件也会被触发，请自行做标记过滤。
onEndReachedThreshold number
调用onEndReached之前的临界值，单位是像素。
pageSize number
每次事件循环（每帧）渲染的行数。
removeClippedSubviews bool
用于提升大列表的滚动性能。需要给行容器添加样式overflow:'hidden'。（Android已默认添加此样式）。此属性默认开启。
renderFooter function
() => renderable
页头与页脚会在每次渲染过程中都重新渲染（如果提供了这些属性）。如果它们重绘的性能开销很大，把他们包装到一个StaticContainer或者其它恰当的结构中。页脚会永远在列表的最底部，而页头会在最顶部。
renderHeader function
renderRow function
rowData, sectionID, rowID, highlightRow) => renderable
从数据源(Data source)中接受一条数据，以及它和它所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。
如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。当一行被高亮时，其两侧的分割线会被隐藏。行的高亮状态可以通过调用highlightRow(null)来重置。
renderScrollComponent function
(props) => renderable
指定一个函数，在其中返回一个可以滚动的组件。ListView将会在该组件内部进行渲染。默认情况下会返回一个包含指定属性的ScrollView。
renderSectionHeader function
(sectionData, sectionID) => renderable
如果提供了此函数，会为每个小节(section)渲染一个粘性的标题。
粘性是指当它刚出现时，会处在对应小节的内容顶部；继续下滑当它到达屏幕顶端的时候，它会停留在屏幕顶端，一直到对应的位置被下一个小节的标题占据为止。
renderSeparator function
(sectionID, rowID, adjacentRowHighlighted) => renderable
如果提供了此属性，一个可渲染的组件会被渲染在每一行下面，除了小节标题的前面的最后一行。在其上方的小节ID和行ID，以及邻近的行是否被高亮会作为参数传递进来。
scrollRenderAheadDistance number
当一个行接近屏幕范围多少像素之内的时候，就开始渲染这一行。
stickyHeaderIndices [number]（ios）
一个子视图下标的数组，用于决定哪些成员会在滚动之后固定在屏幕顶端。举个例子，传递stickyHeaderIndices={[0]}会让第一个成员固定在滚动视图顶端。这个属性不能和horizontal={true}一起使用。

四. 方法

getMetrics()
导出一些用于性能分析的数据。
scrollTo(...args)
滚动到指定的x, y偏移处，可以指定是否加上过渡动画。