RN入门基础9：滚动视图 ListView

一、介绍

ListView组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。

ListView更适于长列表数据，且元素个数可以增删。

和ScrollView不同的是，ListView并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

ListView组件必须的两个属性是dataSource和renderRow。

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

二、举例

下面创建了一个简单的ListView，并预设了一些模拟数据。

首先是初始化ListView所需的dataSource，其中的每一项（行）数据之后都在renderRow中被渲染成了Text组件，最后构成整个ListView。

1.首先导入组件

import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';

2.核心代码

rowHasChanged函数也是ListView的必需属性。

这里只是简单的比较两行数据是否是同一个数据，来判断某行数据是否变化了。

（===符号只比较基本类型数据的值，和引用类型的地址）

export default class myprojectname extends Component{
  //初始化模拟器数据
  constructor(props){
    super(props);
    const ds = new ListView.DataSource( { rowHasChanged: (r1,r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(
          [ 'one','one','one', 'two', 'three','four','five','six','seven'])
    };
  }

  //渲染
  render(){
    return (
        <View style={ {flex:1,paddingTop:22}}>
          <ListView
          dataSource = {this.state.dataSource}
          renderRow={ (rowData) => <Text style={ {fontSize: 72} }> {rowData} </Text>}/>
        </View>
    )
  }
}

4.效果

RN入门基础9：滚动视图 ListView

猜你喜欢