React Native ListView 长按删除

项目中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 this._deleteRow(rowID)}
                                 style={{height: 60, flex: 1, borderBottomWidth: 1}}>
            {rowData}
        
    },

    render() {
        return (
            
        );
    }



});

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 ListView 长按删除_第1张图片

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



你可能感兴趣的:(app,React,Native)