hcmobile-sdk/components/react-native-ultimate-listview/UltimeateListViewDemo.js

mobile-sdk

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet,Platform } from 'react-native';
import { UltimateListView, UltimateRefreshView } from './index';
import RowLayout from '../rowLayout/index';

// create a component
class UltimeateListViewDemo extends Component {


    render() {
        return (
            <View style={styles.container}>
                <UltimateListView
                    ref={ref => this.listView = ref}
                    style = {{flex:1}}
                    onFetch={this.onFetch}
                    keyExtractor={(item, index) => `${index} - ${item}`} // this is required when you are using FlatList
                    refreshableMode="advanced" // basic or advanced
                    item={(item,index)=> this._renderItem(item,index)} // this takes three params (item, index, separator)
                    // refreshable = {true}
                    displayDate
                    // separator
                    refreshableTitleRefreshing = '数据更新中……'
                    refreshableTitleRelease='释放刷新'
                    allLoadedText = ''
                    // new props on v3.2.0
                    arrowImageStyle={{ width: 20, height: 20, resizeMode: 'contain' }}
                    dateStyle={{ color: 'lightgray' }}
                    // refreshViewStyle={Platform.OS === 'ios' ? { height: 80, top: -80 } : { height: 80 }}
                    refreshViewHeight={80}
                />
            </View>
        );
    }

    onFetch = async (page = 1, startFetch, abortFetch) => {
        try {
            let rowData = [{},{},{},{},{},{},{},{},{},{},{},{},{}];
            if (page === 5) {
              rowData = [];
            }
      
            await this.sleep(1000);
            // Simulate the network loading in ES7 syntax (async/await)
            startFetch(rowData,4);
          } catch (err) {
            abortFetch(); // manually stop the refresh or pagination if it encounters network error
            console.log(err)
          }
    }


  sleep = time => new Promise(resolve => setTimeout(() => resolve(), time))
    
    
    _renderItem(item,index) {
        return(
            <RowLayout
                style = {{flex:1,}}
                tag = {`item-->${index}`}
                lineColor = '#999'
                content = ''
                showArrow
                onClick = {() => {
                }}
            />
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
});

//make this component available to the app
export default UltimeateListViewDemo;