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 然后重新改变状态 会重新渲染视图
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}一起使用。
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',
}
