您的位置：首页 > Web前端 > React

ReactNative学习－ListView

2016-04-20 11:07 567 查看
ListView相对于View的优点就在于可以不用一下子就把数据加载完，而是滑动着加载着数据，可以缓解数据加载，避免软件卡死。

官方文档：https://facebook.github.io/react-native/docs/listview.html#content

简单使用：

constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2'])
};
}
<ListView
contentContainerStyle={{flexDirection: 'row',flexWrap: 'wrap', justifyContent:'center'}}
dataSource={this.state.dataSource}
initialListSize={14}
renderRow={(rowData) =><Text>{rowData}</Text>}
/>

contentContainerStyle：设置list的样式

dataSource：数据源

initialListSize：官方文档的解释是指定在组件刚挂载的时候渲染多少行数据，但是在实际运用的时候，测试的根本不是这么回事儿...(react版本0.23.0)

renderRow：function()；(rowData, sectionID, rowID, highlightRow) => renderable

从数据源(dataSource)中接受一条数据，以及数据和数据所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。

默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。

ListView还有其它的一些设置，详细可查看官方文档。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航