React Native ListView 长按删除

前端之家收集整理的这篇文章主要介绍了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 <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);
原文链接:https://www.f2er.com/react/305406.html

猜你在找的React相关文章