react-native-gifted-listview(一)

原创 2016年08月31日 09:53:38

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

版权声明:欢迎评论、补充;24小时内回复;及时更新;欢迎转载。

ReactNative列表ListView

ListView dataSource renderRow ListView的点击 ListView在android中,如果我们需要显示一个ListView,有两项是比不可少的,首先是ListView...
  • huaheshangxo
  • huaheshangxo
  • 2016年03月23日 10:16
  • 15347

React Native常用第三方组件汇总--史上最全

react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-de...
  • chichengjunma
  • chichengjunma
  • 2016年10月25日 11:28
  • 27638

React-native 第三方组件

选项卡 各种漂亮的小组件 按钮 输入框表单验证 https://github.com/gcanti/tcomb-form-native https://github.com/FaridSafi/rea...
  • shenhuaikun
  • shenhuaikun
  • 2017年06月15日 10:58
  • 1770

react native ListView中数据变了,但是ListView不刷新的解决方法

我采取的解决方法是,   let newData = JSON.parse(JSON.stringify(dataSource._dataBlob.s1));    以下是我使用时候的具体介...
  • LemonGirls
  • LemonGirls
  • 2016年09月14日 16:38
  • 6561

React-Native中处理ListView上拉加载更多

RN-ListViewLoadMore react-native中处理ListView的下拉刷新和上拉加载更多 ReactNative(RN)中的ListView是一个非常常用的组件,RN中已...
  • sinat_17775997
  • sinat_17775997
  • 2017年02月08日 21:34
  • 2066

React Native 基础篇 之 ListView 产品列表实现

1.为了测试用的是本地图片,首先图片资源集成到项目中。 这里是android适配的项目 将图片资源放置在下面 通过json 方式访问 项目名称\android\app\src\main\res\dra...
  • JLhaoran
  • JLhaoran
  • 2017年04月12日 11:11
  • 1242

React-native ListView 必须点击屏幕才会加载数据

最近在改动ListView时发现ListView数据不是在进入界面之后就加载出来,而是要点击屏幕之后才会加载数据,很怪异的bug。 首先函数是这么写的:在fetchInfo()里去获取服务器里的个人...
  • black_dreamer
  • black_dreamer
  • 2016年07月13日 23:28
  • 3142

【React Native开发】- ListView垂直的滚动列表

ListView组件用于显示一个垂直滚动的列表,其中的元素之间结构相似,数据不同。 ListView适合于长列表数据,并且数据个数可添加及删除。与ScrollView不同的是Lisview不是渲染全...
  • baidu_35701759
  • baidu_35701759
  • 2017年06月05日 21:59
  • 572

React-Native傻瓜式学习笔记(一):ListView的简单使用

最近国内外使用React-Native写APP的公司越来越多了,我们公司也不甘落后,将使用React-Native重写APP这个事提上了日程。然而这个任务落到我头上的时候,我本人作为一个Android...
  • angelseedex
  • angelseedex
  • 2016年12月09日 13:12
  • 601

混合开发的大趋势之一React Native ScrollView (拉伸视图), ListView(列表视图)

ScrollView 在iOS/Android都有一样的实现,使得有限的屏幕里有着无限的拓展空间,同样的有2种模式,水平和垂直。 我们来看下官方竖直方向的例子: ...
  • KaSuperMen
  • KaSuperMen
  • 2016年08月26日 10:14
  • 465
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react-native-gifted-listview(一)
举报原因:
原因补充:

(最多只允许输入30个字)