react native组件学习之listview

ListView是reacct native的一个重要组件，类似于android中的listview和recyclerview,react native中ListView的基本使用步骤如下：

创建一个ListView.DataSource数据源，给它传递一个普通的数据数组

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

定义ListView的renderRow回调函数，该函数根据数组中的每个数据，返回ListView中的每一行

ListView常用属性

[code]dataSource ListViewDataSource 

initialListSize number 

指定在组件刚挂载的时候渲染多少行数据。用这个属性来确保首屏显示合适数量的数据，而不是花费太多帧逐步显示出来。

onChangeVisibleRows function 

(visibleRows, changedRows) => void

当可见的行的集合变化的时候调用此回调函数。visibleRows 以 { sectionID: { rowID: true }}的格式包含了所有可见行，而changedRows 以{ sectionID: { rowID: true | false }}的格式包含了所有刚刚改变了可见性的行，其中如果值为true表示一个行变得可见，而为false表示行刚刚离开可视区域而变得不可见。

onEndReached function 

当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用。原生的滚动事件会被作为参数传递。

onEndReachedThreshold number 

调用onEndReached之前的临界值，单位是像素。

pageSize number 

每次事件循环（每帧）渲染的行数。

removeClippedSubviews bool 

用于提升大列表的滚动性能。需要给行容器添加样式overflow:'hidden'。（Android已默认添加此样式）。此属性默认开启。

renderFooter function 

() => renderable

页头与页脚会在每次渲染过程中都重新渲染（如果提供了这些属性）。如果它们重绘的性能开销很大，把他们包装到一个StaticContainer或者其它恰当的结构中。页脚会永远在列表的最底部，而页头会在最顶部。

renderHeader function 

renderRow function 

(rowData, sectionID, rowID, highlightRow) => renderable

从数据源(Data source)中接受一条数据，以及它和它所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。

如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。当一行被高亮时，其两侧的分割线会被隐藏。行的高亮状态可以通过调用highlightRow(null)来重置。

renderScrollComponent function 

(props) => renderable

指定一个函数，在其中返回一个可以滚动的组件。ListView将会在该组件内部进行渲染。默认情况下会返回一个包含指定属性的ScrollView。

renderSectionHeader function 

(sectionData, sectionID) => renderable

如果提供了此函数，会为每个小节(section)渲染一个粘性的标题。

粘性是指当它刚出现时，会处在对应小节的内容顶部；继续下滑当它到达屏幕顶端的时候，它会停留在屏幕顶端，一直到对应的位置被下一个小节的标题占据为止。

renderSeparator function 

(sectionID, rowID, adjacentRowHighlighted) => renderable

如果提供了此属性，一个可渲染的组件会被渲染在每一行下面，除了小节标题的前面的最后一行。在其上方的小节ID和行ID，以及邻近的行是否被高亮会作为参数传递进来。

scrollRenderAheadDistance number 

当一个行接近屏幕范围多少像素之内的时候，就开始渲染这一行。

ListView简单demo

下面看一个官方提供的简单demo，效果如下：

[code]var secondProject = React.createClass({

  getInitialState() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
        dataSource: ds.cloneWithRows(['row 1', 'row 2','row3']),
    };
  },

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

rowHasChanged函数可以告诉ListView它是否需要重绘一行数据，和android中的notifiyDataChanged比较相似。

cloneWithRows ：接收一个数组，根据该数组创建数据源

dataSource ：该属性，用于为ListView指定当前的数据源

renderRow ：该属性用来标示ListView中每一行需要显示的样子。参数表示当前行需要显示的数据

绑定指定数组

这里我创建一个方法，在该方法中返回特定的数组，如下：

[code]_getRows: function(): Array<string> {
    var data = [];
    for (var i = 0; i < 100; i++) {
      var pressedText = "this is item :" +i;
      data.push(pressedText);
    }
    return data;
  },

这里返回的是Array类型，通过push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。此时只需要在cloneWithRows方法中调用该方法即可：

[code]cloneWithRows(this._getRows())

为当前行添加样式

[code]var styles = StyleSheet.create({
  rowStyle: {
    backgroundColor: '#f98765',  
    alignItems: 'center',    //#水平居中
    justifyContent: 'center',//  #垂直居中
    textAlign: 'center',  // #文字水平居中
    height: 56,
    padding: 10,
    margin: 6,
  },
});

使用定义的样式，这里我添加了一个TouchableOpacity，用来显示点击的效果。

[code]renderRow={(rowData) => (<TouchableOpacity><Text style= {styles.rowStyle}>{rowData}</Text></TouchableOpacity>)}

指定自定义的布局

这里，我就使用一种最常见的布局吧，效果如下：



创建一个方法_renderRow，用来返回当前行的模板：

[code]_renderRow: function() {
     return (
      <TouchableHighlight>
        <View>
          <View style={styles.row}>
            <Image style={styles.thumb} source={require('./hawk.png')} />
            <Text style={styles.text}>
              {'this is aa'}
            </Text>
          </View>
          <View style={styles.separator} />
        </View>
      </TouchableHighlight>
    );
  }

在renderRow指定该方法属性：

[code]<ListView
   dataSource={this.state.dataSource}
   renderRow={this._renderRow}
  />

//style样式如下：
row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#F6F6F6',
  },
  separator: {
    height: 1,
    backgroundColor: '#CCCCCC',
  },
  thumb: {
    width: 64,
    height: 64,
  },
  text: {
    flex: 1,
    alignItems: 'center',    //#水平居中
    justifyContent: 'center',//  #垂直居中
    textAlign: 'center',  // #文字水平居中
  },

ok，listview就简单学习到这里了。