React-Native 中的ListView

一、简介

         讲到ListView,做为android研发的我感觉十分的亲切，毕竟同名同意。基本上，除了几个别的app之外，难得会有app不用ListView(当然，也有新出的RecyclerView)。好吧，这就走进ReactNative中的ListView。

二、ListView的demo(基于官方)

        官方给出了一个极简的ListView demo（使用的是es5标准），然而，在之后接触到es6时才发现，es6其实更符合常用java的我，毕竟之前js功底很一般......上demo

<span style="font-size:14px;">import React, {Component} from 'react';
import {
    Text,
    ListView,
} from 'react-native';

class AppListView extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows(['row 1', 'row 2'])
        }
    }


    render() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={(rowData) => <Text>{rowData}</Text>}
            />
        );
    }
}

module.exports = AppListView;</span>

          语法风格和java很接近啊，这就更利于学习和理解了，分享下属性和作用：

<span style="font-size:14px;">rowHasChanged: (r1, r2) => r1 !== r2}</span>

在这里，主要用于描述行列刷新改变的标准，===和==也有本质的区别，===指的是完全相同。

和es5不同的是，es5中队state属性设定是放在了getInitialState方法中，而es6则是在构造函数中通过this.state=[]进行属性值配置。

运行结果如下

三、ListView常用的几个功能

        说到ListView，不由自主的就会想起几个在app中常用的功能：分页，添加数据，header,footer。

            简单的使用header和footer只需要在ListView中添加属性renderHeader 和 renderFooter就可以了，数据的话，可以同过state进行更新，如下是个静态添加过footer和header的ListView：

          

   只是简单的listView里边添加了

renderHeader={()=><Text>this is header</Text>}
renderFooter={()=><Text>this is footer</Text>}

   如果需要显示分页加载，使用在state里边设置属性，并在对应的方法里调用就可以了。

   至于数据添加就更方便了，

   

constructor(props) {
        super(props);
        // 初始状态
        this._data = ['r1','r2'];
        var ds = new ListView.DataSource({rowHasChanged: (w1, w2) => w1 !== w2});
        this.state = {
            dataSource: ds.cloneWithRows(this._data)
        }
    }

    componentDidMount() {
        this._data = this._data.concat(['r1', 'r2','r12']);
        this.setState( {
            dataSource:this.state.dataSource.cloneWithRows(this._data)
        }
        )
    }

   切记xx.concat返回的是一个新数组，而不是和xx合并，结果如图：

这里调用了

componentDidMount()

也就是组件渲染后加载。

数据分页添加，footer,header就这样完成了。