使用 ListView 组件实现类似iPhone通讯录效果

chenbin92 commented 8 years ago

ListView 组件的使用

使用场景

用于展示垂直滚动的变化的数据列表

特点

1. 可以指定首次初始化渲染的条数
2. 可以指定每次事件循环渲染的条数
3. 支持下拉刷新(不支持上拉刷新)

属性

1. initialListSize: 初始化渲染的条数，一般大于首屏条数
2. pageSize:每次渲染的条数
3. renderScrollComponent: 返回的组件用来渲染list rows
4. scrollRenderAheadDistance: 顶部屏幕之外的数据离屏幕头部多远时开始渲染数据
5. onEndReachedThreshold: 距离底部多少时出发`onEndReached`
6. dataSource：接受的数据源，`ListViewDataSource`的实例对象,***必须***
7. renderSeparator：每行之间的分割线，函数类型
8. renderRow：每行的渲染函数
9. renderFooter：尾部渲染函数
10. renderHeader：头部渲染函数
11. renderSectionHeader：分组头的渲染函数
12. onChangeVisibleRows：可视化区域变化时出发，屏幕旋转时会调用
13. removeClippedSubviews： 实验性质的属性，提高滚动时到性能，和row的样式‘overflow:hidden’一起使用

方法

通过引用当前listview的实例对象可以调用的方法

1. getMetrics：返回一些常态数据
2. getScrollResponder：返回事件相应器对象
3.  setNativeProps：动态设置样式

基本使用

1. 创建一个 ListView.DataSource 数据源

var dataSource = new ListView.DataSource({
  // doSomething
})

2. 然后给它传递一个普通的数据数组

var dataSource = new ListView.DataSource({
   rowHasChanged: (row1, row2) => row1 !== row2
})

rowHaschanged(): 初始化状态，用于判断状态是否改变，如果 state 改变就重新渲染数据，否则无变化

3. 再使用数据源来实例化一个ListView组件

render: function() {
   return (
      <ListView dataSource={this.state.dataSource} />
   )
}

4. 定义它的renderRow回调函数，这个函数会接受数组中的每个数据作为参数，返回一个可渲染的组件（作为listview的每一行）

render: function() {
   return (
      <ListView 
         dataSource={this.state.dataSource}
         renderRow={(rowData)=> <Text>{rowData}</Text>}
     />
   )
}

renderRow(): 接受数组中的每个数据作为参数，返回一个可渲染的组件，作为listview的每一行

示例一：

var ListViewExample = React.createClass({
  // 这里返回一个对象，设置组件的初始化状态，
  getInitialState: function() {
    var ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2  // 用于判断当前数据变化的标准
    });
    return {
      dataSource: ds.cloneWithRows(this._genRows()),
    };
  },

   // 生成数据
  _genRows: function() {
      var dataArray = [];
      for(var i=1;i<15;i++) {
        dataArray.push("row" + i)
      }
      return dataArray;
  },

  render: function() {
    return (
      <ListView
        dataSource={this.state.dataSource} // 数据源
        renderRow={(rowData) => <Text style={styles.rowText}>{rowData}</Text>} /> // 接受数组中的每个数据作为参数, 作为listview的每一行（for循环）
    );
  }
});

var styles = StyleSheet.create({
  rowText: {
    padding: 18,
    borderWidth: 1,
    borderColor: '#eee'
  },
});

listViewExample

示例二：类似 iPhone 通讯录的滑动效果

使用 ListView 组件提供的 renderSectionHeader() 方法，我们可以实现一个类似 iPhone 通讯录的滑动效果，如果设置了该方法，会为每一个section渲染一个粘性的header视图。该视图粘性的效果是当刚刚被渲染开始的时候，处于对应的内容的顶部；直到下一个section的header滑动到顶部时，会被替换成当前section的header，以此循环，即是我们常见的类似 iphone 通讯录的滑动效果