React Native学习之 ListView 的简单使用

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

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绘制方法