reactnative ListView

1.简单的ListView (点击、长按删除cell)

ListView组件必须的两个属性是dataSource和renderRow。dataSource是列表的数据源，而renderRow则逐个解析数据源中的数据，然后返回一个设定好格式的组件来渲染。

constructor(params)
你可以在构造函数中针对section标题和行数据提供自定义的提取方法和hasChanged
比对方法。如果不提供，则会使用默认的defaultGetRowData
和defaultGetSectionHeaderData
方法来提取行数据和section标题。
默认的提取函数可以处理下列形式的数据:
{ sectionID_1: { rowID_1: rowData1, ... }, ... }
或者：
{ sectionID_1: [ rowData1, rowData2, ... ], ... }
或者：
[ [ rowData1, rowData2, ... ], ... ]

构造函数可以接受下列四种参数（都是可选）：
getRowData(dataBlob, sectionID, rowID);
getSectionHeaderData(dataBlob, sectionID);
rowHasChanged(prevRowData, nextRowData);
sectionHeaderHasChanged(prevSectionData, nextSectionData);

state是一个状态 这里设置了一个状态dataSource，他的值就是ds.cloneWithRows(['row 1', 'row 2']),然后在ListView组件中使用了这个状态dataSource={this.state.dataSource}。这样就是将数据源交给了ListView。

  constructor(props){
    super(props);
    this.state = {
      dataSource : new ListView.DataSource({rowHasChanged:(r1,r2)=> r1 !== r2}).cloneWithRows(data)
    };
}

<1> 抽出ListView模块

 _randerContent(){
    return(
        <View style = {styles.container}>
            <ListView style = {{flex:1}}
            dataSource  = {this.state.dataSource}
            renderRow = {(rowData,sectionIds,rowIds)=> this._renderRowCell(rowData,sectionIds,rowIds)}
            />
        </View>
    )
}
render() {
  return(
      //抽出ListView
      this._randerContent()
  )
};

<2> cell 模块

_renderRowCell(rowData,sectionIds,rowIds){
    console.log(rowIds);
    return(
    <TouchableHighlight onPress ={()=> this._didSelect(rowIds)} onLongPress = {()=>this._deleteRow(rowIds)} >
        <View style = {styles.viewStyle}>
            <Text style = {styles.textStyle}>{rowData}</Text>
        </View>
    </TouchableHighlight>
    );
}

<3> 单击 长按删除模块

 _didSelect(rowid){
    alert('点击了'+rowid);
}
_deleteRow(rowid){
    delete data[rowid];
    this.setState({
    dataSource: this.state.dataSource.cloneWithRows(data)
    })
}

_deleteRow 删除 对应row下标数据data 然后重新改变状态 会重新渲染视图

RNListView.gif

2.带组视图ListView

<1> 构造函数

constructor(props){
    super(props);
    this.state = {
        data : new ListView.DataSource({rowHasChanged:(r1,r2)=>r1 !== r2,
            sectionHeaderHasChanged:(s1,s2)=>s1 !== s2,
        }),
    }
}

rowHasChanged函数也是ListView的必需属性。
sectionHeaderHasChanged 带组视图属性

<2>数据处理

componentDidMount(){
    
  let length = arr.length;
  let dataBlob = {};
  let rowIds = [];
  let sectionIds = [];

  for (let i =0 ;i < length;i ++){
     let dic = arr[i];
     sectionIds.push(dic.sId);
     dataBlob[dic.sId] = dic.title;

     let userLenght = dic.users.length;

     let users = dic.users;
      rowIds[i] = [];
     for (let j =0;j < userLenght;j++){

         let user = users[j];
         rowIds[i].push(user.rid);
         dataBlob[dic.sId + ':' + user.rid] = user;

     }
  }

    this.setState({
        data : this.state.data.cloneWithRowsAndSections(dataBlob,sectionIds,rowIds)
    })
}

rowIds是一个二维数组，包含了行数据对应的id标识符，例如[['a1', 'a2'], ['b1', 'b2', 'b3'], ...]。如果没有指定此数组，则默认取行数据的key。
sectionIds同理是包含了section标识符的数组。例如['s1', 's2', ...]。如果没有指定此数组，则默认取section的key。
根据指定的dataBlob和 rowIds为ListViewDataSource复制填充数据。dataBlob即原始数据。需要在初始化时定义抽取函数（否则使用默认的抽取函数）
其中 dataBlob 数据key 是[row：section] Value 是 每一个row 对应的对象 如： dataBlob[dic.sId + ':' + user.rid] = user;

<3>ListView显示

<View>
      <ListView
          dataSource = {this.state.data}
          renderRow = {this._renderContent}
          renderSectionHeader = {this.renderSectionHeader}
      />
</View>

renderSectionHeader 每个小节(section)渲染一个粘性的标题。
粘性是指当它刚出现时，会处在对应小节的内容顶部；继续下滑当它到达屏幕顶端的时候，它会停留在屏幕顶端，一直到对应的位置被下一个小节的标题占据为止。可以使用 stickySectionHeadersEnabled来决定是否启用其粘性特性。
stickyHeaderIndices
一个子视图下标的数组，用于决定哪些成员会在滚动之后固定在屏幕顶端。举个例子，传递stickyHeaderIndices={[0]}
会让第一个成员固定在滚动视图顶端。这个属性不能和horizontal={true}一起使用。

分组ListView

3.Grid layout ListView

<1>ListView显示

<ListView
     initialListSize={12}
     dataSource  = {this.state.dataSource}
    renderRow = {(rowData,sectionid,rowId)=> this._renderRowCell(rowData,sectionid,rowId)}
    contentContainerStyle={styles.listviewStyle}
/>

其中 ListView的样式必须是 contentContainerStyle 而不是style

<2>ListView、Cell样式

listviewStyle:{
    marginTop:5,
    justifyContent: 'space-around',
    flexDirection: 'row',
    flexWrap: 'wrap'
},
textStyle:{
    color:'#999',
    fontSize:15,
    margin:5,
},
viewStyle:{
    backgroundColor:'white',
    borderColor:'#d5d5d5',
    borderWidth:1,
    height:itemWdith,
    width:itemWdith,
    padding: 5,
    margin: 5,
    justifyContent:'center',
    alignItems:'center',
}

grid Layout ListView

demo下载地址
参考文献