React-Native 之 ListView 的简单使用

官方文档详细的介绍了ListView的使用方式。
在这里我简单的进行了实践，拉取网络数据进行显示，触底自动加载更多。代码非常简洁清晰，这里直接贴出来O(∩_∩)O~。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  ListView,
  View,
  Image
} from 'react-native';

var totalList = []; 

export default class BillProject extends Component {  
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this._onEndReached.bind(this);
    this.state = {
      dataSource: ds.cloneWithRows([]),
      loadState:"1", // 1正在加载 2加载完成 3 加载错误 
      page:0
    };
  }

  render() {
      console.log("render");
    return (
      <ListView
        onEndReachedThreshold={2}
        onEndReached={this._onEndReached.bind(this)}
        contentContainerStyle={styles.list}
        enableEmptySections={true}
        dataSource={this.state.dataSource}
        renderRow={this._renderRow}/>
    );
  }
  _renderRow(rowData, sectionID, rowID){
      return (
              <View style={styles.row}>
                  <Image   
                  style={styles.thumb}                     
                   source={ {uri: "http://api.all-appp.com/uploads/" + rowData.zuopin_url}}
                  > 
                  </Image>
              </View>
          );
  }
  componentWillMount(){
    this.getZuoPinFromApi();
  }
  _onEndReached(){
    console.log("到达底部");
    //加载更多数据 通过onEndReachedThreshold设置离底部还有几个cell 需要render时触发
    this.getZuoPinFromApi();
  }
  //获取网络数据
  getZuoPinFromApi() {
    try {
      let formData = new FormData();  
      formData.append("type","3");  
      formData.append("page",this.state.page); 
      formData.append("userid",""); 
      formData.append("myid","3"); 
      formData.append("filterid",totalList.length > 0 ? totalList[totalList.length-1].zuopin_id : ""); 
      formData.append("customType","1"); 
      formData.append("version","0.2.8");
      var self = this; 
      var response = fetch('http://api.all-appp.com/api/show',{
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: formData
        })
      .then((response) => response.json())
      .then((responseJson) => {
        console.log("response " + response);
        if(responseJson.code == 0){
          // self.state.dataSource.cloneWithRows(responseJson.zuopins)
          // self.state.dataSource.concat(responseJson.zuopins);
          // self.setState(self.state.dataSource);
          totalList = totalList.concat(responseJson.zuopins);
          this.setState({  
              dataSource: self.state.dataSource.cloneWithRows(totalList), 
              loadState:"1",
              page:self.state.page + 1
          });  
        }else{
          console.log(responseJson.msg);
        }
      })
      .catch((error) => {
        console.error(error);
      });;
    } catch(error) {
      console.error(error);
    }
  }
}
const styles = StyleSheet.create({
  list: {
    marginTop:5,
    justifyContent: 'space-around',
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  row: {
    justifyContent: 'center',
    padding: 5,
    margin: 3,
    width: 150,
    height: 150,
    backgroundColor: '#F6F6F6',
    alignItems: 'center',
    borderWidth: 1,
    borderRadius: 5,
    borderColor: '#CCC'
  },
  thumb: {
    width: 140,
    height: 140
  },
  text: {
    flex: 1,
    marginTop: 5,
    fontWeight: 'bold'
  },
});
AppRegistry.registerComponent('BillProject', () => BillProject);
 

在constructor方法中新建一个DataSource实例.

简单列举用到的一部分Listview属性。

onEndReachedThreshold={2} 表示在离底部还有2个row需要render的时候触发 onEndReached 方法。

onEndReached={this._onEndReached.bind(this)} 利用这个方法进行触底加载更多操作，代码里没有给出加载动画，不过RN给出了一个默认实现属性RefreshControl，你们可以自行尝试。

enableEmptySections={true} 允许组为空

renderRow={this._renderRow} 每个cell绘制方法

点击查看效果图