您当前位置：首页 > web前端 > htmlcss > React Native控件之Listview

React Native控件之Listview

来源：程序员人生发布时间：2016-09-26 08:20:10 阅读次数：2792次

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

ListView更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，ListView其实不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

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

下面的例子创建了1个简单的ListView，并预设了1些摹拟数据。首先是初始化ListView所需的dataSource，其中的每项（行）数据以后都在renderRow中被渲染成了Text组件，最后构成全部ListView。

rowHasChanged函数也是ListView的必须属性。这里我们只是简单的比较两行数据是不是是同1个数据（===符号只比较基本类型数据的值，和援用类型的地址）来判断某行数据是不是变化了。

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

class ListViewBasics extends Component {
  // 初始化摹拟数据
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ])
    };
  }
  render() {
    return (
      <View style={{paddingTop: 22}}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
}

// 注册利用(registerComponent)后才能正确渲染
// 注意：只把利用作为1个整体注册1次，而不是每一个组件/模块都注册
AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);

ListView的1个经常使用场景就是从服务器端取回列表数据然后显示，要实现这1进程，你可能还需要学习React Native的网络相干用法.

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 Java线程和多线程（六）——守护线程

下一篇 数字图像处理中的基本图像类型

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点