React Native ListView 长按删除

版权声明：本文为博主原创文章，未经博主允许不得转载。 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官方后续还会优化这块