ReactNative之ListView

ListView跟FlatList功能差不多。。。使用方法略有不同

使用前引入。。。

首先创建一个有很多数据的数组

var arr = [..................];

然后使用这个数组构建一个ListView的数据源对象

This.state = {

ds: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(arr)

}

最后把这个数据源引入到ListView标签当中即可

<ListView

Ref={(lv)=>this.lv=lv}     //把自己的地址赋值给当前类对象的lv属性方便该类找到自己

contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',justifyContent:'space-around'}}    //这种容器标签添加样式不应该直接用style属性而是contentContainerStyle

onScroll={(e)=>this.scroll(e)}  //滚动监听

dataSource={this.state.ds}   //数据源

renderRow={(rowData, sectionID, rowID, highlightRow)=>this.getItems(rowData, sectionID, rowID, highlightRow)}   // 根据数据源渲染每条数据

renderSeparator={(sectionID, rowID, adjacentRowHighlighted)=>this.divideLine(sectionID, rowID, adjacentRowHighlighted)}>   //每一行的分割线

</ListView>

scroll(e){

//通过e.nativeEvent.contentOffset.y可以获取滚动条的位置

}

getItems(rowData, sectionID, rowID, highlightRow){   //每条数据渲染的样式

return(

<Text>{rowDate.txt}</Text>

);

}

divideLine(sectionID, rowID, adjacentRowHighlighted){   //每条数据之间添加一条分割线

return(

<View key={rowID} style={{height:2,backgroundColor:’#eee’}}></View>  //注意key属性必须要有，否则报警告，提示复用，ListView不允许有重复的数据，这个View添加一个key属性并且值都不同，保证了唯一性。。。

);

}

 

还有一个注意点！！！这是一个大陷阱！！！

当数组中的数据改变的话界面这时候并不会立马改变，需要重新这一步操作：

this.setState({

ds:new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(arr)

});

数据源对象不改变系统不会自动刷新界面的，必须新建一个数据源才可以刷新界面。。。

 

列表怎么可以少了下拉刷新功能呢！！！

前提！！！引入RefreshControl

在ListView中添加以下属性：

refreshControl = {

<RefreshControl

refreshing={this.state.refresh   boolean值，控制是否处于刷新状态}

onRefresh={this._onRefresh 这是一个方法控制刷新内容}

colors={[‘#f00’ , ‘#0f0’ , ‘#00f’]} 刷新进度条每转一圈换一种颜色

progressBackgroundColor=”#fff” 进度条背景颜色

/>

}

 

_onRefresh(){

this.setState({

    refresh:true

});

//假如在这里更新列表数据需要从新new一个数据源对象，参考上面的陷阱。。。

最后更新完成后

this.setState({

   refresh:false

});

}