React Native ListView的长按删除功能

项目中React Native ListView的长按删除功能分享(基于ES5)：

[javascript] view plain copy

 

1. /** 
2.  * Sample React Native App 
3.  * https://github.com/facebook/react-native 
4.  * @flow 
5.  */  
6.   
7. import React, {Component} from 'react';  
8. import {  
9.     AppRegistry,  
10.     StyleSheet,  
11.     Text,  
12.     View,  
13.     ListView,  
14.     TouchableOpacity  
15. } from 'react-native';  
16.   
17. var ds = new ListView.DataSource({  
18.     rowHasChanged: (r1, r2) => {  
19.         r1 !== r2  
20.     }  
21. });  
22.   
23. var rows = ['row 1', 'row 2', 'row 3', 'row 4', 'row 5', 'row 6'];  
24.   
25. var XXX = React.createClass({  
26.   
27.     getInitialState() {  
28.         return {  
29.             dataSource: ds.cloneWithRows(rows),  
30.         };  
31.     },  
32.   
33.     _deleteRow(rowID) {  
34.         delete rows[rowID];  
35.         this.setState({dataSource: ds.cloneWithRows(rows)})  
36.     },  
37.   
38.     renderRow(rowData, sectionID, rowID) {  
39.         return <TouchableOpacity onLongPress={()=>this._deleteRow(rowID)}  
40.                                  style={{height: 60, flex: 1, borderBottomWidth: 1}}>  
41.             <Text>{rowData}</Text>  
42.         </TouchableOpacity>  
43.     },  
44.   
45.     render() {  
46.         return (  
47.             <ListView  
48.                 dataSource={this.state.dataSource}  
49.                 renderRow={this.renderRow}  
50.             />  
51.         );  
52.     }  
53.   
54.   
55.   
56. });  
57.   
58. AppRegistry.registerComponent('XXX', () => XXX);  

补充1：JS的删除方法除了delete删除不改变数组长度外，还有splice等方法。

补充2：rowHasChanged是 React native 组件纪录 state 是否更新的一个方法，等于或不等于并不影响你第一次显示，影响的是你state变化以后的显示情况。如果是等于，state变化 页面不更新 , state不变，才更新（一般不用）。不等于就是 state变化 页面立即更新。
rowHasChanged即sectionID，react将数据封装成了新对象，key叫s1 s2 ... ，打印rowHasChanged或者sectionID即输出s1 s2 ...

补充3：如果ListView中有enableEmptySections = {true}属性，字面理解为可以使ListView的元素item为空。测试：删除最后一个item，debug模式下会报一个警告，如下图。

react native官方后续还会优化这块