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繪製方法