ReactNative学习笔记--ListView

ReactNative学习笔记--ListView
ListView是很常用的一个组件，跟OC的UITableView一样的效果，在UI里使用频率很高， 从源码中可知RN中的ListView是基于ScrollView扩展得来的，所以具有ScrollView的相关属性。

常用属性

dataSource：数据源，类似于iOS中tableView的数据源。

renderRow：渲染某一行，类似于iOS的cellForRow方法。
(rowData, sectionID, rowID, highlightRow) => renderable

从数据源DataSource中接受一条数据rowData，以及它和它所在sectionId,rowId。返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。

如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。当一行被高亮时，其两侧的分割线会被隐藏。行的高亮状态可以通过调用highlightRow(null)来重置。

renderHeader：渲染头部View，类似于OC的tableHeaderView

renderFooter：渲染尾部View,类似于OC的tableFooterView

renderSectionHeader:
参数 (sectionData, sectionID) => renderable
渲染ListView的SectionHeader区头，注意此区头会一直悬浮在区头，直到这个区完全划过

renderSectionFooter:渲染ListView的SectionFooter区尾

renderSeparator：
参数：(sectionID, rowID) => renderable
如果提供了此属性专门渲染ListView的分割线，会渲染每一行下面，除了小节标题的前面的最后一行。

使用示例

  _getSectionHeaderData = (dataBlob,sectionID)=> {
        return dataBlob.section[sectionID];

    };

    _getRowData = (dataBlob, sectionID, rowID)=> {
        return dataBlob.rowData[sectionID][rowID];
    };

     constructor(props){
        super(props);
        var  data = {'section':['客户基本信息','客户状态信息'],
            'rowData':[
                [{title:'客户姓名',type:0,placeholder:'请输入潜在客户姓名',defaultValue:''},
                    {title:'客户性别',type:1,content:'男'},
                    {title:'客户年龄',type:0,placeholder:'请输入客户年龄',defaultValue:''},
                    {title:'联系电话',type:0,placeholder:'请输入客户联系电话',defaultValue:''},
                    {title:'电子邮箱',type:0,placeholder:'请输入客户电子邮箱',defaultValue:''},
                    {title:'微信账号',type:0,placeholder:'请输入客户微信账号',defaultValue:''},
                    {type:12},
                    {title:'通讯地址',type:1,content:'北京,朝阳,望京街道'},
                    {type:11},
                ],

                [
                    {title:'预估资产',type:1,content:'100-500万元'},
                    {title:'预估资产',type:1,content:'建立联系'},
                    {title:'可能性',type:1,content:'比较靠谱'},
                    {title:'优先级',type:1,content:'低'}
                ]
            ]
        };
     var sectionHeaders=[];
        var section=[];
        data.section.map((item,i)=>{
            sectionHeaders.push(i);
        });
        data.rowData.map((item,i)=>{
            var newSection=[];
            item.map((subItem,j)=>{
                newSection.push(j);
            });
            section.push(newSection);
        });

         var dataS = new ListView.DataSource({
            getSectionHeaderData:this._getSectionHeaderData,
            getRowData:this._getRowData,
            rowHasChanged: (r1, r2) => r1 !== r2,
            sectionHeaderHasChanged:(s1,s2)=>s1!==s2
        });

        this.state = {
            dataSource: dataS.cloneWithRowsAndSections(data,sectionHeaders,section),
            selected:false,
        };
    }

    _renderListView = ()=>{
            return(
                 <ListView
                style={{backgroundColor:System_styles.hei_12}}
                dataSource={this.state.dataSource}
                renderRow={this._renderRow}
                renderSectionHeader={this._renderSectionHeader}>
                >
                 </ListView>
            )
    }

继承ScrollView的scrollTo({x:,y:,animated:})