react中ListView组件

react中ListView组件，官方ant里面好多代码看的好复杂，最终做好后的简略代码供参考

创建ListView.DataSource 实例

class MyApprover extends React.Component {
	constructor(props) {
		super(props);
         // 创建ListViewDataSource对象
        const dataSource = new ListView.DataSource({
            // rowHasChanged(prevRowData, nextRowData); 用其进行数据变更的比较
            rowHasChanged: (row1, row2) => row1 !== row2 
        })

先把你需要放到长列表里的数据获取到，上拉加载更多的时候把状态库里的approverList进行每次concat链接

    // render之前执行
    componentDidMount() {
        this.getData(true)
	}
    // 获取我的审批
    getData(ref=false){
        let params ={
            pageSize:this.state.pageSize,
            pageNum:this.state.pageNum,
            toPhone:toPhone,
            keyWord:this.state.searchValue
        }
        AjaxService.post(URL.getApprovedList,params,res=>{
            const dataList=res.data.applyList
            const len=dataList.length
            // 判断是否已经没有数据了
            if(len<=0){
                this.setState({
                    isLoading:false,
                    hasMore:false
                })
                return false
            }
            // 上拉加载更多
            var approverList=this.state.approverList.concat(dataList)
            this.setState({
                pageNum:this.state.pageNum,
                dataSource:this.state.dataSource.cloneWithRows(approverList),//数据源中的数据本身是不可修改的，要更新datasour中的数据，每次重新调用clonewithrows方法
                isLoading:false,
                approverList:approverList,//保存新数据进state
            })
        },(error) => {
			let tip = error.readyState == 0 ? tipMsg.offlineTip : tipMsg.errTip;
			Toast.info(tip, 1);
		})
    }

滑动到底部加载更多

// 滑动到底部时加载更多
    _onEndReached(event){
        // 加载中或没有数据了都不在加载
        if(this.state.isLoading || !this.state.hasMore){
            return
        }
        this.setState({
            isLoading:true,
            pageNum:this.state.pageNum + 1,//加载下一页
        },()=>{
            this.getData(false)
        })
    }

    render() {
        const row=(rowData,sectionID,rowId)=>{
            return (
                <div className="myApprover" key={rowId}>
                    <div><p>{rowData.applyTime.slice(0,10)}</p><span className="tagTime">{rowData.applyTime.slice(11)}</span></div>
                    <div><p>{rowData.visitorName}</p><span className="tagTime">{rowData.fromCompany}</span></div>
                    <div style={{margin:"auto 0"}}>
                        <button className={[
                        "approve",rowData.applyStatus===-1?"approve-wait":
                        (rowData.applyStatus===0?"approve-areadly":(rowData.applyStatus===2?"approve-down":(rowData.applyStatus===4||6?"approve-over":"approve-visited")))].join(' ')} 
                        onClick={()=>browserHistory.push(`${Config.project}?${rowData.applyUrl}`)}>{rowData.applyStatusText}</button></div>
                </div>
            )
        }

return(
        <div className="myApproverBox">
            {/* 内容部分 */}
            <div className="invitelist_content_wrapper">
                <div className="invitelist_content">
                    <ListView
                    ref={el=>this.lv=el}
                    dataSource={this.state.dataSource}
                    renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                    {this.state.isLoading ? 'Loading...' : '没有更多数据了...'}
                    </div>)}
                    renderRow={row}
                    useBodyScroll
                    onEndReached={this._onEndReached.bind(this)}
                    onEndReachedThreshold={10}
                    pageSize={5}
                    />
                </div> 
            </div>
        </div>