【React Native开发】React Native控件之ListView组件解说以及最齐全实例(19)

50635659
本文出自:【江清清的博客】

(一)前言

【好消息】个人站点已经上线执行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:http://www.lcode.org

今天我们一起来看一下ListView组件的使用详细解释以及详细事例

刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758)。请不要反复加群！欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

ListView组件是React Native中一个比較核心的组件，用途很的广。该组件设计用来高效的展示垂直滚动的数据列表。最简单的API就是创建一个ListView.DataSource对象。同一时候给该对象传入一个简单的数据集合。而且使用数据源(data source)实例化一个ListView组件,定义一个renderRow回调方法(该方法的參数是一个数组)。该renderRow方法会返回一个可渲染的组件(该就是列表的每一行的item)

(二)官方ListView简单实例

以下看一个关于ListView最简单的样例:

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  ListView,
} from'react-native';
var ListViewDemo =React.createClass({
    getInitialState: function() {
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        return {
          dataSource: ds.cloneWithRows(['row1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8']),
        };
    },
    render: function() {
      return (
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) =><Text>{rowData}</Text>}
        />
      );
    }
});
AppRegistry.registerComponent('ListViewDemo',() => ListViewDemo);

实例执行效果例如以下:

(三)高级特性

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

ListView设计的时候。当须要动态载入很大的数据的时候。以下有一些方法性能优化的方法能够让我妈ListView滚动的时候更加平滑：

仅仅更新渲染数据变化的那一行，rowHasChanged方法会告诉ListView组件是否须要又一次渲染当前那一行。详细能够查看ListViewDataSource实例
选择渲染的频率默认情况以下每个event-loop(事件循环)仅仅会渲染一行(能够同pageSize自己定义属性设置)。
这样能够把大的工作量进行分隔，提供总体渲染的性能。

(四)基本属性方法

ScrollView相关属性样式全部继承
dataSource ListViewDataSource 设置ListView的数据源
initialListSize number 进行设置ListView组件刚刚载入的时候渲染的列表行数。用这个属性确定首屏或者首页载入的数量。而不是花大量的时间渲染载入很多页面数据，提供性能哦
onChangeVisibleRows function (visibleRows,changedRows)=>void。当可见的行发生变化的时候回调该方法。
visibleRows參数对全部可见的行为{selectionID:{rowId:true}}的形式，changedRow參数对已经改变可见的行为{selectionID:{rowID:true|false}}。该值true代表可见。false代表在视图之外不可见的行。
onEndReachedThreshold number 当偏移量达到设置的临界值调用onEndReached
onEndReached function 方法。当全部的数据项行被渲染之后。而且列表往下进行滚动。一直滚动到距离底部onEndReachedThredshold设置的值进行回调该方法。原生的滚动事件进行传递(通过參数的形式)。
pageSize number 每一次事件的循环渲染的行数
removeClippedSubviews bool 该属性用于提供大数据列表的滚动性能。该使用的时候须要给每一行(row)的布局加入over:'hidden'样式。
该属性默认是开启状态。
renderFooter function 方法 ()=>renderable ，在每次渲染过程中头和尾总会又一次进行渲染。
假设发现该又一次绘制的性能开销比較大的时候，能够使用StaticContainer容器或者其它合适的组件。在每一次渲染过程中Footer(尾)该会一直在列表的底部，header(头)该会一直在列表的头部
renderHeader function 方法使用情况和上面的renderFooter差点儿相同
renderRow function 方法 (rowData,sectionID,rowID,highlightRow)=>renderable 该方法有四个參数，当中分别为数据源中一条数据，分组的ID，行的ID，以及标记是否是高亮选中的状态信息。
renderScrollComponent function 方法 (props)=>renderable 该方法能够返回一个能够滚动的组件。默认该会返回一个ScrollView
renderSectionHeader function (sectionData,sectionID)=>renderable 假设设置了该方法，这样会为每个section渲染一个粘性的header视图。该视图粘性的效果是当刚刚被渲染開始的时候，该会处于相应的内容的顶部，然后開始滑动的时候。该会跑到屏幕的顶端。
直到滑动到下一个section的header(头)视图，然后被替代为止。
renderSeparator function (sectionID,rowID,adjacentRowHighlighted)=>renderable 假设设置该方法。会在被每一行的以下渲染一个组件作为分隔。
除了每个section分组的头部视图前面的最后一行。
scrollRenderAheadDistance number 进行设置当该行进入屏幕多少像素以内之后就開始渲染该行

(五)使用实例

5.1.首先看一个相对简单的实例，列表每一行显示一个图片以及文字，详细代码例如以下:

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  ListView,
  Image,
  TouchableOpacity,
} from'react-native';
var THUMB_URLS = [
  require('./imgs/like.png'),
  require('./imgs/dislike.png'),
  require('./imgs/call.png'),
  require('./imgs/fist.png'),
  require('./imgs/bandaged.png'),
  require('./imgs/flowers.png'),
  require('./imgs/heart.png'),
  require('./imgs/liking.png'),
  require('./imgs/party.png'),
  require('./imgs/poke.png'),
  require('./imgs/superlike.png'),
  require('./imgs/victory.png'),
  ];
var ListViewDemo =React.createClass({
    getInitialState: function() {
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        return {
          dataSource: ds.cloneWithRows(['row1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8','row 9','row10','row 11','row 12']),
        };
    },
    _renderRow: function(rowData: string,sectionID: number, rowID: number) {
    var imgSource = THUMB_URLS[rowID];
    return (
        <TouchableOpacity>
          <View>
            <View style={styles.row}>
              <Image style={styles.thumb} source={imgSource} />
              <Text style={{flex:1,fontSize:16,color:'blue'}}>
                {rowData + '我是測试行号哦~'}
              </Text>
            </View>
          </View>
        </TouchableOpacity>
    );
   },
    render: function() {
      return (
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}
        />
      );
    }
});
var styles =StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#F6F6F6',
  },
  thumb: {
     50,
    height: 50,
  },
});
AppRegistry.registerComponent('ListViewDemo',() => ListViewDemo);

执行效果例如以下:

5.2.实例实现表格布局，代码例如以下:

'use strict';
var React =require('react-native');
var {
  AppRegistry,
  Image,
  ListView,
  TouchableHighlight,
  StyleSheet,
  Text,
  View,
} = React;
 
var THUMB_URLS = [
  require('./imgs/like.png'),
  require('./imgs/dislike.png'),
  require('./imgs/call.png'),
  require('./imgs/fist.png'),
  require('./imgs/bandaged.png'),
  require('./imgs/flowers.png'),
  require('./imgs/heart.png'),
  require('./imgs/liking.png'),
  require('./imgs/party.png'),
  require('./imgs/poke.png'),
  require('./imgs/superlike.png'),
  require('./imgs/victory.png'),
  require('./imgs/logo.png'),
];
 
var ListViewDemo =React.createClass({
  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource:ds.cloneWithRows(this._genRows({})),
    };
  },
  _pressData: ({}: {[key: number]: boolean}),
  componentWillMount: function() {
    this._pressData = {};
  },
  render: function() {
    return (
      <ListView
        initialListSize={12}
        contentContainerStyle={styles.list}
        dataSource={this.state.dataSource}
        renderRow={this._renderRow}
      />
    );
  },
  _renderRow: function(rowData: string,sectionID: number, rowID: number) {
    var imgSource = THUMB_URLS[rowID];
    return (
      <TouchableHighlight underlayColor="red">
        <View>
          <View style={styles.row}>
            <Image style={styles.thumb} source={imgSource} />
            <Text style={styles.text}>
              {rowData}
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  },
  _genRows: function(pressData: {[key: number]:boolean}): Array<string> {
    var dataBlob = [];
    for (var ii = 0; ii < THUMB_URLS.length;ii++) {
      dataBlob.push('单元格 ' + ii);
    }
    return dataBlob;
  },
});
var styles =StyleSheet.create({
  list: {
    marginTop:5,
    justifyContent: 'space-around',
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  row: {
    justifyContent: 'center',
    padding: 5,
    margin: 3,
     85,
    height: 85,
    backgroundColor: '#F6F6F6',
    alignItems: 'center',
    borderWidth: 1,
    borderRadius: 5,
    borderColor: '#CCC'
  },
  thumb: {
     45,
    height: 45
  },
  text: {
    flex: 1,
    marginTop: 5,
    fontWeight: 'bold'
  },
});
AppRegistry.registerComponent('ListViewDemo',() => ListViewDemo);

执行效果例如以下:

(六)最后总结

今天我们主要学习一下ListView组件的谅解以及相关实例演示。大家有问题能够加一下群React Native技术交流群(282693535)或者底下进行回复一下。

尊重原创，转载请注明：From Sky丶清（http://blog.csdn.net/developer_jiangqq）侵权必究！

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

关注我的微博。能够获得很多其它精彩内容