ReactNative 应用 ListView 实现分组列表

一、前言

在前期博文中讲解了应用SectionList实现分组列表，本文主要讲解ReactNative长列表数据展示核心组件ListView ，该组件在数据量大时性能较差，占用内存持续增加，故诞生了FlatList组件。

二、ListView 常用属性

ScrollView 相关属性样式全部继承

三、ListView 高阶特性

ListView同样支持一些高级特性，包括设置每一组的粘性头部(类似于iPhone)、支持设置列表的header以及footer视图、当数据列表滑动到最底部的时候支持onEndReached方法回调、设备屏幕列表可见的视图数据发生变化的时候回调onChangeVisibleRows以及一些性能方面的优化特性。

ListView设计的时候，当需要动态加载非常大的数据的时候，下面有一些方法性能优化的方法可以让ListView滚动的时候更加平滑：

只更新渲染数据变化的那一行 ，rowHasChanged方法会告诉ListView组件是否需要重新渲染当前那一行。

选择渲染的频率，默认情况下每一个event-loop(事件循环)只会渲染一行(可以同pageSize自定义属性设置)。这样可以把大的工作量进行分割，提供整体渲染的性能。

四、ListView Demo

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
// 引入数据文件
var models = require("./Wine.json");

var listViewTest = React.createClass({

  /**
   * 生命周期,不可更改的属性在这里
   * @returns {{}}
   */
  getDefaultProps() {
    return {}
  },
  /**
   * 生命周期,状态机在这里
   * @returns {{}}
   */
  getInitialState() {
    // 创建数据源   rowHasChanged方法决定了ListView是否重新渲染当前这一行
    var ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => {
        r1 !== r2
      }
    });
    return {
      // 数据源中的数据
      dataSource: ds.cloneWithRows(models)
    }
  },
  /**
   * 生命周期,复杂的操作在这里
   */
  componentDidMount() {

  },
  /**
   * 生命周期,渲染
   * @returns {XML}
   */
  render() {
    return (
      <ListView
        dataSource={this.state.dataSource} // 指定数据源
        renderRow={this.renderRow} // 渲染每一行
      />
    );
  },
  /**
   * ListView根据数据源的数据进行渲染
   * @param rowData 每一项的数据
   * @param sectionID 组号
   * @param rowID 行号
   * @param highlightRow
   * @returns {XML}
   */
  renderRow(rowData, sectionID, rowID, highlightRow) {
    return (
      <TouchableOpacity 
        activeOpacity={0.7} 
        onPress={() => this.cellDidClick(rowID, rowData)}
      >
        <View style={styles.wineCell}>
          <Image style={styles.icon} source={{uri: rowData.image}}/>
          <View style={styles.titleContainer}>
            <Text style={styles.title}>{rowData.name}</Text>
            <Text style={styles.subTitle}>${rowData.money}</Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  },

  cellDidClick(rowID, rowData) {
    alert("点击了" + rowID + rowData.name);
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    paddingTop: 20
  },
  wineCell: {
    flexDirection: "row",
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    paddingLeft: 10,
    paddingTop: 10,
    paddingBottom: 10,
    backgroundColor: 'white'
  },
  icon: {
    width: 60,
    height: 60,
  },
  titleContainer: {
    flexDirection: "column",
    justifyContent: 'space-between'
  },
  title: {
    fontSize: 15,
    fontWeight: 'bold',
    width: width - 60,
    paddingLeft: 10,
    paddingRight: 10
  },
  subTitle: {
    fontSize: 15,
    marginLeft: 10,
  }
});

AppRegistry.registerComponent('listViewTest', () => listViewTest); 

五、拓展阅读

• 《ReactNative进阶（二十五）：ScrollView滚动视图组件详解》
• 《ReactNative进阶（四十一）：应用FlatList实现分组列表》
• 《ReactNative进阶（三十七）：应用SectionList实现分组列表》
• 《ReactNative进阶（十九）：React Native按钮Touchable系列组件使用详解》
• 《ReactNative进阶（十七）：RefreshControl组件实现刷新效果》
• 《ReactNative进阶（十五）：react-native-tab-navigator实现底部导航栏》
• 《ReactNative进阶（十）：网页组件（WebView）的使用详解》