react-native-gifted-listview(一)

for

use gifted-listview 显示列表

step

1. list.js

    /*
  use react-native-gifted-listview for ijoy list show
*/
import React,{Component} from 'react';
import {
  View,
  Text,
  ListView,
  StyleSheet,
  Dimensions,
  TouchableHighlight
} from 'react-native';

import DataRepository from './DataRepository';
import GiftedListView from 'react-native-gifted-listview';
const repository=new DataRepository();
const height=Dimensions.get("window").height;
const toobarHeight=59;
const sectionHeight=height-toobarHeight;
export default class List extends Component{
  constructor(){
    super();
    const ds=new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2});
    this.state={
      DS:ds.cloneWithRows([]),
      loaded:false,
      dataArray:[]
    }
  }
  fetchHospital(){
  repository.fetchHospital()
   .then((dataArray)=>{
      console.log(dataArray);
      this.setState({
        DS:this.state.DS.cloneWithRows(dataArray),
        loaded:true,
        dataArray:dataArray
      })
   })
   .catch((error)=>{
     console.error(error);
   })
   .done();
}
  componentDidMount(){
    const tt=this.fetchHospital();
    console.log('----------------');
    console.log(tt);
  }
  _onFetch=(page = 1, callback, options)=> {
   setTimeout(() => {
     var rows =this.state.dataArray;
     if (page === 3) {
       callback(rows, {
         allLoaded: true, // the end of the list is reached
       });
     } else {
       callback(rows);
     }
   }, 1000); // simulating network fetching
 }
  _renderRowView=(rowData)=> {
   return (
     <TouchableHighlight
       style={styles.row}
       underlayColor='#c8c7cc'

     >

       <Text>{rowData.name}</Text>
     </TouchableHighlight>
   );
 }
  render(){
    if(this.state.loaded===false)return (<View><Text>正在加载</Text></View>)
    return(
      <View style={styles.container}>
        <View style={styles.navBar} />
        <GiftedListView
          rowView={this._renderRowView}
          onFetch={this._onFetch}
          firstLoader={true} // display a loader for the first fetching
          pagination={true} // enable infinite scrolling using touch to load more
          refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android
          withSections={false} // enable sections
          enableEmptySections={true}
          customStyles={{
            paginationView: {
              backgroundColor: '#eee',
            },
          }}

          refreshableTintColor="blue"
        />
      </View>
    );
  }
}
const styles=StyleSheet.create({
  container: {
   flex: 1,
   backgroundColor: '#FFF',
 },
 navBar: {
   height: 64,
   backgroundColor: '#CCC'
 },
 row: {
   padding: 10,
   height: 44,
 }
})

1. DataRepository.js

'use strict';
const API_HOSPITAL_LIST="http://www.tngou.net/api/hospital/list";
function DataRepository() { // Singleton pattern
  if (typeof DataRepository.instance === 'object') {
    return DataRepository.instance;
  }

  DataRepository.instance = this;
}
DataRepository.prototype.fetchHospital=function(callback?:?(error:?Error,result:?Object)=>void){
    const reqUrl=API_HOSPITAL_LIST;
    const networking=this._safeFetch(reqUrl);
    const merged=new Promise((resolve,reject)=>{
      Promise.all([networking])
        .then((values)=>{
           console.log('-------------resulte---------------');
           console.log(values);
           resolve(values[0]);
        })
    });
    return merged;
}
DataRepository.prototype._safeFetch=function(reqUrl:string){
  console.log(reqUrl);
  return new Promise((resolve,reject)=>{
    fetch(reqUrl)
    .then((response)=>response.json())
    .then((responseData)=>{
      console.log(responseData);
      let result=[];
      result=responseData.tngou;
       resolve(result);
    })
    .catch((error)=>{
      console.error(error);
      resolve(null);
    })
  }
  );
}

module.exports=DataRepository;

---

last update 2016-08-31