React Native组件--ListView

695 查看

简介

ListView - 一个核心组件，用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组，再使用数据源来实例化一个ListView组件，并且定义它的renderRow回调函数，这个函数会接受数组中的每个数据作为参数，返回一个可渲染的组件（作为listview的每一行）。

基本用法

constructor(props) {
      super(props);

      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !==r2});

      this.state = {
    dataSource: ds.cloneWithRows(['row 1', 'row 2'])
    };
}

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

换一种写法并添加点击事件

    class ListViewSample extends Component {

      constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
          dataSource: ds.cloneWithRows(['row 1', 'row 2'])
        };
      }

      render() {

        return (
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this._renderRow.bind(this)}
          />
        );
      }

      _renderRow(rowData : string , rowID : number){
         return (
           <TouchableHighlight onPress={() => this._pressRow(rowData, rowID)}>
             <View>
               <Text>
                 {rowData}
               </Text>
             </View>
           </TouchableHighlight>
         );
      } 

      _pressRow(url: string, rowID: number){
          this._alert(url);

          switch (rowID) {
            case 0:
              break;
            case 1:
              break;
            default:
              break;
          }
      }

      _alert(url : string){
         AlertIOS.alert(
          '提醒',
          ''+ url,
          [{text: 'Cancle', onPress: () => console.log('Foo Pressed!')},
          {text: 'OK', onPress: () => console.log('Bar Pressed!')},]
         );
      }

    }

属性

View属性

ScrollView 相关属性样式全部继承

dataSource ListViewDataSource

ListView.DataSource实例（列表依赖的数据源）

initialListSize number

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

在ListView标签下添加：
initialListSize = {10}

onEndReachedThreshold

调用onEndReached之前的临界值，单位是像素。
PS:这个值如果不设置会导致onEndReached无法正常使用

pageSize

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

在ListView标签下添加：
pageSize = {10}

removeClippedSubviews

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

scrollRenderAheadDistance number

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

方法

renderFooter renderHeader

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

onEndReached

当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用。原生的滚动事件会被作为参数传递。译注：当第一次渲染时，如果数据不足一屏（比如初始值是空的），这个事件也会被触发。

onChangeVisibleRows

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

renderRow

从数据源(Data source)中接受一条数据，以及它和它所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。
如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。当一行被高亮时，其两侧的分割线会被隐藏。行的高亮状态可以通过调用highlightRow(null)来重置。

renderSeparator

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

效果

屏幕快照 2016-06-22 20.32.34.png

引用：http://reactnative.cn/docs/0.27/getting-started.html#content