ReactNative-ListView用法

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>}
    />
  );
}

属性的用法：

<View style={{flex: 1, marginTop: (Platform.OS === 'ios')? 64: 48,}} >
　　<ListView style={{flex:1,overflow: 'hidden',marginBottom: (Platform.OS === 'ios')? 50: 0,}}
　　　　initialListSize={20} // 指定在组件刚挂载的时候渲染多少行数据
　　　　pageSize={10} // 每次事件循环渲染的行数
　　　　scrollRenderAheadDistance={50} // 当一行接近屏幕范围多少像素之内的时候开始渲染改行

　　　　removeClippedSubviews={true} // 用于提升大列表的滚动性能（需要给行容器添加样式overflow:'hidden'）默认开启

　　　　dataSource={ds.cloneWithRowsAndSections(this.state.datas.lists)} // 渲染的数据聚合

　　　　renderRow={this._renderList} // 单一条数模板

　　　　minPulldownDistance={30} // 最新下拉长度

　　　　renderFooter={this.renderFooter} // 渲染页脚

　　　　onEndReached={this.onEndReached} // 当所有数据已经渲染过，并且列表被滚动到距离底部不足100像素距离时调用

　　　　onEndReachedThreshold={100} // 调用onEndReached之前的临界值，单位是像素

　　　　refreshControl={

　　　　<RefreshControl

　　　　　　refreshing={this.state.isRefreshing} //是否显示指示器

　　　　　　onRefresh={this._reloadLists} // 刷新时调用的方法

　　　　　　tintColor= "#fff" // 指示器颜色

　　　　　　title="正在拉取数据..."

　　　　　　/>
　　　　}
　　/>
</View>