版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chichengjunma/article/details/53331160
项目中React Native ListView的长按删除功能分享(基于ES5):
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
TouchableOpacity
} from 'react-native';
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => {
r1 !== r2
}
});
var rows = ['row 1', 'row 2', 'row 3', 'row 4', 'row 5', 'row 6'];
var XXX = React.createClass({
getInitialState() {
return {
dataSource: ds.cloneWithRows(rows),
};
},
_deleteRow(rowID) {
delete rows[rowID];
this.setState({dataSource: ds.cloneWithRows(rows)})
},
renderRow(rowData, sectionID, rowID) {
return <TouchableOpacity onLongPress={()=>this._deleteRow(rowID)}
style={{height: 60, flex: 1, borderBottomWidth: 1}}>
<Text>{rowData}</Text>
</TouchableOpacity>
},
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>
);
}
});
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官方后续还会优化这块