React Native ListView的长按删除功能

最新推荐文章于 2024-05-16 01:32:45 发布

barnett_y

最新推荐文章于 2024-05-16 01:32:45 发布

阅读量2.6k

点赞数

分类专栏：【React-Native2点滴知识】

【React-Native2点滴知识】专栏收录该内容

698 篇文章 31 订阅

订阅专栏

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

[javascript]view plaincopy 
   
 /** 
  * 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模式下会报一个警告，如下图。